Demo - Other Components

Announcement Heading

Announcement component collapsed above content

Vestibulum facilisis purus nec pulvinar

The announcement component can be fixed under the page hero or placed within the body of the page. It can be expanded by default or closed. It can be set to display only once per user so that site visitors do not have to see the same alert multiple times.

Announcements can be dark blue, light blue or teal. Images, links and subheadings are optional.

Learn more

Nulla neque dolor sagittis eget in enim justo rhoncus ut

Nulla consequat massa quis enim. Donec id justo. Sed hendrerit. Sed in libero ut nibh placerat accumsan. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo.

Announcement Heading

Announcement component inside the page

See details on the announcement in the example above.

Sed cursus turpis vitae tortor. Phasellus blandit leo ut odio. Etiam rhoncus. In turpis. Etiam ut purus mattis mauris sodales aliquam. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Vivamus in erat ut urna cursus vestibulum. Phasellus consectetuer vestibulum elit.

Vestibulum volutpat pretium libero. Nunc sed turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Vivamus quis mi.

Find out more

Announcement heading
- no character limit
Subhead
- no character limit
Image
- jpg or png
- image displays as its actual ratio, no cropping
Description
- rich text
- no limit
Link
- any number
- page links only; currently no video or files

The Disclaimer component can be placed in any one-column section.
It is typically placed at the bottom of a page but occasionally Compliance requires it to be placed somewhere in the page, nearer to the content it relates to.
Disclaimers are normally placed on a gray background, typically gray 700 or gray 100.
When collapsed, the first line of the Disclaimer content will be visible and a "read more" button is displayed below it. When clicked, the "read more" button changes to "read less" and the content of the disclaimer is displayed.
They can be set to display as expanded. In that case, the content of the disclaimer will be displayed when the page is loaded. A "read less" button allows the user to collapse the content of the disclaimer.
It is common to make "IMPORTANT INFORMATION" the first line of a disclaimer rather than just letting the first line display but that isn't a functional or legal requirement.

This is a Disclaimer. Exercitation suscipit consectetur. Adipiscing adipiscing adipiscing eros eu dignissim. Pariatur elit eu nunc quis nisi ut consequat suscipit velit ultricies nunc nisi ex. Ullamco amet, quis laboris velit sed in dignissim, velaliquam voluptate nunc sit consequat. Tempuribud dignissim consectetur sed ut harmud exercitation esse voluptate in exercitation tempor sint ea exercitation tempor, harmud laboris quis ea quis magna laboris. In nisi sit tempor duis sint duis ullamco.

Ultricies dignissim, laboris doming in pulvinar doming esse. Exercitation aliquip nulla providerent ut ullamco dolore pulvinar elit magna, harmud nunc consectetur tempor velaliquam, tempor tempuribud dolore sed velaliquam dolore ex suscipit esse tempuribud laboris. Suscipit tempuribud consequat nisi urna quis nunc sed dolor dolor.

This is a disclaimer. Nulla dolore tempor quis eu ut. Duis providerent esse aliquip eu tempor quis commodo sint harmud. Consectetur sit sint tempor sint sunt nunc doming nunc. Urna velit nunc consequat duis dolor ultricies urna doming dolor, nunc voluptate eros eu. Nulla harmud esse voluptate elit eros duis fugiat ultricies dolor voluptate exercitation urna exercitation nunc in. Fugiat sunt pulvinar ea ut eros eros suscipit velaliquam magna sint ex. Commodo duis sit tempuribud nisi tempor quis, velit voluptate sint commodo amet.

Harmud nulla pulvinar, elit aliquip eros. Sed tempuribud pariatur commodo fugiat ut laboris. Dolor amet doming amet doming quis consectetur quis voluptate eros. Doming quis elit, adipiscing ex ullamco nunc adipiscing pulvinar quis ullamco, urna eu sed ullamco ea ut nisi ut. Ullamco providerent providerent, consequat nisi fugiat voluptate harmud. Dignissim voluptate esse ullamco ultricies eu consectetur. Velit dignissim voluptate laboris providerent adipiscing quis dolor duis duis velit.

Nisi consequat pulvinar dignissim. Ut ex quis. Tempuribud aliquip tempor voluptate nunc commodo. Tempor nostrud eu ut. Quis sint sint eu fugiat sint ut pariatur esse. Nostrud quis nunc dignissim duis urna velaliquam, eros doming sit providerent. Tempuribud ex aliquip in aliquip, sed velaliquam sit esse ultricies ea pariatur consequat pulvinar consequat nostrud, in consequat dignissim quis sed dolor sint laboris laboris magna pariatur tempor ex pulvinar ullamco consectetur commodo commodo.

Nulla doming quis eu, aliquip ut urna ut eu. Eu nunc ut elit tempor quis tempor dolor dolore urna urna in, sunt harmud amet doming ut commodo commodo ut laboris. Ea tempuribud consectetur quis pariatur quis sed consequat eros commodo nostrud voluptate ultricies eros. Commodo velaliquam tempuribud. Magna doming sit sed nunc tempuribud sit esse urna voluptate urna commodo magna amet urna. In quis quis ullamco velit sint laboris eu nostrud, duis consectetur dolore elit suscipit sit dolore suscipit, eu nunc ultricies ullamco ullamco nunc ut aliquip. Consectetur elit doming ut sunt harmud nostrud ultricies ut in eros, ea elit nisi aliquip providerent esse sint eros, ex aliquip sed consectetur suscipit providerent ultricies sed amet harmud adipiscing dignissim.

Buttons on these "persons" can open a text bio in a modal window, a link to a different page, or a PDF. Buttons can also be left out when there is no bio. This component always displays in 4-column rows.