Go to Content
Design System
Playroom Storybook
#ClimateEmergency

Card

Open in Storybook Open in Figma

White boxes on light-grey content are Cards. They build upon Bootstrap’s .card and .card-group classes.

Basic Card

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

Loading demo…
Rules For Designers
  • Cards are $color-white (#ffffff) and have 8px rounded corners.
  • Card shadow is 5% black, 2px offset below plus 1px blur.
  • Cards keep a 20px horizontal spacing to other elements.
  • Basic Cards have a horizontal padding of 15px and a vertical padding of 10px.

HINT Fancy Cards might override those values to match their own needs.

CardGroup

Open in Storybook

Individual Cards can merge into one bigger card. The latter is then called a CardGroup. George’s CardGroups are based on Bootstrap’s .card-group class.

Horizontal

When put in a .g-card-group-horizontal CardGroup container, multiple Cards merge into one. They are shown horizontal next to each other on screen size MD and up, and are automatically placed vertical on SM and down.

Loading demo…

Vertical

When put in a .g-card-group-vertical CardGroup container, multiple Cards merge into one, too. They are always shown vertical below each other, independent of the screen size.

Loading demo…

No separator lines

Cards in a CardGroup automatically get separator lines. To suppress them, apply a .g-card-group-noline class on the CardGroup:

Loading demo…

No gap

It is possible to merge multiple succeeding CardGroups into one visual box, by adding the .g-card-group-nogap class to all but the last CardGroup. It does not matter if the merged CardGroups are horizontal, vertical, or mixed:

Loading demo…

HINT You can remove the separator lines here, too, by adding .g-card-group-noline to all CardGroups.

HINT No-gap CardGroups are perfect to add a footer or header to a .g-card-group-horizontal that spans across all cards.

Rules For Designers
  • Separator lines between Cards are 1px / $color-gray-100 (#eef0f4).

Scrollable DEPRECATED

It is possible to turn CardGroups into scrollable containers with the scrollable prop. When the prop is set, scrollbars will automatically appear horizontally and/or vertically if the group contains content that is too big.

The prop has been deprecated and will be removed in an upcoming major release.

CardHeader

Open in Storybook

CardHeaders are visual banners, added as the first element in a CardGroup. 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:

Loading demo…
Rules For Developers
  • If the variant prop is set to ERROR or SUCCESS, you also get the DEFAULT look, but with a special background colour. In other words, …
    • use variant SUCCESS if you need color $color-ui-green (#07a721);
    • use variant ERROR if you need color $color-ui-red (#cf2a1e).
Rules For Copywriters
  • CardHeader grows in size if needed. Text is wrapped if it gets too long, but ideally text should be kept short to avoid wrapping on tier MD and above.

Info variant

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

Loading demo…

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

Loading demo…
Rules For Designers
  • This variant has no coloured background, it is always white $color-white (#ffffff).
  • If this CardHeader contains a ContactInfo or ProductInfo, the following applies:
    • It is mandatory to have at least a title text and one other of the possible elements (Avatar, type text, account details text, subtitle text, or amount).
    • The overflow handling (truncate or wrap) of title and subtitle text can be controlled with a prop; other elements are usually truncated if they get too long.
    • If the CardHeader content is left-aligned,
      • only an Avatar with size 48px must be used;
      • a ProductInfo’s minor text is no longer displayed in faded colour.
  • The Amount’s size is 28px in all tiers, and it has a top margin, so it should be the placed in the last paragraph.= or as part of a ContactInfo/ProductInfo.
  • Vertical padding is 32px, it gets reduced to 16px below tier MD.
Rules For Developers
  • If you put a ContactInfo or ProductInfo inside a CardHeader with variant set to INFO, the ProductInfo’s horizontal prop has no effect anymore.

LargeCardHeader

When CardHeader has its variant prop left untouched and large prop set, you’ll get a coloured header that is at least 56px in height. It may come with a “back” button on the left and an action button on the right.

DEPRECATED LargeCardHeader should be implemented as a StripeHeader instead.

Loading demo…
Rules For Designers
  • Height of the large CardHeader is minimum 56px. Text in the centre, if too long, is broken into lines. This may increase the header height as necessary.
  • The (optional) left CardHeader area contains an back Icon plus a “back” link. Colour/typography follows centre text header rules.
  • The (optional) right CardHeader area contains a single regular-sized secondary Button with an Icon.
  • In XS/SM tiers, the “back” text and the Button text is omitted and only the Icons remain.
  • The header grid is 3-6-3, except for SM tier, where it is 2-8-2, and MD tier, where it is 4-4-4.

CardFooter

Open in Storybook

One CardFooter (or more than one) may be added at the end of a CardGroup.

Rules For Developers
  • Underneath a TransactionGroup use the wrapper TransactionGroupFooter instead.

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.

Loading demo…
Rules For Designers
  • Minimum height of the CardFooter is 56px, but it will grow when there are more lines of text.

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.

Loading demo…
Rules For Designers
  • Text in both columns will be top-aligned.
  • If the screen is too narrow or the text is so long that the second column (including a 24px gap between the columns) cannot be placed in the same line, the second column will be left-aligned and displayed underneath the first.
  • Amounts will be displayed in a positive (green) or negative (red or neutral, dependent of user’s choice) colour.
  • Neither the text nor Amounts will be truncated, everything grows. However, amounts never wrap, but our declared maximum of JPY -99,999,999,999,999 will work on 320px screens.
  • Additional rich text may be added underneath the label. Semantically it is placed after the Amount(s) in a new “row”, and the content get’s deemphasized (smaller font size).

With a 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.

Loading demo…
Rules For Designers
  • The Button will expand to full-width with centred text on tier XS, but the clickable area is still the button itself and not the whole footer.

ColorDecoration BETA REACT-ONLY

ColorDecoration is a component useful for decorating cards with a thin stripe of colour.

Loading demo…
Rules For Developers
  • You can specify your own hexadecimal value using the prop colorValue.
  • If no colour is specified, the component won’t be rendered.
Rules For Designers
  • Use either the top or the left position.

Backgrounds

You can assign each Card one of the .g-bg-* classes to give them a background colour other than white. In this case separator lines around the colourful card are automatically removed.

Loading demo…

Nested & in Modals

Cards and CardGroups automatically lose their box-shadow and get 1px border when placed in a Card or Modal.

Loading demo…
Rules For Designers
  • Border for Cards/CardGroups in Cards/Modals is 1px / $color-gray-100 (#eef0f4).