Two versions of Page intro

    This is a page intro 2/3

    Page intro component is to be used on second level pages and lower. Image is 2:1 ratio (2000x1000px) and has a swirl.

    This is a page intro full width

    Page intro component is to be used on second level pages and lower. Image should be 3:1 ratio and have a swirl. Schema is "TPW Page Intro"

    Two column text

    This is a Two column component - Left column header 1

    The Two Column Text component template does not have a top header, only headers for each paragraph. For a top header ad a Row title component to the page.

    Image should be 2:1 ratio. The component template can contain video. Schema is "Double_Rich_Text"

    Dont' forget to put in the media ALT Text

    Left column header 2

    You can add as many paragraphs as you want. Please note that on smartphones the right column content will be shown below the left column content. 

    Right column heading 1

    Restrictions mandatory fields or not
    The Two Column Text component template has some restrictions with mandatory fields. If only one paragraph = no mandatory fields (for example ok to just add a photo). But if adding paragraphs below the first paragraph it becomes mandatory to have a body text in the first paragraph.

    Also note there is no alignment of paragraphs between left and right column. Ir you want alignment you need to add new components with only one paragraph per column. 

    Remember the alt-text

    This is a new Two Column Text component

    You can have the image either below the text or next to the text. 

    Note! - If you add a paragraph under the image the body text field in the first paragraph (in this case the one with the image) becomes mandatory so you'll have to have some text over the image.

    The image should be 2:1 ratio. Schema is "Double_Rich_Text"

    You can have a link

    Remember the alt-text

    One column text

    This is a One Column Text component - First header

    This text spans across two thirds of the page. You can add as many paragraphs as you like. You can place Promo boxes, Simple boxes or Testimonials to the right of the One Column Text using a Column Marker component to create an invisible grid.

    Schema is "Single Rich Text"

    You can have an internal or external link

    Remember the alt-text

    Second header

    The image can be either 2:1 ratio or 3:1 ratio and is always displayed below the text field.

    The One Column Text component template can display videos.

    Remember the alt-text

    One Column Text containing references:

    References are always written like this in a One Column Text component template and placed in the bottom of the page.

    1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit enim eget facilisis facilisis. Sed in lorem sed nisl luctus.

    2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit enim eget facilisis facilisis. Sed in lorem sed nisl luctus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit enim eget facilisis facilisis. Sed in lorem sed nisl luctus

    Foot notes goes here.

    References explanations.

    1. Lorem Ipsum

    2. Lorem Ipsum

    Different versions of Promo boxes

    Simple box with and without call to action

    59 %

    A Simple box shows a percentage with the number placed with a blue background and the text below. Can have call to action. Schema "TPW Simple Box"

    Testimonials 1/3, 2/3 and full width

    Call to action optional. Name and Role are mandatory, Company optional. Image 1:1 ratio, swirl automatic. No image or Company possible for 1/3 box.

    Jane Doe,
    Dr,
    Nice Company

    Call to action optional. Name and Role are mandatory, Company optional. Image 1:1 ratio, swirl automatic. No image or Company possible for 1/3 box.

    Jane Doe, Dr, Nice Company

    Two ways of showing dynamic Product lists

    Different versions of Section headers

    This is a section header full width

    This is a section header one third

    This is a section header two third

    Section header two third with white padding below

    Different versions of Call to Actions

    This is an item list using the "Accordion" schema

    The nested components in here are built by using the "Tips_and_Questions" schema

    TENA U-test

    Have to have a heading

    The image should be a png in 1:1

    TENA U-test

    Step 2

    Put the pad on normally. Test results are available 15 minutes after urination.

    TENA U-test

    Step 3

    Follow normal pad changing routines. Remove TENA U-test from pad at pad change.

    TENA U-test

    Step 4

    Read results of TENA U-test. Valid up to 24 hours.

    Two different versions of Accordions

    Heading example: How do you obtain a UTI diagnosis?
    2000x2000_TPW_education-pharamacy-promobox.jpg

    Schema: "Tips_and_questions". Nested into schema "Accordion". Heading and Body text shown.

    Image can be used in ratio 1:1.

    Dummy text: Your doctor will test your symptoms, examine you thoroughly, and send your urine to be tested in a laboratory for nitrite, leukocytes (white blood cells), and other parameters.

    What is the treatment?
    1000x1000-3-skincare-family.png

    UTIs are caused by bacteria and therefore require treatment with antibiotics. Prescribed antibiotics must be taken throughout the prescribed duration, even if the symptoms disappear early.

    How long does it last?
    1000x1000-care-of-life-logo.png

    As a rule, the symptoms of inflammation subside after 3 to 4 days

    This is an accordion box

    Accordion box heading 1

    Body text goes here

    Accordion box heading 2

    Body text goes here

    Accordion box heading 3

    Body text goes here

    box-shadow.png

    Video banner - Only shows image (3:1 ratio) and video button

    Different ways to list links and downloads

    This is a List of links PDF

    Can only list links to pdf's.

    Links to internal or external pages can be done in the green button.

    box-shadow.png

    This is a List of links

    Can only list links to internal or external pages.
    box-shadow.png

    Example of Dashboard with 3 columns

    Example of Dashboard with 2 columns

    Example of Dashboard with 4 columns