FunctionCard

Open in Storybook Open in Figma

This page describes FunctionCard, its content, and it being part of a (complex) Card. To see some real-world examples, head over to FunctionCard examples.

Basics

When a user interacts with a FunctionCard, they enable/disable George functionality, hence the name. But despite the name, a FunctionCard is not a Card on its own, but a special component with a distinct look that is part of a Card. As such, it must be placed inside a Card, never directly on grey background. While it’s possible that a Card contains only one (horizontal) FunctionCard, more often they are used together with other FunctionCards, at times they are placed inside CollapsibleContent, etc.; together they form the big white box known as Card.

FunctionCards usually arrange their content in vertical orientation (top to bottom), but when their horizontal prop is set, they will flip to horizontal orientation (left to right, i.e. a 3-column layout) on tiers MD and above.

Without the horizontal prop, FunctionCards will keep their vertical orientation on larger tiers, but in this case they are not meant to be used alone. Instead, two or three FunctionCards will be placed next to each other in a row.

Content

Three distinct content areas give FunctionCards their specific look. Only the first content area is mandatory, but no matter how many areas are present, they will be placed in the following order for accessibility:

1. Body area, for any type of content, almost like a regular CardBody;
2. Indicator area, for an icon and optional state that accompanies the body text;
3. Buttons area, for buttons and optional additional text.

Body

The body area will occupy all the available space inside the FunctionCard, unless one or both of the two other areas are present.

Headings

Headings are all set in the same size, anything from <h2> to <h6> can be used. The heading level of choice depends on the heading preceding the FunctionCards and has to continue one level deeper. Headings may be omitted if the leading heading is sufficent. In this case the FunctionCard either has no heading, or we display a fake heading, by using a paragraph with a .g-h-major modifier.

The use of headings with a reduced font size (i.e. adding the .g-h-minor modifier to an actual or fake heading) is supported, but should be limited to Function Information Cards.

Paragraphs

FunctionCards support two kinds of text: regular and small paragraphs.

Other elements

FunctionCards can have pretty much any content inside the body, but sometimes we limit ourselves on purpose, to achieve the look of the examples shown in the following chapters, and also in the aforementioned FunctionCard examples.

Indicator

FunctionCards usually feature an indicator containing an icon or image, and sometimes a state label.

The indicator can be used as-is, so the icon simply depicts the function. But the indicator can also be used to represent a state. In this case, a state label may be added via indicatorText, which is then placed underneath the icon. Doing so presents the function in its “turned off” state, and addtionally setting indicatorActive means the function is “turned on”.

The indicator acts as a banner on top of the body content. In horizontal FunctionCards at tiers MD and above, the indicator represents the first column of the 3-column layout.

Custom indicator

Any kind of content, but in reality an Image, may be supplied via the indicator prop.

Buttons

The third and last content area is reserved for

• up to three buttons, and
• some optional additional text.

The buttons area contains calls to action, and is placed underneath the content. In horizontal FunctionCards at tiers MD and above, this area is synonymous with the third column of the 3-column layout.

Variants

As indicated, the screen size and the horizontal prop determine the FunctionCard’s orientation.

Horizontal orientation

When horizontal is set, the content areas will be displayed left to right on tiers MD and above.

Vertical orientation

Here, space is limited, for body content we only use headings and paragraphs, which is why we focus on how to describe the FunctionCard’s functionality.

A description can be specified via children and/or buttonsText. Interestingly, for vertical FunctionCards, the children are optional. In most cases the buttonsText is sufficent, sometimes you need both. Currently, our examples for vertical FunctionCards do not feature a case where children are used without buttonsText, so please double-check if you encounter a design that requests this.

The following example shows the three different description styles for illustrative purposes. In reality however, those styles are not mixed. Instead, the same style is used for all FunctionCards in a row.

In a Card

Both variants must be part of a Card.

HINT Putting FunctionCards in a Card replaces the old CardGroup way. The CardGroup migration guide contains a chapter on how to migrate FunctionCards that are part of a group.

A horizontal FunctionCard needs no special treatment and should simply be added to a regular Card. In there, a horizontal FunctionCard is just one among others. When placing multiple horizontal FunctionCards in a Card, there should always be Separators between them.

In a CardRow

A vertical FunctionCard on the other hand must always be part of a group, because allowing a single vertical FunctionCard to occupy the full width does not look good on larger tiers. Therefore, two or three vertical FunctionCards should be grouped together, and the CardRow component can make it happen.

With header

To add a header (title bar) before horizontal FunctionCards, just add a CardHeader. Nothing special here, this is regular Card procedure.

HINT This is limited to horizontal FunctionCards, we do not add such a header before a CardRow with vertical FunctionCards.

With shared footer

Vertical FunctionCards may share a common footer. Place two or three FunctionCards without a buttonsText followed by a CardFooter in a CardRow.

Function information cards

The so-called function information cards differ from regular FunctionCards by having no indicator, which is why there is no 3-column layout for them. As a result, they are only used in vertical orientation, i.e. in a CardRow, and there are always at least two of them next to each other.

Semantically, the following example uses a heading followed by a paragraph, which is fine in most cases. Even two paragraphs could work in some scenarios, but two actual headings per FunctionCard must be avoided.

To achieve the required visual effect, where the semantically more important piece of text on top has a smaller font size compared to the information card “tagline” following it, adding the modifier classes .g-h-minor to the first and .g-h-major to the second line of text is required. Similar to regular vertical FunctionCards, the final paragraph with the longer text will be placed in the buttons area of the FunctionCard via the buttonsText prop.

Contrary to the following example, function information cards are usually not used on their own, a more common example is a horizontal FunctionCard followed by two function information cards.