Style Guide - Body Content

A breakdown of the available body content components available across all content types.

Body content components

Body content components are components that aid in informational storytelling. They rarely include links or navigation, and make up the majority of a page's core content.

The WYSIWYG

The standard WYSIWYG content component. Allows for the addition of basic formatted text.

Subheading is available

  • As is basic
  • list
  • formatting

And in-copy links to other content sections.

Those links can also be styled to look like buttons

 

 

Accordions

Accordions are a great way to break pages up and make them more browsable, especially for mobile users.

The accordion creates a collapsed content WIZYWIG underneath the accordion heading.

All of the formatting that is available in the standard WIZYWIG is available within the accordion.

Accordions are often used for long Q/A of FAQ style pages that need to be browsed quickly.

Consider using this kind of formatting when a page has a large number of question/answers, or somewhat disconnected content pieces that need to be presented together.

 

 

A Fact

Facts are supplemental content elements, usually positioned alongside body content.

They have a primary number or short statement, followed by a longer supplemental statement.

The fact can include an icon from our icon library, as well as a link to a landing page.

24
Awards in 2020

 

 

Unlinked Icon Card
A way to chunk content under an icon and title. Similar to Icon List, but should only be used for very short ideas, similar to facts.

 

 

Icon List

An Icon List Item

Is a great way to add visual appeal to a fairly standard list of text items. The list items look best when there is a title statement and supplementing sentence or two.

Items can be linked

Either the title of the link item, or within the blurb.

Links and other basic formatting of text is possible.

 

 

Media Embed

The preferred way to embed images or video content. Adding multiple will create a carousel effect.
Exterior image of Sioux City location
Exterior image of QuicCare Mormon Trek location
Exterior image of Washington location on polk street
Exterior image of West Burlington location
A single caption field can add additional context to the set of media files.

 

 

Testimonials

A testimonial can be one, or many, quotes. The quotes can include an image, or a link, if needed.

The testimonial includes a visual " mark, so is best used for an actual quote with attribution.

"I really like this pull quote. It looks great, and is very attractive!"
Callahan Schlueter
John Smith
Director of operations
"While my pull quote does not include a link or an image, I still think it looks great!"
Jane Smith
Director of Business