Card
A card is used as a call to action (CTA) to drive traffic to different web pages. Though each card represents a single idea, we typically use cards in groups of at least two.
Cards are an advanced component and should only be used by AEM authors who have completed card training.
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
You'll often see cards on homepages or landing pages. Highly noticeable and easy to scan, they link to different pages relating to a common theme, like programs or news stories.
Cards can be a great way to categorize content and drive traffic to pages deeper in your unit's website. For example, the JMSB homepage uses cards to categorize its programs and drive traffic to its program pages:
The Fine Arts Departments and Faculty Members page uses cards link to their nine department and faculty pages:
Cards are contained within a Card Deck component. The card deck settings control how many cards display per row and whether the cards are equal height.
Best practices
Add a new Card Deck component
If you're thinking of adding a new 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.
Remove a card from an existing card deck
After removing a card, you may need to adjust the number of columns in the Card Deck component.
Add a new card to an existing card deck
- New cards must match the style of the existing cards.
- If the existing cards each have an image, title and overview, any new card(s) will also need an image, title and overview. As well, you'll need to crop the image to the same aspect ratio as the other card images.
- If the cards are ordered alphabetically or chronologically, add the new card(s) in the correct place relative to the existing cards.
- If the existing cards each have an image, title and overview, any new card(s) will also need an image, title and overview. As well, you'll need to crop the image to the same aspect ratio as the other card images.
- If you're linking to other Concordia pages, use relative links. That way, if a linked page Concordia ever moves, your link will still work.
- After adding a new card, you may need to adjust the number of columns in the Card Deck component.
- Follow the Accessibility guidelines.
Accessibility
Heading
- Ensure that above the Card Deck component, there's a clear, concise H2 heading that describes the theme of the cards. For example, "Programs" or "News". This helps people who use screen readers – and everyone else, too!
Card and button text
- Keep card text clear, concise and plain language.
- If you include button text, make it clear, specific and actionable.
- e.g. "View microprograms" or "Explore SHIFT"
Card image
If the card image provides essential information or additional context, in the Image Settings tab include alt text.
For example, this card image supplements the text by showing the Concordia student, the research assistant and the NASA team they worked with. Because this image provides additional context, it requires alt text.
If the card image is decorative – meaning it's used purely for aesthetic purposes and doesn't add any meaningful information – you don't need to include alt text.
For example, this generic image of a plane doesn't add any meaningful information, so it doesn't require alt text.
Design options
Ensure that new cards match the style of existing cards.
In the Card Deck component settings:
- You can choose to display the cards at equal or varying heights. It's usually best to choose Equal rows.
- You can also adjust the number of columns, which determines how many cards display in a row. Adjust the columns to fit the cards, e.g. 3 columns for 9 cards, 4 columns for 8 cards.