iPart Name: grey row full width

Name the iPart "grey row full width" to obtain this styling

Button

iPart Name: primary row full width

Name the iPart "primary row full width" to obtain this styling

Button

iPart Name: secondary row full width

Name the iPart "secondary row full width" to obtain this styling

Button

Contents:

• Page headings
• Typography
• Buttons
• Calls to action
• Cta tiles
• Accordions
• Tabs
• Modals/popups
• IQAs
• Page banners
• Row colors (full-width banners)
• Carousels

Heading 1

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Heading 2

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Heading 3

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Heading 4

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Heading 5

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Heading 6

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body

• Unordered list
• Unordered list
• Unordered list
• Unordered list
• Unordered list

1. Ordered list
2. Ordered list
3. Ordered list
4. Ordered list
5. Ordered list
6. Ordered list

This is a text link

Content Button

Primary Button Secondary Button Special Button Grey Button White Button 

System Button

Button Secondary Button Dark Button Back Button Text Button Disabled Button Danger Error Warning Button

CTA Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque metus lectus, porttitor eget nibh vitae, bibendum commodo nunc.

tile

Name the iPart "tile" to have this styling.

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

• Paragraph
• Paragraph
• Paragraph

tile

Name the iPart "tile" to have this styling.

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

• Paragraph
• Paragraph
• Paragraph

tile

Name the iPart "tile" to have this styling.

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

• Paragraph
• Paragraph
• Paragraph

tile

Name the iPart "icon tile" to have this styling.

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

iPart Name: primary row

Name the iPart "primary row" to obtain this styling

Button

iPart Name: secondary row

Name the iPart "secondary row " to obtain this styling

Button

iPart Name: grey row

Name the iPart "grey row" to obtain this styling

Button

iPart Name: primary row

Name the iPart "primary row" to obtain this styling

In an adjacent iPart, your element name should contain the word "image", and itself contain an image <img > element

Button

iPart Name: grey row full width

Name the iPart "grey row full width" to obtain this styling

In an adjacent iPart, your element name should contain the word "image", and itself contain an image <img > element

Button

iPart Name: secondary row full width

Name the iPart "secondary row full width" to obtain this styling

In an adjacent iPart, your element name should contain the word "image", and itself contain an image <img > element

You can use different page layout column widths to adjust the size of the content and images, without adding additional classes

Button

Accordions - Click to expand

Accordions are collapsible content that hide/show information when clicked. Useful for segmenting information on longer pages.
Follow these instructions to turn content into an accordion.

Name this Content Html Part Accordion, set the heading as H4, and all subsequent content will appear in the accordion.

Accordions - Two levels

Accordions - Click to expand

To nest one accordion within another, place a second <h4> heading inside the same accordion iPart. This will create a nested structure with the second <h4> inside the first accordion.

To achieve this:

1. Name this Content HTML part "Accordion."
2. Set two headings as <h4>. The content placed after the second <h4> will automatically be wrapped within the first heading's accordion.

Heading 4

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Name, year