Hero - Dark Centered

This is the hero dark centered. Text is centered above the featured images. Like the Hero Standard, images will need to be the same size in order to animate and overlay each other correctly. An optimal size for this is 2560 × 1800.

Button Button

This is new

Hero Standard

Images in this layout will stack and must be the same dimension in order to animate and size properly together. An optimal size is 2560 × 1800.

Hero Standard Hero Standard

This is some sub-text

Sub Heading

Hero - Image

This is an image hero and has a full-width background image. The image will fill the entire header area and sometimes will trim the top and bottom or sides depending on the width of the browser and size of the content. 2048 × 1365 is a good image size but is flexible.

Button Button

Hero Phone

This is some text

iPhone X phone frame
Sub Header

Hero - Video Embed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in convallis lectus.

Button

Content - Text and Image

This is a subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit in est id elementum. Vestibulum commodo porta eros sit amet dictum. Cras iaculis mattis tellus sed feugiat. Nullam mauris quam, consectetur in suscipit faucibus, porta et sem. Cras blandit, dolor id congue blandit, quam leo efficitur lorem, sed condimentum sapien tortor id massa.

Button Button

Content - Text with grid and buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget lectus tempor, interdum ex eget, fermentum ligula. Suspendisse sit amet eros gravida, laoreet urna id, placerat purus.

Button

Content - Feature with Animated Images

These are large feature content areas that can be displayed with the image left or right aligned. You can contain the image within the main content size or allow the image to flow off the edge. You can stack multiple images and add animations to add a unique feel to each section.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum placerat quam, a volutpat leo hendrerit a. Donec tincidunt risus in justo elementum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum placerat quam, a volutpat leo hendrerit a. Donec tincidunt risus in justo elementum, et interdum risus tristique. Suspendisse in nisl lacinia, venenatis nisi non, dapibus ante. Nulla facilisi. Sed metus orci, blandit eu ornare id, fringilla a mi. Nunc mauris tellus, vulputate in nisl eget, molestie tincidunt nulla. Aliquam a ullamcorper tortor. Sed ornare ultrices sollicitudin. Nunc urna libero, gravida eget felis vel, consectetur tempus ligula. Quisque a justo ac nunc aliquet tincidunt. Vestibulum interdum elementum massa, nec consectetur arcu iaculis molestie. Suspendisse mollis magna massa, id elementum turpis hendrerit at. Etiam laoreet sit amet leo quis imperdiet. Mauris eget purus dui. Donec vitae aliquam nunc, in pretium turpis. Morbi consectetur, nulla in porta tincidunt, libero arcu tincidunt arcu, nec sollicitudin libero risus quis metus.

Button Button

Content - Call Out

This is a color bar callout that can be used to call attention to an important message.

Button Button

Content - 50/50 Split with image and text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id magna laoreet, facilisis ipsum sit amet, eleifend lacus. In fringilla tellus ornare turpis malesuada, in aliquam ipsum efficitur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id magna laoreet, facilisis ipsum sit amet, eleifend lacus. In fringilla tellus ornare turpis malesuada, in aliquam ipsum efficitur.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Proin id magna laoreet
  • facilisis ipsum sit amet, eleifend lacus.
  • In fringilla tellus ornare turpis malesuada, in aliquam ipsum efficitur.

Grid - Three column with small icons

This is great for calling out a list of features that would benefit from a brief description and icon.

Item

This is some text

Item

This is some text

Item

This is some text

Grid - Three column with large icons

Item

This is some text

Item

This is some text

Item

This is some text

Grid - Three column cards with image

This is a grid of cards with an image header with sub-title and description.

Card

This is some text

Card

This is some text

Card

This is some text

Slider - Logo

This is a slider of logos. You can add as many as you want. Sizing them the same is ideal for a smooth experience.