Card Deck component

Design options

The card deck controls how cards are displayed on a live web page:

• Equal height adjusts all cards in a group so they appear with the same height regardless of image size and the amount of text.
• Masonry displays cards according to their natural heights. Use masonry when cards have images of different sizes, such as artwork or book covers.

You can specify how many columns appear on desktop, tablet and mobile:

• Desktop (2-5 columns)
• Tablet (1-2 columns is recommended)
• Mobile (1 column is recommended)

Card decks can be used with any page layout. They must be placed within grid containers when using the full window template.

Examples & use cases

Equal height

These cards have titles and body text of different lengths, yet they display with an equal height. In addition to the title and body text, each card also includes a category, subtitle and button in the simple style.

Equal height displays the cards from left to right in the order they appear when editing in AEM.

Masonry

Each card only has an image and a title; the images are different heights and orientations. There are no buttons, therefore the entire card is a link.

Masonry displays the cards by column. Note the order of the numbered cards in the example: the first, second and third cards (when editing in AEM) are in the first column; the fourth card is at the top of the second column.

You may want to reorder your cards a few times to find the best display for your content.

Visit the card component page to see more examples of cards.

Helpful tips

When editing in AEM, the cards will appear in a vertical stack.

To see how your card deck will look on the published page, you can preview your AEM page. While working in AEM, simply add ?wcmmode=preview to the end of your URL in your browser's address bar and press enter.

When you want to edit again, click the back button or remove the added text from the address bar.