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.

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

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

• Cards per row: 2, 3, or 4 cards
• Card decoration: none, photo, or icon
• Card orientation: vertical, horizontal
• Decorative bar

• One column frame
• 2 cards in a one column frame should match 6-6 frame spacing
• One column narrow frame
• Large side of 2 column frames
• 7
• 8
• 9
• Default highlight section
• Body-content placeholder (full width)
• Content Image Banner – Placeholder 2:
• Add card deck directly to PH2
• Add card deck to an HSC within PH2

There are no sitecore fields for this component. The component is controlled with its component properties, in the Experience Editor.

No imagery is used on the Card Deck component.

TBD