Skip to content
Home

Card

Info
Demos
Properties

Demo

Default border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum.

Code Editor
<Card>
  <P>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
    pharetra elit in bibendum.
  </P>
</Card>

Vertical fields

Code Editor
<Card>
  <Flex.Vertical>
    <Field.String label="Label" value="Value" />
    <Field.String label="Label" value="Value" />
  </Flex.Vertical>
</Card>

Horizontal fields

Code Editor
<Card>
  <Flex.Horizontal>
    <Field.String label="Label" value="Value" width="small" />
    <Field.String label="Label" value="Value" width="stretch" />
  </Flex.Horizontal>
</Card>

Stack

The Card components needs to have stack={true} or align="stretch" in order to stretch its children components.

For form components, you should use stack={true} to get the correct spacing.

Code Editor
<Card stack>
  <Field.String label="Label" value="Value" />
  <Field.String label="Label" value="Value" />
  <Hr />
  <Form.SubmitButton />
</Card>

Nested Cards

Nested cards have responsive={false} by default and will not behave responsive.

First Card

Second Card

Third Card (for edge cases only)

Code Editor
<Card stack>
  <P>First Card</P>
  <Card stack>
    <P>Second Card</P>
    <Card stack>
      <P>Third Card (for edge cases only)</P>
    </Card>
  </Card>
</Card>

With outset

On small screens (mobile) the outset is removed.

Main heading

Card content

Nested card

Code Editor
<Flex.Vertical>
  <Form.MainHeading>Main heading</Form.MainHeading>
  <Card stack outset>
    <P>Card content</P>
    <Card>
      <P>Nested card</P>
    </Card>
  </Card>
  <Form.SubmitButton />
</Flex.Vertical>

Without padding

no inner space

Code Editor
<Card innerSpace={false} align="stretch">
  <P>no inner space</P>
</Card>

With nested Section

The Card components needs to have stack={true} or align="stretch" in order to stretch its children components.

Card with a nested Section

no inner space

no inner space

Code Editor
<Flex.Stack>
  <Card gap="x-small" align="stretch">
    <Form.SubHeading>Card with a nested Section</Form.SubHeading>
    <Section
      variant="info"
      innerSpace={{
        top: 'small',
        bottom: 'medium',
      }}
    >
      <Field.String width="medium" label="In nested Section" />
    </Section>
  </Card>

  <Card innerSpace="x-large" stack>
    <Section
      variant="info"
      innerSpace={{
        top: 'small',
        bottom: 'medium',
      }}
    >
      <Field.String
        width="medium"
        label="Card with a 'x-large' inner space"
      />
    </Section>
  </Card>

  <Card innerSpace={false} align="stretch">
    <P>no inner space</P>
    <Section innerSpace backgroundColor="var(--card-outline-color)">
      <Field.String width="medium" label="Card with no inner space" />
    </Section>
    <P>no inner space</P>
  </Card>
</Flex.Stack>

With Table

Card title
Column 1Column 2Column 3
Row 1Row 1Row 1
Row 3Row 3Row 3
Code Editor
const MyTable = () => (
  <Table.ScrollView>
    <Table border outline size="medium">
      <thead>
        <Tr noWrap>
          <Th>Column 1</Th>
          <Th>Column 2</Th>
          <Th>Column 3</Th>
        </Tr>
      </thead>
      <tbody>
        <Tr>
          <Td>Row 1</Td>
          <Td>Row 1</Td>
          <Td>Row 1</Td>
        </Tr>
        <Tr>
          <Td colSpan={3} align="right">
            <Button>Button</Button>
          </Td>
        </Tr>
        <Tr>
          <Td>Row 3</Td>
          <Td>Row 3</Td>
          <Td>Row 3</Td>
        </Tr>
      </tbody>
    </Table>
  </Table.ScrollView>
)
render(
  <Card title="Card title" responsive={false} innerSpace={0} filled>
    <MyTable />
  </Card>,
)

With Grid

Grid wraps the Cards nicely on smaller screens.

Heading

Text

Heading

Pariatur officia sit adipisicing pariatur commodo enim do quis

Heading

Text

Code Editor
<Grid.Container
  columns={{
    small: 1,
    medium: 3,
    large: 3,
  }}
  columnGap="small"
>
  <Card stack>
    <H2>Heading</H2>
    <P>Text</P>
  </Card>
  <Card stack>
    <H2>Heading</H2>
    <P>Pariatur officia sit adipisicing pariatur commodo enim do quis</P>
  </Card>
  <Card stack>
    <H2>Heading</H2>
    <P>Text</P>
  </Card>
</Grid.Container>

With Flex

While Flex has the horizontal direction, it uses rowGap when wrapping. So it's the container spacing the Cards then. This is not ideal, because the Cards should ideally have no gap, like in the Grid example above.

Heading

Text

Heading

Pariatur officia sit adipisicing pariatur commodo enim do quis

Heading

Text

Code Editor
<Flex.Container>
  <Card
    size={{
      small: 'auto',
      medium: 4,
      large: 4,
    }}
    stack
  >
    <H2>Heading</H2>
    <P>Text</P>
  </Card>
  <Card
    size={{
      small: 'auto',
      medium: 4,
      large: 4,
    }}
    stack
  >
    <H2>Heading</H2>
    <P>Pariatur officia sit adipisicing pariatur commodo enim do quis</P>
  </Card>
  <Card
    size={{
      small: 'auto',
      medium: 4,
      large: 4,
    }}
    stack
  >
    <H2>Heading</H2>
    <P>Text</P>
  </Card>
</Flex.Container>