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.
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
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.
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.
No separator lines
Cards in a CardGroup automatically get separator lines. To suppress them, apply a .g-card-group-noline class on the CardGroup:
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:
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
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:
Rules For Developers
- CardGroups typically expand in height to ensure the content fits. Therefore, for a vertical scrollbar to appear at all, a constraint must be put in place, usually by adding a
height/max-heightdeclaration on the group itself. - As
scrollableis a boolean prop, making not both but just one scrollbar appear requires putting constraints on the content, i.e. the CardGroup children must exceed the CardGroup in only one of the two axes.
CardHeader
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:
Rules For Developers
- If the
variantprop is set toERRORorSUCCESS, you also get theDEFAULTlook, but with a special background colour. In other words, …- use
variantSUCCESSif you needcolor$color-ui-green (#07a721); - use
variantERRORif you needcolor$color-ui-red (#cf2a1e).
- use
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
MDand 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.
A key feature of this header is that all Amounts will be displayed more prominently.
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
variantset toINFO, the ProductInfo’shorizontalprop 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.
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/SMtiers, the “back” text and the Button text is omitted and only the Icons remain. - The header grid is 3-6-3, except for
SMtier, where it is 2-8-2, andMDtier, where it is 4-4-4.
CardFooter
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.
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.
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
24pxgap 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 -999,999,999,999.00will 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.
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.
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.
Nested & in Modals
Cards and CardGroups automatically lose their box-shadow and get 1px border when placed in a Card or Modal.
Rules For Designers
- Border for Cards/CardGroups in Cards/Modals is 1px /
$color-gray-100 (#eef0f4).