Decks are clear containers within content panels and house component combinations of cards or tiles. A deck’s form and size is contrained by the content panel it is placed into. Cards inside decks are uniformily styled and spaced, with specific fields in logical groups. Uniformily for sets of cards, it is dependent on the deck attributes and the deck helps with organization by restricting the card content to a specific type.
Decks are placed inside content panels and can contain an optional parent deck title and link. The type of deck used will indicate how many cards will fit across within the container. In the instance that cards need to scale to fill the deck (for example, Deck-33), cards must maintain a minimum width of 2 1⁄2 columns, or 253px).
In mobile experiences, the deck transforms into a deck-full with the cards stacking vertically.
Decks have two zones, the main content area, which aligns to the top of a card, and the CTA area, which aligns to the bottom of a card. All cards in a deck must be the same height and width.
Cards expand to fill the deck size. If a card is removed, the other cards flex to fill the deck.
Once cards reach their minimum size of 2 1⁄2 columns, (or 253px), it wraps to the next row and the cards collectively respond to fill the deck. Note that all cards still maintain a uniform height and width.