Your internet browser isn't supported.

For security reasons, we no longer support Internet Explorer. Please upgrade to an alternate browser to see all functionality and content on the website.

Home  >  Design Guide  >  Story Card Variations

STORY CARD VARIATIONS

The Story Card component is a container for card types such as Feature and Experience cards. Feature Cards offer two styles, card and tile, and can be displayed in a grid (2, 3, or 4 columns) or as a carousel when using four cards.

Authors can manually add optional content to each card, including a top image, title (H6), eyebrow text (subtitle), description (no formatting), and a link with a link title.

Carousel displays the first four cards. There is no character count limit here, but adjacent cards will stretch to remain consistent with the card with the longest text. We recommend no more than 280 characters. 

Image sizes should be consistent across cards in the group. Popular sizes are shown below, and how each responds to styling choices.

Cards will adjust colors based on the section background color used. Title fonts will change per sub-brand.
 

Select from the following Story Card variations:

FEATURE CARD: CARD STYLE

4 Column, Carousel enabled

(Base background)

Optional Title

An optional description can be added here

Optional "See more" label

(Base Alternative background)

(Muted background)

(Muted Alternative background)

(Contrasted background)

(Contrasted Alternative background)

(Colored background. Will change per sub-brand.)

(Colored Alternative background. Will change per sub-brand.)

(Colored Gradient backgrounds should not be used with card components.)

Feature Card: Card Style - Carousel Disabled/Grid Style

(4 Column)

Optional Title

An optional description can be added here

Optional "See more" label
alt text

Subtitle

1920x1080px

Recommend less than 150 characters. No formatting options available in this description text area.

alt text

Subtitle

600x450px

Typical What's New Card. Character count limit for What's New Card is 280, but less is more. 🙃

alt text

600x600px

Description

alt text

524x600px

Description

alt text

Subtitle

2400x1350px

Description

alt text

Subtitle

524x295px

Description

alt text

Subtitle

524x295px

Description

alt text

Subtitle

524x295px

Description

(3 Column)

alt text

Subtitle

1920x1080px

Recommend less than 150 characters. No formatting options available in this description text area.

alt text

Subtitle

600x450px

Description

alt text

600x600px

Description

alt text

524x600px

Description

alt text

Subtitle

2400x1350px

Description

alt text

Subtitle

524x295px

Description

(2 Column, Horizontal)

alt text

Subtitle

1920x1080px

Recommend less than 150 characters. No formatting options available in this description text area.

alt text

Subtitle

600x450px

Description

alt text

600x600px

Description

alt text

524x600px

Description

alt text

Subtitle

2400x1350px

Description

alt text

Subtitle

524x295px

Description

(2 Column, Vertical)

alt text

Subtitle

1920x1080px

Recommend less than 150 characters. No formatting options available in this description text area.

alt text

Subtitle

600x450px

Description

alt text

600x600px

Description

alt text

524x600px

Description

alt text

Subtitle

2400x1350px

Description

alt text

Subtitle

524x295px

Description

(1 Column, Horizontal)

alt text

Subtitle

1920x1080px

Recommend less than 150 characters. No formatting options available in this description text area.

alt text

Subtitle

600x450px

Description

alt text

600x600px

Description

alt text

524x600px

Description

alt text

Subtitle

2400x1350px

Description

alt text

Subtitle

524x295px

Description

FEATURE CARD: TILE STYLE

4 Column, Carousel enabled

(Base background)

Optional Title

An optional description can be added here

Optional "See more" label

(These cards remain white at the bottom, no matter the section background color selected. Example here, on the Contrasted background.)

Feature Card: Tile Style - Carousel Disabled/Grid Style

(4 Columns)

alt text

Subtitle

1920x1080px

Description

alt text

Subtitle

600x450px

Description

alt text

600x600px

Description

alt text

524x600px

Description

alt text

2400x1350px

alt text

Subtitle

524x295px

Description

alt text

Subtitle

720x405px

Description

alt text

Subtitle

720x405px

Description

(3 column)

alt text

Subtitle

1920x1080px

Description

alt text

Subtitle

600x450px

Description

alt text

600x600px

Description

alt text

524x600px

Description

alt text

2400x1350px

alt text

Subtitle

524x295px

Description

alt text

Subtitle

720x405px

Description

(2 Columns, Horizontal)

alt text

Subtitle

1920x1080px

Description

alt text

Subtitle

600x450px

Description

alt text

600x600px

Description

alt text

524x600px

Description

alt text

2400x1350px

alt text

Subtitle

524x295px

Description

alt text

Subtitle

720x405px

Description

(2 Columns, Vertical)

alt text

Subtitle

1920x1080px

Description

alt text

Subtitle

600x450px

Description

alt text

600x600px

Description

alt text

524x600px

Description

alt text

2400x1350px

alt text

Subtitle

524x295px

Description

alt text

Subtitle

720x405px

Description

(1 Column, Horizontal)

alt text

Subtitle

1920x1080px

Description

alt text

Subtitle

600x450px

Description

alt text

600x600px

Description

alt text

524x600px

Description

alt text

2400x1350px

alt text

Subtitle

524x295px

Description

alt text

Subtitle

720x405px

Description

(1 Column, Horizontal)

alt text

Subtitle

1920x1080px

Description

alt text

2400x1350px

EXPERIENCE CARD

4 Column, Carousel enabled

(Base background)

(Base Alternative background)

(Muted background)

(Muted Alternative background)

(Contrasted background)

(Contrasted Alternative background)

(Colored background. Will change per sub-brand.)

(Colored Alternative background. Will change per sub-brand.)

Experience Card: Carousel Disabled/Grid Style

(4 Columns)

1920x1080px

Optional Description

600x450px

Description

600x600px

This guide outlines the site’s components, layouts, and design standards to support consistent, accessible content across all brands.

524x600px

Ideal for offices, classrooms, coves, corridors, and retail environments

2400x1350px

This guide outlines the site’s components, layouts, and design standards to support consistent, accessible content across all brands.

524x295px

Description

720x405px

This guide outlines the site’s components, layouts, and design standards to support consistent, accessible content across all brands.

(3 Columns)

1920x1080px

Optional Description

600x450px

Description

600x600px

This guide outlines the site’s components, layouts, and design standards to support consistent, accessible content across all brands.

524x600px

Ideal for offices, classrooms, coves, corridors, and retail environments

2400x1350px

This guide outlines the site’s components, layouts, and design standards to support consistent, accessible content across all brands.

524x295px

Description

(2 Columns, Horizontal)

1920x1080px

Optional Description

600x450px

Description

600x600px

This guide outlines the site’s components, layouts, and design standards to support consistent, accessible content across all brands.

524x600px

Ideal for offices, classrooms, coves, corridors, and retail environments

2400x1350px

This guide outlines the site’s components, layouts, and design standards to support consistent, accessible content across all brands.

524x295px

Description

(2 Columns, Vertical)

1920x1080px

Optional Description

600x450px

Description

600x600px

This guide outlines the site’s components, layouts, and design standards to support consistent, accessible content across all brands.

524x600px

Ideal for offices, classrooms, coves, corridors, and retail environments

2400x1350px

This guide outlines the site’s components, layouts, and design standards to support consistent, accessible content across all brands.

524x295px

Description

(1 Column, Horizontal)

1920x1080px

Optional Description

2400x1350px

This guide outlines the site’s components, layouts, and design standards to support consistent, accessible content across all brands.

(1 Column, Vertical)

1920x1080px

Optional Description

2400x1350px

This guide outlines the site’s components, layouts, and design standards to support consistent, accessible content across all brands.