Skip to main content
Design system


Single, contained unit designed to hold other related elements and/or components.

Bundle size:Β 1.16 kB
npm install @washingtonpost/wpds-ui-kit
import { Card } from "@washingtonpost/wpds-ui-kit"
Source: Β View on Github


Note: Image is not to scale

  1. Border
  2. Content


Although a card defaults to the size of container it resides in, the dimensions and layout of a card depend entirely on its contents. Use the css property to designate styling for your specific needs.


Group content

Cards are a greate way to group related content together.

An empty box with infinite possibilities

Cards can hold virtually any combination of elements/components. Mix and match to create a contained experience.

Test how it scales

Cards can hold so many elements/components, but with that freedom comes the responsibility of testing the responsiveness of the card.


Use list

Use unordered lists and list items for cards in a collection. This allows screen readers to parse the items as a list. The order of elements inside a card should be logical, and each interactive element should have an apparent hover state.

API Reference


childrenThe nested elements inside Card
cssWPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.
{} & { alignContent?: ScaleValue | Globals | Index | AlignContent; alignItems?: ScaleValue | Globals | Index | AlignItems; ... 425 more ...; vectorEffect?: ScaleValue | ... 2 more ... | VectorEffect; } & ... 7 more ... & { ...; }