Home > Design Guide > Story Card Variations
Your internet browser isn't supported.
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 Subtitle
1920x1080px
Optional description. Recommend less than 150 characters. No formatting options available in this description text area.
Subtitle
600x450px
Typical What's New Card. Character count limit for What's New Card is 280, but less is more. 🙃
600x600px
Description
Subtitle
524x295px
Description
(Base Alternative background)
Subtitle
1920x1080px
Recommend less than 150 characters. No formatting options available in this description text area.
Subtitle
600x450px
Typical What's New Card. Character count limit for What's New Card is 280, but less is more. 🙃
600x600px
Description
Subtitle
524x295px
Description
(Muted background)
Subtitle
1920x1080px
Recommend less than 150 characters. No formatting options available in this description text area.
Subtitle
600x450px
Typical What's New Card. Character count limit for What's New Card is 280, but less is more. 🙃
600x600px
Description
Subtitle
524x295px
Description
(Muted Alternative background)
Subtitle
1920x1080px
Recommend less than 150 characters. No formatting options available in this description text area.
Subtitle
600x450px
Typical What's New Card. Character count limit for What's New Card is 280, but less is more. 🙃
600x600px
Description
Subtitle
524x295px
Description
(Contrasted background)
Subtitle
1920x1080px
Recommend less than 150 characters. No formatting options available in this description text area.
Subtitle
600x450px
Typical What's New Card. Character count limit for What's New Card is 280, but less is more. 🙃
600x600px
Description
Subtitle
524x295px
Description
(Contrasted Alternative background)
Subtitle
1920x1080px
Recommend less than 150 characters. No formatting options available in this description text area.
Subtitle
600x450px
Typical What's New Card. Character count limit for What's New Card is 280, but less is more. 🙃
600x600px
Description
Subtitle
524x295px
Description
(Colored background. Will change per sub-brand.)
Subtitle
1920x1080px
Recommend less than 150 characters. No formatting options available in this description text area.
Subtitle
600x450px
Typical What's New Card. Character count limit for What's New Card is 280, but less is more. 🙃
600x600px
Description
Subtitle
524x295px
Description
(Colored Alternative background. Will change per sub-brand.)
Subtitle
1920x1080px
Recommend less than 150 characters. No formatting options available in this description text area.
Subtitle
600x450px
Typical What's New Card. Character count limit for What's New Card is 280, but less is more. 🙃
600x600px
Description
Subtitle
524x295px
Description
(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
Subtitle
1920x1080px
Recommend less than 150 characters. No formatting options available in this description text area.
Subtitle
600x450px
Typical What's New Card. Character count limit for What's New Card is 280, but less is more. 🙃
600x600px
Description
Subtitle
524x295px
Description
Subtitle
524x295px
Description
Subtitle
524x295px
Description
(3 Column)
Subtitle
1920x1080px
Recommend less than 150 characters. No formatting options available in this description text area.
Subtitle
600x450px
Description
600x600px
Description
Subtitle
524x295px
Description
(2 Column, Horizontal)
Subtitle
1920x1080px
Recommend less than 150 characters. No formatting options available in this description text area.
Subtitle
600x450px
Description
600x600px
Description
Subtitle
524x295px
Description
(2 Column, Vertical)
Subtitle
1920x1080px
Recommend less than 150 characters. No formatting options available in this description text area.
Subtitle
600x450px
Description
600x600px
Description
Subtitle
524x295px
Description
(1 Column, Horizontal)
Subtitle
1920x1080px
Recommend less than 150 characters. No formatting options available in this description text area.
Subtitle
600x450px
Description
600x600px
Description
Subtitle
524x295px
Description
FEATURE CARD: TILE STYLE
4 Column, Carousel enabled
(Base background)
Optional Title
An optional description can be added here
Subtitle
1920x1080px
Description
Subtitle
600x450px
Description
600x600px
Description
Subtitle
524x295px
Description
Subtitle
720x405px
Description
(These cards remain white at the bottom, no matter the section background color selected. Example here, on the Contrasted background.)
Subtitle
1920x1080px
Description
Subtitle
600x450px
Description
600x600px
Description
Subtitle
524x295px
Description
Subtitle
720x405px
Description
Feature Card: Tile Style - Carousel Disabled/Grid Style
(4 Columns)
Subtitle
1920x1080px
Description
Subtitle
600x450px
Description
600x600px
Description
Subtitle
524x295px
Description
Subtitle
720x405px
Description
Subtitle
720x405px
Description
(3 column)
Subtitle
1920x1080px
Description
Subtitle
600x450px
Description
600x600px
Description
Subtitle
524x295px
Description
Subtitle
720x405px
Description
(2 Columns, Horizontal)
Subtitle
1920x1080px
Description
Subtitle
600x450px
Description
600x600px
Description
Subtitle
524x295px
Description
Subtitle
720x405px
Description
(2 Columns, Vertical)
Subtitle
1920x1080px
Description
Subtitle
600x450px
Description
600x600px
Description
Subtitle
524x295px
Description
Subtitle
720x405px
Description
(1 Column, Horizontal)
Subtitle
1920x1080px
Description
Subtitle
600x450px
Description
600x600px
Description
Subtitle
524x295px
Description
Subtitle
720x405px
Description
(1 Column, Horizontal)
Subtitle
1920x1080px
Description
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)
(3 Columns)
(2 Columns, Horizontal)
(2 Columns, Vertical)