CardGroup

A CardGroup is a molecule that can group multiple Cards together in a row.

Basic Usage


import { CardGroup, CardGroupCard } from '@krakentech/coral-molecules';
 
<CardGroup>
    <CardGroupCard>Card 1</CardGroupCard>
    <CardGroupCard theme="secondary900">Card 2</CardGroupCard>
</CardGroup>

Card 1

Card 2

Properties

direction

By default, the card is column > md and row < md, as evidenced in Basic usage. If you set direction, you are setting the value for < md breakpoint.


<CardGroup direction="row">
    <CardGroupCard>Card 1</CardGroupCard>
    <CardGroupCard theme="secondary900">Card 2</CardGroupCard>
</CardGroup>

Card 1

Card 2

Responsiveness

This example will switch the default direction of the cards, so will be column < md and row > sm.


<CardGroup direction={{ base: "row", sm: "column" }}>
    <CardGroupCard>Card 1</CardGroupCard>
    <CardGroupCard theme="secondary900">Card 2</CardGroupCard>
</CardGroup>

Card 1

Card 2

Full API

Name	Type	Default
`children`	`ReactNode`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`direction`	`ResponsiveVariant<"column" \| "row">` The direction of the card group.