Custom Component: Hero

The custom Hero component is an edge to edge hero featuring a call to action area to place buttons, and is intended to be placed as an introduction to new sections of content within the website.

Basic With Dynamic Media

Tortor condimentum lacinia quis vel. Suspendisse faucibus interdum posuere lorem. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla.

Primary CTA

Secondary CTA

Basic Without Dynamic Media including Background Color

Tortor condimentum lacinia quis vel. Suspendisse faucibus interdum posuere lorem. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla.

Primary CTA

Secondary CTA

Basic Without Dynamic Media including Background Color with no Caption

Tortor condimentum lacinia quis vel. Suspendisse faucibus interdum posuere lorem. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla.

Primary CTA

Secondary CTA

Basic Without Dynamic Media including Background Color

Tortor condimentum lacinia quis vel. Suspendisse faucibus interdum posuere lorem. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla.

Primary CTA

Secondary CTA

Basic Without Dynamic Media including Background Color

Tortor condimentum lacinia quis vel. Suspendisse faucibus interdum posuere lorem. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla.

Primary CTA

Secondary CTA

Basic Without Dynamic Media including Background Color

Tortor condimentum lacinia quis vel. Suspendisse faucibus interdum posuere lorem. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla.

Primary CTA

Secondary CTA

Basic Without Dynamic Media including Background Color

Tortor condimentum lacinia quis vel. Suspendisse faucibus interdum posuere lorem. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla.

Primary CTA

Secondary CTA

Basic Without Dynamic Media including Background Color

Tortor condimentum lacinia quis vel. Suspendisse faucibus interdum posuere lorem. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla.

Primary CTA

Secondary CTA

Basic Without Dynamic Media including Background Color

Tortor condimentum lacinia quis vel. Suspendisse faucibus interdum posuere lorem. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla.

Primary CTA

Secondary CTA

Basic Without Dynamic Media including Background Color

Tortor condimentum lacinia quis vel. Suspendisse faucibus interdum posuere lorem. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla.

Primary CTA

Secondary CTA

Basic Without Dynamic Media including Background Image

Tortor condimentum lacinia quis vel. Suspendisse faucibus interdum posuere lorem. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla.

Primary CTA

Secondary CTA

Abstract shades of blue blended together for a decorative effect

Basic With Dynamic Media, inverted orientation

Tortor condimentum lacinia quis vel. Suspendisse faucibus interdum posuere lorem. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla.

Primary CTA

Row of cards to illustrate "popout" alignments

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This is often times referred to as a "Card", "Highlight", or "Teaser" in design systems.

Futuristic spartan soldiers ready for action

Authors

The Authors component is intended to be used for editorial style content. This component is baked into the Editorial Hero, but also can be leveraged as a stand alone component if needed.

Character Popout, With Dynamic Media and background image

Tortor condimentum lacinia quis vel. Suspendisse faucibus interdum posuere lorem. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla.

Custom Component: Hero

Basic With Dynamic Media

Basic Without Dynamic Media including Background Color

Basic Without Dynamic Media including Background Color with no Caption

Basic Without Dynamic Media including Background Color

Basic Without Dynamic Media including Background Color

Basic Without Dynamic Media including Background Color

Basic Without Dynamic Media including Background Color

Basic Without Dynamic Media including Background Color

Basic Without Dynamic Media including Background Color

Basic Without Dynamic Media including Background Color

Basic Without Dynamic Media including Background Image

Basic With Dynamic Media, inverted orientation

Row of cards to illustrate "popout" alignments

Teaser Components

Authors

Character Popout, With Dynamic Media and background image

Character Popout, With Dynamic Media and background image + color

Character Popout, With Dynamic Media and background image + color

Character Popout, With Dynamic Media and background image + color

Character Popout, With Dynamic Media and background image + color

Character Popout, With Dynamic Media and background image + color

Character Popout, With Dynamic Media and background image + color

Character Popout, With Dynamic Media and background image + color

Character Popout, With Dynamic Media and background image + color

Character Popout, With Dynamic Media and background image + color

Row of cards to illustrate "popout" alignments

Teaser Components

Authors

Character Popout, With Dynamic Media, Inverted orientation

Row of cards to illustrate "popout" alignments

Teaser Components

Authors

Character Popout, Without Dynamic Media, with background color

Character Popout, Without Dynamic Media, with background color

Character Popout, Without Dynamic Media, with background color

Character Popout, Without Dynamic Media, with background color

Character Popout, Without Dynamic Media, with background color

Character Popout, Without Dynamic Media, with background color

Character Popout, Without Dynamic Media, with background color

Character Popout, Without Dynamic Media, with background color

Character Popout, Without Dynamic Media, with background color

Character Popout, Without Dynamic Media, with background color

Row of cards to illustrate "popout" alignments

Teaser Components

Authors

Character Popout, Without Dynamic Media, With background Image

Character Feature, Without Dynamic Media, inverted, without background color

Character Feature, With Dynamic Media and background image

Character Feature, With Dynamic Media and background image

Character Feature, With Dynamic Media and background image

Character Feature, With Dynamic Media and background image

Character Feature, With Dynamic Media and background image

Character Feature, With Dynamic Media and background image

Character Feature, With Dynamic Media and background image

Character Feature, With Dynamic Media and background image

Character Feature, With Dynamic Media and background image

Character Feature, With Dynamic Media and background image

Centered Content Alignment with no Images

Basic With Dynamic Media, Centered

Character Feature, With Dynamic Media and background image, Inverted and Centered

Character Popout, Without Dynamic Media, With background Image, Centered

Basic with background image, centered