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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Courses are 100% asynchronous
MSU costs less than the national average
Pay in-state tuition no matter where you are in the U.S.
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.
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:
This standalone block may be centered or left-aligned.
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.
This component allows you to predominately highlight multiple values such as costs,
percentages or dates. Within a full-width layout, four highlights may be present.
Within the interior page layout, three maximum is suggested. The CTA link may or may
not be present depending on your needs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Neque ornare aenean euismod elementum nisi quis
eleifend quam adipiscing.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Lorem ipsum
100
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Lorem ipsum
1000
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
This component allows you to group related items, or outline steps. It is recommended
that you limit your touts to a maximum of four. The tout’s heading may serve as a
link to additional information. The CTA link may or may not be present depending on
your needs. Also inclusion of images is not mandatory.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
You may choose to use touts, in a series, without the CTA. This can be achieved by
using a grid layout and inserting the individual tout elements (web components) within
the table cell(s). It is recommended you use up to three within an interior page template
(left navigation plus content) and no more than four within a full page template.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
This component allows you to include, on your page, a CTA grouped with related items
in the form of touts. The CTA may appear on the left or right side depending on your
needs. The CTA link may or may not be present. Inclusion of images is not mandatory.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
This component allows you to highlight your featured content and supporting featured
image within a 50/50 grid column. You have the option to present the image within
the left or right column.
This component may also have a shaded background. Add the component to the page within
a layout grid (one column) and select shaded background as a layout option.
This element is also available on a maroon background that extends the width of a
full-width template. This variation is for internal use only.
This component allows you to highlight your featured content and supporting featured
video within a 50/50 column. Your video must be sourced from YouTube.
This component may also have a shaded background. Add the component to the page within
a layout grid (one column) and select shaded background as a layout option.
This element is also available on a maroon background that extends the width of a
full-width template. This variation is for internal use only.
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.
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).
To present a list of items with bullets in no particular order, use the Modern Campus
CMS toolbar to create an unordered list. Nested unordered lists are presented as follows:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
To present a list of items in a particular order, use the Modern Campus CMS toolbar
to create an ordered list. Nested ordered lists are presented as follows:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
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).
