BRAID
Braid Logo
 

Card

A visual container for information and actions related to a single subject.
This content is inside a card
Open in Playroom

Visual guidelines

Cards are highly flexible and can contain many types of content including copy, images, calls to action and layout components. Below is just one example of how a card can look.

Heading level 4

Standard text
Standard text lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus iaculis ut neque sit amet egestas. Standard, secondary text
Open in Playroom

Typography

Keep it simple and try to limit text sizes to one Heading and one Text size. As a default, we recommend:
  • Heading level 4 for card headings
  • Text size standard for subheadings and body copy
  • Text tone secondary for secondary copy.

Vertical spacing

Use the Stack component to apply vertical spacing within a card. As a default, we recommend:
  • Stack space medium for separating content groups and sections (or large for an airier feel)
  • Stack space small for related content you’d like to display more tightly (such as the heading and subheading).
Below is the same example as before but with spacing highlighted for visibility.

Heading level 4

S
Standard text
M
Standard text lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus iaculis ut neque sit amet egestas.
M
Standard, secondary text
M

Content size

The size and spacing of card content can be tailored when needed. Below are examples of 3 different sizing approaches.

Heading level 4

Standard text
Standard text lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus iaculis ut neque sit amet egestas consectetur. Lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus iaculis ut neque sit amet egestas.Standard, secondary text
Large, strong textSmall text
Small text lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus iaculis ut neque sit amet egestas. Lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus iaculis ut neque sit amet egestas.Small, secondary text
Strong textSmall text
Xsmall text lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus iaculis ut neque sit amet egestas. Lorem ipsum dolor sit amet consectetur adipiscing elit. Vivamus iaculis ut neque sit amet egestas.Xsmall, secondary textXsmall TextLink
Open in Playroom

Tones

Use the tone property to visually accentuate a Card by adding a keyline down the left hand side. Supported tones include promote and formAccent.Read more about Tones.
PROMOTE
FORMACCENT
Open in Playroom

Controlling the height

By default, height will be set to content — growing to accomodate what is inside it.Alternatively, choose a height of full to use all available vertical space. This is useful when composing rows of Card components that should all be equal height.
Open in Playroom

General best practice

  • Ensure card content is scannable and easy to digest.
  • Limit content to a single subject (e.g. a single job, candidate, article).
  • Include clear action(s). These can be in relation to the subject or to simply view more details.

When to use

Use a Card to:
  • provide a summary and entry point to more detailed information about a single subject
  • allow users to take relevant action(s) related to the subject (e.g. save, delete).
Don’t use a Card to:
  • provide actionable content relating to multiple subjects (break them into individual cards instead)
  • inform the user about important changes or conditions in the interface (use Alert or Notice instead)
  • visually differentiate static, non-actionable content (use Box instead).

Custom semantics

The HTML tag can be customised to ensure the underlying document semantics are meaningful. This can be done using the component prop and supports div (default), article, aside, details, main and section.

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Card
  data={{ testid: 'card-1' }}
  // => data-testid="card-1"
>
  ...
</Card>
Open in Playroom

Alternatives

  • Box — For custom layouts.