Components

Content Components

There is a range of components available to use for sustainability content. These component variants are designed with sustainability-inspired iconography and colors to create a distinct visual identity. This helps them stand out on the page as well as have a consistent styling so visitors can recognize no matter what page type they are on.

When building your staging document, make sure to clearly note you want to use the Sustainability Style Variant for that component.

Content Panel

Optional, All Pages

Layout=Single Image, CTA=On, Breakpoint=Desktop, Style=Sustainability

CTA – Hero

Optional, All Pages

Breakpoint=Desktop, Color Variant=Dark Teal, Width=Default

CTA - Simple

Optional, All Pages

Breakpoint=Desktop, Style Variant=Sustainability

Carousel - Resources

Optional

Platform=Desktop

Text Media

Optional, All Taxonomy & Microsite Pages

Text Media Component - updates Sustainability Example

Full-width Feature

Optional, All Taxonomy & Microsite Pages

Full-width Feature Component - Sustainability Example

Sustainability Highlight

Optional, All Taxonomy & Microsite Pages

Breakpoint=Desktop, Style=Default

Product Highlight

Optional, All Taxonomy & Microsite Pages

Breakpoint=Desktop, Column=Single, Container=Sustainability

CTA - Sub

Optional, All Taxonomy & Microsite Pages

Sub CTA Component - Sustainability Example

Benefits & Features

Optional, All Taxonomy & Microsite Pages
Sustainability variant can't be used for just one benefit within the default option.

Breakpoint=Desktop, Layout=2-up, Style=Sustainability

Technical Content Card

Optional, PDP Pages Only

Style=Sustainability

Sustainability News Component

Optional, Microsite Pages

Breakpoint=Desktop

Trigger Ad

Optional, Product Catalog Only

View Component

State=horizontal