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 & Match

Mix and Match Content Cards

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