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.
- 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.
- 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.