An accordion can contain text, images, many snippets, and most components.
Carousel
A carousel is a snippet for displaying photos in a slide-show format. A carousel should
never be used for flyers or graphics.
Columns Snippet
Column 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ex enim, finibus vel orci et, tristique molestie magna.
Aliquam vel ligula ac nunc varius dapibus rhoncus sed mi.
Sed nec lorem id erat convallis hendrerit id in diam.
Mauris tempus efficitur nibh in dignissim. Vestibulum commodo vestibulum odio.
Sed sed vehicula magna.
Vivamus vel commodo mi.
Aenean a nunc odio.
Sed pharetra lectus in ante imperdiet, ut laoreet enim finibus.
Donec vel felis rutrum, volutpat felis ut, accumsan ex.
Column 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ex enim, finibus vel
orci et, tristique molestie magna. Aliquam vel ligula ac nunc varius dapibus rhoncus
sed mi. Sed nec lorem id erat convallis hendrerit id in diam. Mauris tempus efficitur
nibh in dignissim. Vestibulum commodo vestibulum odio. Sed sed vehicula magna. Vivamus
vel commodo mi. Aenean a nunc odio. Sed pharetra lectus in ante imperdiet, ut laoreet
enim finibus. Donec vel felis rutrum, volutpat felis ut, accumsan ex.
Pellentesque vel tristique sapien. Nulla facilisi. Nam euismod ligula non lacus mollis
bibendum. Curabitur a auctor dui. Vestibulum lorem eros, tempor eu nunc in, tincidunt
pharetra metus.
Table Snippet
Tables are for tabular data only. They should not be used for layout of information.
Bulleted lists are generally the best way to convey complex information. The columns
snippet is the preferred way to creat a multi-column layout.
Heading 1
1
Table Text
Table Text
Heading 2
2
Table Text
Table Text
Heading 3
3
Table Text
Table Text
Heading 4
4
Table Text
Table Text
Tabs Snippet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ex enim, finibus vel
orci et, tristique molestie magna. Aliquam vel ligula ac nunc varius dapibus rhoncus
sed mi. Sed nec lorem id erat convallis hendrerit id in diam. Mauris tempus efficitur
nibh in dignissim. Vestibulum commodo vestibulum odio. Sed sed vehicula magna. Vivamus
vel commodo mi. Aenean a nunc odio. Sed pharetra lectus in ante imperdiet, ut laoreet
enim finibus. Donec vel felis rutrum, volutpat felis ut, accumsan ex.
Pellentesque vel tristique sapien. Nulla facilisi. Nam euismod ligula non lacus mollis
bibendum. Curabitur a auctor dui. Vestibulum lorem eros, tempor eu nunc in, tincidunt
pharetra metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ex enim, finibus vel orci et, tristique molestie magna.
Aliquam vel ligula ac nunc varius dapibus rhoncus sed mi.
Sed nec lorem id erat convallis hendrerit id in diam.
Mauris tempus efficitur nibh in dignissim. Vestibulum commodo vestibulum odio.
Sed sed vehicula magna.
Vivamus vel commodo mi.
Aenean a nunc odio.
Sed pharetra lectus in ante imperdiet, ut laoreet enim finibus.
Donec vel felis rutrum, volutpat felis ut, accumsan ex.
The contact component is the standardized way to display contact information across
the site. It works well inside of a columns snippet if you need to provide contact
information for multiple people.
A CTA Banner is a way to draw the eye to the most important action you want a student
to take when they visit your page. Use at most 1 CTA Banner Per Page.
An image announcement is an announcement paired with an image. Always use a photo,
and pair it with the relevant text. It will always contain a call-to-action button
too.
