BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Content Banner

Overview

Content Banner: click here to preview all variations of this component.

Story Canvas: click here to preview all variations of this component.

1 Column

To highlight customer stories, the Metlife company and other large CTA needs with a single focal point.

Feature Overview

  • • Blue gradient background
  • • Optional CTA button

Desktop, tablet and mobile views shown for illustrative purposes:

button allignment
button allignment
button allignment

2 Column

To highlight customer stories, the Metlife company and other large CTA needs with a single focal point.

Feature Overview

  • • Blue, white or grey background
  • • Image or video
  • • Mirror flip option
  • • Optional CTA button
  • • Media (50%) Text (50%) vs. Media (60%) Text (40%) - Do not stack the component with diffrent media width.

Desktop, tablet and mobile views shown for illustrative purposes:

button allignment button allignment
button allignment
button allignment
button allignment

2 Column Story Canvas

A flexible component for highlighting concepts that are deserving of their own row and lend themselves to association with photography, video, or illustrations. May be useful in succession to explain a process.

Feature Overview

  • • White or grey background
  • • Image or video
  • • Mirror flip option
  • • Optional CTA button
  • • Media (50%) Text (50%) vs. Media (60%) Text (40%) - Do not stack the component with diffrent media width.

Desktop, tablet and mobile views shown for illustrative purposes:

Variation with a Video:

button allignment

Variation with a Quote:

button allignment

Variation with a Video:

button allignment

Variation with a Quote:

button allignment

Variation with a Video:

button allignment

Variation with a Quote:

button allignment

Download