Hero Banners
Hero banners are large, bold images that convey website/webpage topics at a glance. They are usually the first thing a visitor sees when they load the page.
Hero Banner Options
- Image size is 1920 pixels wide x 600 pixels high
- Text is optional and can be positioned left, right or center
- Call to action buttons are optional and can be positioned left, right, or center
Header/Primary Navigation
Primary navigation links appear in the web page header. The same logo and links must repeat across all microsite pages. The logo also serves as a “Home” button. Limit the number of primary navigation links to make it easier for visitors to find their way. All draft content should be organized under these primary topics.
The header can also contain:
- Social media links
- Search feature
- A call-to-action (CTA) button
Body Content
Body content elements help organize and display your content in a more user-friendly way.
Separators
Separators, or horizontal rule lines, help define a content break on a page. This page uses separators to divide the different types of content. Separators:
- Give space between content elements
- Help break-up the page into scan-able chunks
- Can be plain or decorated with icons
Accordions
When a page needs to convey a lot of content, accordions can be used to hide and reveal content sections as the user sees fit. Users click to expand topic of interest and to hide it again. This reduces the need to scroll and makes the page easier to scan.
Accordions can help to condense text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices ex eu metus sagittis, nec posuere est ultricies. Suspendisse dolor tortor, imperdiet in viverra sit amet, suscipit maximus mi. Ut id vestibulum turpis. Donec pellentesque, libero ac placerat venenatis, est sem semper orci, eget sollicitudin purus nulla a tellus. Proin facilisis quam ac efficitur lacinia. Suspendisse potenti. Donec imperdiet facilisis dui, rhoncus vehicula ipsum. Proin sit amet dapibus urna. Integer tempor velit ante. Integer massa orci, feugiat nec metus ut, mollis posuere quam. Cras quis arcu sapien. Aenean placerat massa et massa fringilla dictum.
Maecenas quam leo, iaculis id dolor eget, tristique laoreet lectus. Mauris quis sagittis elit. Duis non semper velit. Cras elementum dapibus feugiat. Duis ut posuere nisl, sed euismod urna. Nunc venenatis dui id felis finibus, sed euismod erat elementum. Sed fermentum, quam semper pellentesque tempus, tortor mi eleifend eros, nec bibendum nisi urna eget ipsum. Vivamus magna leo, dapibus eget tellus quis, imperdiet eleifend lorem. Vivamus auctor viverra libero non accumsan. Integer et tincidunt nunc. Curabitur est ante, tincidunt id tortor eget, aliquet volutpat justo. Vestibulum auctor nulla ut odio porttitor, a ultrices massa aliquam. Aenean nec blandit turpis. Nam imperdiet, augue ac imperdiet ultricies, libero diam maximus leo, sit amet eleifend nisl mauris vel ex. Nullam eleifend, mauris id accumsan luctus, tellus lorem ornare tortor, nec mattis mi nunc non ex.
Nulla hendrerit augue non scelerisque placerat. Aliquam in metus sagittis, finibus est accumsan, luctus sapien. Sed lobortis odio a justo elementum malesuada. Aliquam aliquet sed leo id rutrum. Nam ut ultricies metus. Integer dapibus nulla ut dui finibus, non facilisis orci tristique. Proin non tortor sed augue condimentum rhoncus. Phasellus quis risus et orci feugiat bibendum nec vitae dolor.
List Heading
- Mauris blandit magna ac lectus fringilla mattis.
- Donec rhoncus purus sit amet nisi tristique dictum.
- Nullam in tortor nec ante vehicula ullamcorper.
- Fusce porta justo vitae erat posuere rutrum eget in dui.
- Donec tempus risus finibus lorem sodales, vel fringilla justo porta.
- Linked element here.
Content Tabs
Content tabs are an alternative to accordions. They provide efficient access to large sections of related content on the same page.
The first tab should contain the first message that you want your visitors to see. Subsequent tabs should expand or reinforce the message on the first the tab.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- In non dolor sed leo aliquam finibus sit amet vitae libero.
- In tristique lorem finibus malesuada mattis.
- Aliquam vitae lobortis velit.
- Donec quis aliquam mauris.
- Phasellus mattis rutrum dictum.
Cras tempus aliquam quam non molestie. Morbi dui quam, elementum quis velit vitae, euismod imperdiet tortor. Nulla urna dolor, consequat id laoreet eget, imperdiet et felis. Fusce id diam at magna finibus pretium. Cras eget vulputate felis, eget dignissim erat. Morbi dictum nisi eget turpis rutrum accumsan a quis lectus. Pellentesque et nunc quis arcu dictum vehicula pulvinar vitae dui. Phasellus varius est a ligula malesuada sagittis. Nullam et aliquet metus. Nunc feugiat orci sem, at aliquet magna luctus congue. Nunc rhoncus leo non risus tincidunt sodales. Praesent porta mollis dui, non varius dui sagittis facilisis.
Tabs can be formatted like standard webpages including text and visual elements.
List Heading
- Mauris blandit magna ac lectus fringilla mattis.
- Donec rhoncus purus sit amet nisi tristique dictum.
- Nullam in tortor nec ante vehicula ullamcorper.
- Fusce porta justo vitae erat posuere rutrum eget in dui.
- Donec tempus risus finibus lorem sodales, vel fringilla justo porta.
- Linked element here.
