Content Cards

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

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.

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