Card Deck

The card deck is a container component that is used to place multiple cards in a defined grid onto a page. The cards are children items of the card deck item. The deck will ensure consistency of cards and will also make cards easier to use for Sitecore users.

Usage rules:

  • When multiple cards are trying to be displayed to ensure that the container element takes over the cards movement in different browser sizes
  • If the card deck needs to be paired with an NCC as a heading or other content, then it should be placed in a frame.
  • If the deck needs larger spacing between it and the next item, then it should be placed in the body-content as a full width component.
  • When cards can be horizontal:
    • Cards with photos: only when you have 2 cards per row
    • Cards with icons: 2 or 3 cards per row
    • 4 columns can ONLY be vertical
  • If you put in an icon that’s smaller than 80x80 px, it will render smaller than 80x80px. If you put in an icon that’s larger, it will constrain to 80x80 px.
  • If you stack two card decks:
    • Card deck followed by card deck on body content OR inside a frame, it knows to put the proper spacing between it and the deck above it. The bottom deck will have a top margin of 32px.

Content Variations

The card deck houses the card component which has a lot of other variations. See the card component for more information.


eCIB with card deck