Card

A container-style component used to display information in a structured and visually appealing way.

Report Issue Github

Usage

Basic Card

Render a basic Card.


<Card>
  <Card.Header title="Card Title" subtitle="Subtitle here" />
  <Card.Body content="This is the content of the card." />
  <Card.Action justify={'end'}>
    <Button variant={'outlined'} color={'gray'}>
      Action 1
    </Button>
    <Button highContrast>Action 2</Button>
  </Card.Action>
</Card>

Variants and Styles

Customize the appearance using the variant, textAlign, and outlined props.


<Card variant="transparent" outlined={false}>
  <Card.Header
    title="Card Title"
    subtitle="Subtitle here"
    action={
      <Button variant={'transparent'} highContrast>
        Action
      </Button>
    }
  />
  <Card.Body textAlign="end" content="This is the content of the card." />
  <Card.Action justify={'end'}>
    <Button variant={'outlined'} color={'gray'}>
      Action 1
    </Button>
    <Button highContrast>Action 2</Button>
  </Card.Action>
</Card>

Shadow

Using the shadow prop we can adjust shadow values for the component.


<Card variant="transparent" shadow="4" outlined={false}>
  <Card.Header title="Card Title" subtitle="Subtitle here" />
  <Card.Body content="This is the content of the card." />
  <Card.Action justify={'end'}>
    <Button variant={'outlined'} color={'gray'}>
      Action 1
    </Button>
    <Button highContrast>Action 2</Button>
  </Card.Action>
</Card>

API

Props

Card

Prop	Type	Default	Required
`variant`	`'solid' \| 'transparent' \| 'translucent'`	`'solid'`	-
`outlined`	`boolean`	`'button'`	-
`size`	`'xlarge' \| 'large' \| 'medium' \| 'small'`	`'medium'`	-
`radius`	`ThemeRadius`	-	-

Header

Prop	Type	Default	Required
`title`	`ReactNode`	-	Yes
`subtitle`	`ReactNode`	-	-
`titleSize`	`TextSize`	`4`	-
`subtitleSize`	`TextSize`	`4`	-
`action`	`ReactNode`	-	-
`outlined`	`boolean`	`false`	-
`MarginProps`	`Token<MarginProps>`	-	-
`radius`	`ThemeRadius`	-	-
`size`	`Responsive<Size>`	`'medium'`	-
`shadow`	`ThemeShadow`	-	-

Body

Prop	Type	Default	Required
`title`	`ReactNode`	-	Yes
`content`	`ReactNode`	-	-
`titleSize`	`TextSize`	`4`	-
`textAlign`	`'start' \| 'center' \| 'end'`	`'start'`	-

Action

Prop	Type	Default	Required
`outlined`	`boolean`	`false`	-

Button

Icon Button