Card Deck component - Concordia University

Get training

If your unit uses cards and you haven't done so already, register for self-paced card training. You'll get hands-on practice and the latest tips!

Uses

The card deck is a container that holds at least two cards. The card deck settings control how many cards display per row and their height.

Best practices

Adding a card deck component

If you're thinking of adding a card deck component so you can have cards on a page, please contact your Communications Advisor. They'll verify whether this is the best solution for your communications goals.

Layout type

When you open the card deck component for editing, the first field you'll see is Layout type.

Equal rows

In most cases, Equal rows is the best layout type for a card deck. This means the cards display at an equal height, even when the cards have varying amounts of text. For example:

Screenshot showing Summer 2024 Field Schools heading and 3 cards that are the same height, even though one has more text than the others.

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

Note: In AEM edit mode, cards display in a single vertical column. To see how the cards will look on your live site, you must preview and refresh the page.

Masonry

With the masonry layout, cards display at different heights. Cards with a longer image and/or more text will display longer than cards with a smaller image and/or less text.

We only use the masonry layout for card decks that meet the following three conditions:

The card images are artwork of different sizes
There are at least 6 cards in the card deck
And columns (desktop) is set to 3

You'll see the masonry layout on various Fine Arts pages that display student work, e.g:

Screenshot showing Sculpture and Ceramics cards in masonry layout. Cards are displayed in 3 columns. Some cards are longer than others.

The masonry layout usually requires more editing time than the equal rows layout. That's because masonry shows the first third of the cards in the left column; the second third in the middle column; and the final third in the right column.

It can be tricky to keeping track of which card will display where. You may need to reorder your cards a few times to find the best display for your content. Preview and refresh the page each time you reorder the cards, then choose the order that looks the best.

Columns

Set Columns (desktop) to a number that makes sense for the number of cards in your deck.
- e.g. If you have 4 cards, choose 4 columns. The cards will display in a single row.
- e.g. If you have 6 cards, choose 3 columns. The cards will display in two rows.
- e.g. If you have 7 cards, choose 4 columns. Four cards will display on the first row and three cards will display on the second – avoiding one card being stranded in a row of its own.
Set Columns (tablet) to 2 or 1.
Set Columns (mobile) to 1. Anything higher than 1 will be too small to be legible on mobile.

Accessibility

Ensure there's a clear, concise H2 heading above the Card Deck. This heading should describe the theme of your card deck, for example, "Programs" or "News". This is essential for accessibility.