CdrCard is a simple wrapper component that allows for composing various card layouts.
Cards should always be used to link to other content, and the
cdr-card__link utility class should be used on the link element to ensure that the entire card functions as a click target.
Because CdrCard is a simple wrapper component, it's behavior can be customized or overridden in a variety of ways. For example, adding a border, inset padding, or modifying the link behavior.
Many WCAG requirements are contextual to their implementation. To ensure that usage of this component complies with accessibility guidelines you are responsible for the following:
- Leave the default tag prop of
article if the content includes a heading AND the content would be as useful on another web page
- Set the tag prop to
section if the content contains a heading, but the content is dependent on its context to be meaningful
- Set the tag prop to
div if your card title won’t be using a heading tag. This ensures it will not appear in the document’s outline
- CdrCard must contain a linked title
- All actionable elements contained within CdrCard must follow the guidelines outlined within their accessibility sections
- Previewing bite-sized information about an article or activity—such as a class or event
Don’t use when
- The card will not link to a destination or contains no actionable elements
- Displaying search results
- The information contained within the card is not related
- The visual presentation of a card is desired but the interaction pattern is not
- A card is a linked container with several pre-defined behaviors:
- Cards have a defined background color
- Cards resemble physical cards in that they have a defined area and visually sit above the background
- Cards are interactive and respond to a user's input by "lifting" off a page's background
- Cards must be composed using different components. These components work together to provide details about a singular subject or destination
- For groups of cards:
- Separate each card by using the grid system
- Ensure the components used are consistent from card to card
- Use the same height and width for each card on the page
Do / Don't
Sets valid HTML container element tag.
CdrCard styles are available through the `@rei/cdr-component-variables` package as SCSS and LESS mixins.
See examples on the Component Variables page