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 Guidelines Use when 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 The Basics 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 Do include essential, summarized information. Don't overwhelm the space with excessive content. Do use consistent elements from card to card when arranged in groups. Don't group unlike cards that use different elements. API Props
Sets valid HTML container element tag.
Slots Component Variables
For projects that cannot make use of the Vue.js component, the CdrCard styles are available through the `@rei/cdr-component-variables` package as SCSS and LESS mixins which can be applied to plain HTML elements.
See examples on the
Component Variables page