Communicate With Elements and Patterns

Content Structure

AccordionTabbed Content BlockCall to ActionContact DetailsFeatured NewsHero blockLists Related ContentTouts

 

Accordion

Available as a snippet. An accordion snippet works well for organizing content, like FAQs (frequently asked questions), into a stack of vertical tabs that are expandable. 

Have a program available 100% online? Use the accordion online program snippet to feature it on pages focused primarily on your seated degree. 

build an accordion in modern campus CMS

 

Tabbed content block

Available as a snippet. Tabbed content divides page content into meaningful subsections. It is useful for pages where a lot of related content needs to be presented in sections. The related content is accessible to the user without them leaving the page.

build a tabbed content block in modern campus CMS

Sample tab 1

Tab 1 Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. 

Sample tab 2

Tab 2 Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam.

Sample tab 3

Tab 3 Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam.

Call to action (CTA)

A call to action prompts a specific action from the user. Call to actions are typically clickable buttons that, when clicked, perform an action or may lead to another webpage that requests an action.

The call to action component is part of the hero block snippet, but it may also be used alone as a component or paired with other elements. It may be left aligned or centered. 

The centered version is often used as a dividing element between sections within a marketing landing page. It may or may not have the button.

Review your options below:

Contact details

This component is within a two-column format. In the left column is address, telephone, email, etc. In the right column is the campus map. 

build contact details in modern campus CMS

 

Missouri State University

Contact Us

Location
901 South National Avenue Springfield, MO
Telephone
417-836-5000
Relay Missouri
711 or 800-735-2966
Email
Name@MissouriState.edu

Featured news

This component is used exclusively on the Missouri State homepage and other top level home pages and highlights multiple news features. WSD use only.

 

Hero block

A hero block works well for top-level pages. It is reserved for website home pages and marketing landing pages. This component provides a form where you may add a full-width image or video at the top of your webpage. You may also choose to add three call-to-action links under it.

build a hero block in modern campus CMS

Lists

Review these best practices for writing lists:

  • Introduction: Introduce lists with a short phrase or sentence, followed by a colon.
  • Capitalization: Capitalize the first word in each bullet.
  • Punctuation: Use periods at the end of each line, whether or not it’s a full sentence.
  • Grammar: Use parallel construction for each item in a list:
    • Start with the same part of speech.
    • Use the same voice (active or passive).
    • Use the same verb tense.
    • Use the same sentence type (statement, question,or exclamation).

Related content

There are three related content sections available within Modern Campus CMS offered as components. The related content section is typically placed at the bottom of the page. It is used primarily for grouping content that is related to the main content without competing for the optimal placement on the page.

build related content in modern campus CMS

Touts

This component allows you to highlight a particular topic with clear, concise, short sentences to quickly convey your point. It is available in vertical or horizontal format. An image is optional and is best displayed at 760x428px. 

A tout can be used as a standalone element (web component) but is also seen as part of the CTA pattern.

The vertical option may be used within a two or three column grid (using an interior page template) or four column grid (using a full-width page template).

A tout may also be part of the related content with touts pattern.