Component: WSIWYG with Sidebar

Component: WYSIWYG with Sidebar
Note: Headline above defined outside of WYSIWYG in Headline field. "Display" style for headlines should be avoided.

H1 Header: H1 with no styles applied.

H1 with “Subhead” style applied from the Style drop-down.

P paragraph. Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

H2 Header: H2 with no styles applied.

H2 with “Subhead” style applied from the Style drop-down.

P paragraph. Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.

H3 Display Style.

H3 Header: H3 with no styles applied.

H3 with “Subhead” style applied from the Style drop-down.

P paragraph. Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.

H4 Header: H4 with no styles applied.

P paragraph. Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

H5 Header: H5 with no styles applied.

P paragraph. Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula.

H6 Header: H6 with no styles applied.

P Paragraph: P Lead-In style. Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.

P Paragraph: P Call-Out style. Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic. Jícama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts.

P Paragraph: Paragraph with no styles applied. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.

Paragraph with bold text in it. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.

Paragraph with italic text in it. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

Paragraph with a link in it.

Paragraph with a link with a class of arrow-circle-before in it.

Paragraph with a link with a class of arrow-circle-after in it.

Paragraph with a link with a class of arrow-angle-after in it.

Paragraph with a link with a class of ext in it.

Unordered List

• List Item
• List Item
• List Item

Ordered List

1. List Item
2. List Item
3. List Item

Blockquote Text

Component: Image Tout - Full Width

Component: Image Tout - Full Width
Note: Background Image defined. Link defined.

Component: Image Tout - Full Width - Two Column

Component: Image Tout - Full Width - Two Column
Note: No Background Image defined. Both columns have background color selected but no icons. Links are defined.

Component: Image Tout - Full Width - Two Column

Component: Image Tout - Full Width - Two Column
Note: Single Background Image defined. Both columns have icons but no links defined.

Component: Image Tout - Two Column

Component: Image Tout - Two Column
Note: Two different Background Images. Column 1 on the left has no icon but does have a link. Column 2 on the right has icon but no link.

Component: Content Cards

Component: Content Cards
Note: No Headline, no Background Image, no Overlay, nothing in the WYSIWYG field, and no links in the Content Cards.

Component: Content Cards

Component: Content Cards
Note: Headline, Background Image, Medium Overlay, and text in the WYSIWYG field.

Component: Content Tout with Image

Component: Content Tout with Image
Note: Headline, Image aligned right, Border Color yellow, CTA (Call To Action) button.

Component: Content Tout with Image

Component: Content Tout with Image
Note: Headline, Image aligned left, Border Color blue, No CTA (Call To Action) button.

Component: Carousel

Component: Carousel
Note: Each slide has WYSIWYG for content.

Component: Content Cards with Images

Component: Content Cards with Images
Note: Headline and subhead added outside of cards, Headline and WYSIWYG. Possible to have "Round text" addition, that is a date to sit to the top right of image circle. Possible to also have CTA (Call To Action) button. Also possible to have link below the cards that is formatted.

Component: Icon Tout

Component: Icon Tout
Note: Headline and subhead added outside of touts, Icon added as graphic. Text added in WYSIWYG. The second tout has no graphic but text styled with "Display > H3 Display" and then resized to a H4 heading to fit.

Component: Tabs Three Column

Component: Tabs Three Column
Note: This component creates tabs that are capable of holding up to 3 columns of content in each tab. You are not limited to only three tabs and the content in each column can be different. You can set the width of the columns from a drop down as well as choose how much of that column to use. You should consider adding an empty paragraph tag before your content so it doesn't run into the bottom of the tabs (Click Tab Two for example).

Component: Steps

Component: Steps
Note: The steps component creates one step at a time. To add an additional step, you have to add an additional step component. You can choose the background colors for the left and right sides and the numbering of steps is automatic.

There is more

There is more
We added a second page as this was getting long and you shouldn't add too many components

Style Page Too