WPDS Documentation & Resources

Card

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

Bundle size: 1.16 kB

Install:

npm install @washingtonpost/wpds-ui-kit|Copy

Usage:

import { Card } from "@washingtonpost/wpds-ui-kit"|Copy

Storybook: View on Storybook

Source: View on Github

Anatomy

Note: Image is not to scale

Border
Content

Options

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.

Guidance

Group content

Cards are a greate way to group related content together.


Open in Playroom

An empty box with infinite possibilities

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


Open in Playroom

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.


Open in Playroom

Accessibility

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.