A carousel featuring at least four, and ideally no more than 12, related content items that can be augmented with optional features that make this component versatile for re-use.
Each carousel item includes a supporting image that can be generated from the destination page’s hero image. An optional background image may be used with this component.
Features 4-12 related content items, which can be augmented with optional features, including a background image and a centered copy block above the main headline used to express a value proposition. Works well with innovation stories, business pillars, and other related items. A link to view all related content appears beneath the carousel items.
When adding more than 4 items, the component becomes a carousel that allows the site visitor to click or tap through a set of 4 items at a time.
Value Proposition Headline (optional): 150-character count, 50 characters per row, 3 rows max to accommodate translations.
Carousel Headline: 25-character count, 1 Row Max
Article/Item Headline: 44-character count, 2 Rows Max
Article/Item Body Copy: 100-character count, max 4 rows, max 3 rows if headline is 2 rows
Article/Item CTA: 20-character count, max one row
Carousel CTA: 25-character count
Asset Size: 2400px 600px
Aspect Ratio: 4:1
Recommended File Weight: <40kb
Width: 100% viewport width
Height: 25% viewport width
Desktop: 4:1
Tablet: 4:1
Mobile: 4:3
Asset Size: 480px x 360px
Aspect Ratio: 4:3
Recommended File Weight: <20kb
Width: 376px
Height: 272px
Desktop: 4:3
Tablet: 4:3
Mobile: 4:3