Cascade Design Library Accordions Cards Classes Columns CTA Block CTA Links Easy Columns Factoids Featured Banner Featured Cards Featured Content Featured Highlight Full-Width Banner Hero Banners News Staff Listing Tabs Templates Testimonial Block Titles Video

Classes

Homepage Full width Left Navigation News Article

Using Classes in the WYSIWYG Editor

When working within the WYSIWYG Editor, there are several classes available for formatting content. These classes are applied by highlighting the text and selecting the desired format from the top menu: Format > Formats > Custom > (Choose a format from the list).

Adding Button Classes

Primary Button (btn-western-purple-light)
- Go to Format > Formats > Custom > Purple Button.

Primary Button

Secondary Button (btn-western-white-light)
- Go to Format > Formats > Custom > White Button.

Secondary Button

Using Both Buttons Together
If you need both buttons and want them to scale properly, you can copy and paste this class into the Source Code section of the WYSIWYG Editor wherever the buttons are needed.
<div class="d-flex flex-column flex-md-row gap-4"><a class="btn-western-purple-light" href="#" target="_self">Button 1</a> <a class="btn-western-white-light" href="#" target="_self">Button 2</a></div>

Primary Button Secondary Button

Adding Chevron Links

Highlight the bulleted list and go to Format > Formats > Custom > Arrow List.

Chevron Link Best Practices

Chevron links should not be placed inside of paragraphs.
A chevron icon should never be used without a link.

Adjusting Heading Sizes

Go to Format > Formats > Headings > Heading (2-6).

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Adjusting Font Style

Go to Format > Formats > Custom> (and choose from: BentonSans Book, BentonSans Medium, BentonSans Bold)

BentonSans Book

BentonSans Medium

BentonSans Bold