NewsKit Mobile Logo

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

hrefstring
If provided, the Card will render as an anchor with this prop value as the href.
mediaImageProps | React.ComponentType
If this parameter is provided as ImageProps, it will render the media as an image.
If this is provided as a custom React component, it will render the React component directly.
srcstring
Image file path that is used directly in the 'src' attribute of the internal 'img' element.
altstring
Image description that is used directly in the 'alt' attribute of the internal 'img' element.
loadingAspectRatiostring = 3:2
This is a string interpolation of the aspect ratio of the loading container of the image. This is also used to determine the height or width of the image if only one dimension is provided. The default loading aspect ratio of media is 3:2, however, a user should be able to pass any ratio to the media.
childrenExclude<React.ReactNode, 'undefined'>
This is the body of the Card. A card requires to have at least a heading. Each element of the body content should be wrapped within a Block component which is responsible for the spacing between the elements. Refer to the examples below.
actionsReact.ComponentType
If provided, the Card will render the React component being passed to the actions. This could be buttons, tags and/or links. The actions section is typically placed at the bottom of the card and would only be clickable if the child components would be.
If there are multiple items, it is advised to use the Stack component to display the items. Refer to the examples below.
overridesobject
If provided, overrides the respective presets for the component and provided elements.
stylePresetMQ<string>
If provided, this overrides the style preset of the card.
mediaContainerobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the passed media container.
spaceInlineMQ<SpacingPresetKeys>
If provided, this overrides the horizontal space between the media container and the next element.
contentAndActionsContainerobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the content and actions container.
teaserContainerobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the teaser container.
spaceInsetMQ<string>
If provided, applies padding to the teaser container.
actionsContainerobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the actions container.
minHeightstring
If provided, this sets a minimum height to the actions container. This can be a sizing token from the theme, or any CSS length value.
spaceInsetMQ<string>
If provided, applies padding to the actions container.
Refer to the defaults below for the object structure:
{
  stylePreset: "cardContainer",
  mediaContainer: {
    stylePreset: "cardContainerMedia",
    spaceInline: {
      xs: "space040",
      sm: "space040",
      lg: "space050",
      xl: "space050"
    }
  },
  contentAndActionsContainer: {
    stylePreset: "cardContainerTeaserAndActions"
  },
  teaserContainer: {
    stylePreset: "cardContainerTeaser",
    spaceInset: "spaceInsetSquish000"
  },
  actionsContainer: {
    stylePreset: "cardContainerActions",
    minHeight: "sizing080",
    spaceInset: "spaceInsetSquish000"
  }
}

Examples

Prerequisites

Card without inset

Card Media
IMAGE
CROWDS HEAD

outdoors as bank holiday temps soar above 20 degrees

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.

News

Card with inset

Card Media
IMAGE
CROWDS HEAD

outdoors as bank holiday temps soar above 20 degrees

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.

Styling

Accessibility

  • 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.
  • 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.