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

• Card deck with 2 cards in a row
• Card deck with 3 cards in a row
• Card deck with 4 cards in a row
• Card deck in an HSC
• Card deck in placeholder 2 of eCIB

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

Settings

• N/A