Cards

Basic card

• The basic card consists of an image area (using the frame layout), and a content area (using the box layout). If the image is purely decorative, an empty alt attribute should be provided.
• The content area appears first in the source order, so that the card is correctly labelled by its heading. We use flexbox to visually put the image ahead of the content area.
• Make sure that the heading element fits with the heading order of surrounding content. Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.

• We want the entire card to act as a link:
  • Avoid wrapping the card in a link. This can result in the entire contents of the card being read out to screen reader users.
  • Avoid wrapping the image in a link and repeating that link elsewhere within the card. This results in unnecessary tab stops and duplicated links.
  • It makes sense to use the heading text as the link for our card. It is unique and descriptive. Add the link inside the heading.
  • To make the link span the entire card, we apply position: relative; to the card and position: absolute; to the link's ::after pseudo element.
  • Link affordance is provided by the pointer cursor style. We add a :hover style for further affordance.

My card title

Here is all the descriptive teaser text for my card.

Card with a call to action

• This variation of the basic card includes a visual call to action (CTA), without adding an unhelpful and generic "Read more" link.
• The CTA is hidden from assistive technologies using the aria-hidden attribute.
• For sighted screen reader users, we attach ‘Read more’ to the link with aria-describedby in conjunction with a unique ID on the CTA. This description is always announced after the link text.
• The content area has a flexbox context with flex-direction: column; courtesy of the stack mixin which creates vertical spacing between sibling elements. This enables us to apply margin-top: auto; to the CTA to align it to the bottom of the card, which looks more attractive in a list of cards.

Unique card title

Here is all the descriptive teaser text for my card.

Read more

Card with extra links

• Sometimes we need to include additional links e.g. for category indexes or author attributions.
• By giving such links position: relative; and z-index: 10; we can raise them above the level of the card link and provide access to users.
• In this example, tags are included using a modification of the cluster layout

Another card title 1

Categories

• Arts and culture
• Education
• Charity and not-for-profit

Here is all the descriptive teaser text for my card.

Read more

Horizontal card

Horizontal cards use a slightly modified structure, with an inner container added to the text area to centre it vertically. They use a similar mechanism to the sidebar layout, to switch from vertical to horizontal alignment without a media query.

Unique card title 4

Here is all the descriptive teaser text for my card.

Read more

Image credit

Photo by Steve Johnson on Unsplash