Cards are used in multiple places. Although the visual appearance may vary, they share two general patterns:
- Simple cards (covered here) with a distinct link that can be selected
For both types of card, it is important to check that the heading level used fits in with the card's location in the page content hierarchy.
For arranging groups of cards you can use the switcher layout helper or shelves component depending on your requirements.
A simple card
Cats and the Internet
Examining the popularity of cat-related media content online.Cats and the Internet: Read more
Note the use of the frame layout helper for the card image and the box layout helper for the card text.
In the markup, the card text is first in the source order to prioritise it over the image. Flexbox is used to place the image ahead of the card text visually, via the
Where generic link text is used visually, this is enhanced for Assistive Technology users with the
span class="visuallyhidden" providing descriptive link text to meet WCAG Success Criterion 2.4.9: Link Purpose (Link Only) (AAA).
If the design calls for a row of cards of equal height, irrespective of the amount of text content, you can add the
card--neat modifier class to the cards. This forces the card to take up 100% of the height of the parent container. It will also push the last child element in the text region to the bottom edge. You can see this in action on the Amplify home page.