CardGroup Deprecated
Individual Cards can merge into one bigger card. The latter is then called a CardGroup. But!
HINT With the introduction of CardRow and the enhancement of Separator, a single Card is able to accomplish any requirement that previously CardGroup was needed for. Using the Card approach is superior, thus we no longer recommend using CardGroup for new features.
DEPRECATED While CardGroup will still be part of the next major release, it is no longer maintained and should slowly but surely be refactored to Card instead.
This example showcases what may be going on inside a CardGroup, and happens to visually match its successor, created with Card instead. The individual components/props are described in the chapters below.
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.
DEPRECATED CardRow is replacing the horizontal CardGroup.
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.
DEPRECATED Card is replacing the vertical CardGroup.
No separator lines
Cards in a CardGroup automatically get separator lines. To suppress them, apply a .g-card-group-noline class on the CardGroup:
DEPRECATED Not having separators is the default when using Card instead of CardGroup. However, the Separator components exists to add separator lines.
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:
DEPRECATED The whole point of moving from CardGroup to Card is to have a single Card at the top that wraps everything inside, so nogap is no longer needed.
Rules For Developers
- You can remove the separator lines here, too, by adding
.g-card-group-nolineto all CardGroups. - No-gap CardGroups are perfect to add a footer or header to a
.g-card-group-horizontalthat spans across all cards.
With FunctionCards
Horizontal and vertical FunctionCards can be also be part of a CardGroup.
DEPRECATED As we move away from CardGroup, the two patterns mentioned below are outdated, put FunctionCards inside a Card instead.
A horizontal FunctionCard needs no special treatment and should can be added to a regular CardGroup. In there, a horizontal FunctionCard is just one among others. It continues to occupy the full width, consecutive cards in the group will be placed underneath, and there should always be separator lines between the cards.
Rules For Developers
- A single horizontal FunctionCard requires no CardGroup wrapper. However, basic spacing rules dictate to put it in a Group wrapper.
VerticalFunctionCardGroup DEPRECATED
A vertical FunctionCard on the other hand must always be part of a group. Two or three vertical FunctionCards should be grouped together, and the dedicated VerticalFunctionCardGroup exists to make this happen.
When there are only two cards, a vertical separator line is recommended, but when we have three cards, we go with the opposite, i.e. specifying no separator via the group’s noLine prop.
Rules For Developers
- VerticalFunctionCardGroup is a helper component that makes use of CardGroup under the hood. It exposes the
noGapprop, which can be set to combine it with another CardGroup that immediately follows. - Using four vertical FunctionCards is also possible, but in this case we still show only two cards per row, so we need two rows, i.e. two conjoined VerticalFunctionCardGroups.