Card
Overview
Cards group content that allows users to browse a collection of related items and actions in a modular, easy-to-read way. There are three main areas to the card component: Media, Content and Action area.
Usage
Cards are used to display a summary of content and will reveal more details upon interaction.
Variants
There are two card variants - card without inset <Card/> card with inset <CardInset/>
Props
string and BaseLinkProps are supported,BaseLinkProps is derived from React.AnchorHTMLAttributes, providing access to all anchor props. For more details check the Interactivity section below.NOTE: If href prop is not provided the card will omit all interactive states (hover and active) from the style presets applied to the inner card containers.
vertical- The card is stacked vertically, displaying top to bottom: media, content and action items.horizontal- The card is laid out horizontally, media on the left and content stacked above action items on right.horizontal-reverse- The card is laid out horizontally, content stacked above action items on left with media on the right.
ImageProps object (see Image documentation), it will render the media as an image.If this is provided as a custom React component, it will render the React component directly.
NOTE: If necessary, make sure your media element is tabbable by adding
tabindex to it.If there are multiple items, it is advised to use the Stack component to display the items. Refer to the examples below.
If 'none' is passed, we don't apply any ratio.
If an invalid value is passed, the ratio will default to what is defined in component defaults
NOTE: This prop works for
horizontal and horizontal-reverse layouts only.An error occurred loading this code example.
NOTE: The
headline object represent the defaults that will be applied to theHeadline component used inside the card.card.headline.nonInteractive- will be applied by default to the headline when there is no href propertycard.headline.interactive- will be applied by default to the headline when href property is provided
Headline styles by passing the overides directly to the Headline as shown on the examples below.NOTE: Card Props extends
React.HTMLAttributes so that you can pass any valid HTML attribute like onClick.Examples
Vertical card
Card without inset
The bank holiday weekend has seen some mixed weather, but as the sun emerged, many in the UK took the opportunity to make the most of the lockdown easing.
Card with inset
The bank holiday weekend has seen some mixed weather, but as the sun emerged, many in the UK took the opportunity to make the most of the lockdown easing.
Horizontal card
Card without inset
The bank holiday weekend has seen some mixed weather, but as the sun emerged, many in the UK took the opportunity...
NOTE: When you use non-inset card without actions you will need to provide additional spacing to the teaser. Otherwise clipping (overflowing) on the last row might occur due to Line Height Cropping. For more information check this article on medium
Interactivity
When the Card component has a href property (making it interactive), it is recommended
to pass the Headline as a child,
inside of the card content area. In this case the Headline will have a link applied to it,
which will have various interactive states (hover, visited, avtive)
and the Headline will have new component-defaults applied out of the box - card.headline.interactive
(listed in the card defaults above), you can also pass your own custom overrides to the Headline.
For this implementation, we use a z-index property in order to exclude the actions area and the media area (when we have mediaInteractive = true) from the link area.
NOTE: It is not mandatory for the headline component to be direct child of the card content. It can be nested inside a structure,
but make sure it does not have any parents with position: relative style applied as it will break the clickable area of the link.
NOTE: Passing styled component created from the Headline to the card content would not work correctly when the card is used as a link. Instead use the Headline overrides to modify its styles. Otherwise, the interactivity of the link will not work as expected.
Accessibility
- Always pass an
altprop to the card image regardless of whether you use the built in or a custom image component. - When creating a tab order for the different parts of the card, remember to put the headline before the image or media so that screen-reader users get the context before the image alt tag.
- When passing custom interactive component (i.e. video) as card media remember to take care of making the media component visible for screen readers by adding tabindex if necessary.
- Add aria-label prop to allow a user to describe the action that will be performed when the user interacts with the card. By default, this could be the headline text.
- When nesting other components of the card, always follow those components' accessibility guidelines.