Card

Open in Storybook Open in Figma

Slighly elevated (usually white) boxes on George’s grey background are called Cards.

Basic Card

George uses the .g-card class to give Cards their look.

When creating a Card like the one above, two – sometimes even three – things happen automatically: 1. A Card is rendered; 2. a CardBody is placed inside the Card; 3. a Paragraph is placed inside the CardBody to prevent plain text from becoming a direct child of the CardBody.

You may set useCardBody={false} to render a raw Card, this prevents 2. and 3. from happening. Either because you do not need a CardBody, or because you want to add a CardBody manually.

The nested prop has been introduced in GDS v3. Since then, setting nested={false} is what should be done when a Card is placed on grey background. Currently, nested defaults to undefined: While nested={true} should be set on visually distinct nested Cards, a Card with nested={undefined} is considered to be legacy. This allows us to distinguish between legacy and modern Cards during CardGroup’s deprecation phase.

HINT Setting nested to false or true additionally inverts the useCardBody logic: When useCardBody isn’t specified, a body is added for legacy Cards, but no body is added for modern Cards. For the former you can prevent a body by setting useCardBody={false}, for the latter you can add one with useCardBody (={true}).

Not nested

To reiterate, the recommended way to create a Card on grey background is to set nested={false} and perform the aforementioned three steps manually:

While this is more verbose, it empowers Card to become the successor of CardGroup.

Nested & in Modals

Cards lose their box-shadow and get a 1px border when placed in a Card or Modal. Although the border gets added automatically, always set nested to true in order to make nested Cards future-proof.

Complex Card

This following example showcases what may be going on inside a Card. The individual components are described in the chapters below.

CardBody

One or many card bodies may be added to each Card. Every added CardBody will adhere to the Card’s padding, which can be NONE, MEDIUM, or LARGE.

Side note: With the advent of Card replacing CardGroup, padding NONE becomes less relevant. In order to not have padding, simply do not add a CardBody. If a component doesn’t need or provides its own padding (e.g. a chart), it can be put directly in a Card.

CardRow BETA REACT-ONLY

CardRow is not a “row of Cards”, but a row of things inside a Card, in most cases a row of card bodies. Columns in a CardRow run left to right on larger tiers, and top to bottom below MD.

Separator

Use the Separator component to add separator lines between Cards.

When placed inside a CardRow component, Separator’s orientation switches to vertical.

CardHeader

Open in Storybook

CardHeaders are visual banners, added as the first element in a Card. They are not used as a heading, because semantically the content is wrapped in a (series of) paragraph(s). They come in three distinct looks.

Default variant

When the variant is set to DEFAULT, but also when set to ERROR or SUCCESS, you’ll end up with the OG CardHeader, a small banner, usually 24px in height, used atop ordinary Cards or FunctionCards. Its default colour is grey, but it accepts color overrides:

Info variant

If the variant is set to INFO, you’ll get a special CardHeader with all its content center (default) or left aligned.

A key feature of this header is that all Amounts will be displayed more prominently.

CardFooter

Open in Storybook

A CardFooter may be added at the end of a Card.

Basic CardFooter

Any kind of rich text may be added to the basic variant, but as the text will be centred it shouldn’t be too long.

With ButtonGroup

Next up, multiple buttons, predominantly used to move back and forth in a flow.

With Amount(s)

This is a two-column variant features a left-aligned brief summary text followed by one or multiple amounts (in case there are different currencies) to the right.

The rules found under basic CardFooter apply here as well, with one exception: if an additional (long) text beyond the summary is provided it will not be part of the first column – it forms a new row instead and the styling differs from the basic variant.

With action Button

This is another two-column variant. While the left-aligned summary text is oftenmost kept empty, a Button sits on the right side. The rules found under basic CardFooter and the one with an Amount apply here as well.

This type is mainly used to trigger loading of additional elements, e.g. rows when placed underneath a table.

Background colours

On every Card, you can set the color prop, or assign one of the .g-bg-* classes to give them a background colour other than white. When this is the case, separator lines around the colourful card are automatically removed inside a CardGroup.

Given that CardGroup has been deprecated, these days you are more likely to assign a color to a CardBody, which can be done in the same way as on the Card level. When doing so, do not add Separators before and after the CardBody.

ColorDecoration REACT-ONLY

ColorDecoration is a component for decorating a card (or part of a card) with a thin stripe of colour.

Learn more about ColorDecoration.