Content Cards

Content cards can be used on pages like About Us, Materials, and the Style Edit. Content card can be used to educate customers with content or informing information.

Types of content cards

Each types of cards have different layouts and can be displayed in grid or carousel.

• Vertical content card (without text, text over image)

• Horizontal content card (without text, text over image)

• Content card with text (text on top, text at bottom)

• Inline card

• Text Only

• Mix and match content card

Horizontal Content Card

Content layout

• Card without text

• Card with text over the image

Grid layout

Each types of cards layout can be in grid or carousel. Here are number of cards can be used in grid and carousel layout.

• Supported Cards: You can display 2, 3, or 4 cards in both desktop and mobile views.
• Odd Number of Cards: For layouts with 3 cards, the cards can be stacked to maintain visual balance.

Carousel layout

• Supported Cards: You can display 2, 3, 4, or 5 cards in both desktop and mobile views.
• Mobile View: On mobile, the carousel layout behaves the same as on desktop, allowing users to swipe through the cards horizontally.
• Card peek: small, medium, large

Spacing

Content cards have 3 different types of column spacing.

• None
• Default
• Loose

Characteristics

• Basic - This card type will display images or videos without a Shop the look button. This card allow for an image

• Shoppable - The shoppable card will allow the user to shop the content shown within the card. The shop the look (STL) button is applied and when interacted with, a modal will be triggered with shoppable products displayed.

• Video - The Video content card is the same as the basic card however basic video controls are displayed (pause/play)

• Inset Card - The inset card has an image inset within a card shown with text to the right or left of the image.

• Text Card - The Content Card Can be used as text only.

• Various Spacing- The Content Card offer various column and row spacing (None, Default, Loose)
  

Note:

Video STL is not currently supported

Horizontal Content Cards Without Content (Grid)

Each types of cards layout can be in grid or carousel. Here are number of cards can be used in grid and carousel layout.

• Supported Cards: You can display 2, 3, or 4 cards in both desktop and mobile views.

• Odd Number of Cards: For layouts with 3 cards, the cards can be stacked to maintain visual balance.

Horizontal Content Cards Content Over The Image

The horizontal content cards can be displayed with text overlay. The horizontal content card over the image can be in grid or carousel.

Note:

• The Basic Content Card has slightly larger text (to be improved). The Text also does not scale when responsive and may run over the text box area.
• Only this 1 typeface & text weight can be applied to each card.
• Video Content Tiles do not currently support text overlay.

Horizontal Content Cards Content Over The Image (Grid)

Horizontal Content Cards Content Over The Image (Carousel)