Card

Cards can be used to provide easy scannable information and details.

Import#

  • Card: The wrapper component provides context, state management and default composition.
  • CardContainer: Bare wrapper component without state and composition.
  • CardHeader: Usually used for the title and an optional action.
  • CardTitle: The card title.
  • CardMedia: The card image or video.
  • CardBody: The card body.
  • CardFooter: Mostly used for action buttons.
import {
  Card,
  CardContainer,
  CardHeader,
  CardTitle,
  CardMedia,
  CardBody,
  CardFooter,
} from '@saas-ui/react'

Usage#

Basic card#

<Card>
  <CardBody>
    <Text>Basic card</Text>
  </CardBody>
</Card>

Variants#

Card supports 3 variants, shadow, outline and solid.

<SimpleGrid columns={3} gap="2">
  <Card>
    <CardBody>
      <Text>Shadow (default)</Text>
    </CardBody>
  </Card>
  <Card variant="outline">
    <CardBody>
      <Text>Outline</Text>
    </CardBody>
  </Card>
  <Card variant="solid">
    <CardBody>
      <Text>Solid</Text>
    </CardBody>
  </Card>
</SimpleGrid>

Color schemes#

The outline and solid support color scheme prop.

<SimpleGrid columns={3} gap="2">
  <Card variant="outline" colorScheme="primary">
    <CardBody>
      <Text>Outline</Text>
    </CardBody>
  </Card>
  <Card variant="solid" colorScheme="primary">
    <CardBody>
      <Text>Solid</Text>
    </CardBody>
  </Card>
</SimpleGrid>

Card header#

<Card>
  <CardHeader>
    <CardTitle fontSize="xl">Getting started</CardTitle>
  </CardHeader>
  <CardBody>
    <Text fontSize="md">
      Welcome to Saas UI, in the next steps we will walk you through all the
      basic features of Saas UI.
    </Text>
  </CardBody>
  <CardFooter>
    <Button variant="solid" colorScheme="gray">
      Continue
    </Button>
    <Button>Dismiss</Button>
  </CardFooter>
</Card>

Card media#

<Card maxW="400px">
  <CardHeader>
    <Persona
      name="Eelco Wiersma"
      secondaryLabel="Algarve, Portugal"
      size="md"
      flex="1"
    />
    <IconButton
      icon={<HamburgerIcon />}
      aria-label="More"
      size="sm"
      variant="ghost"
      alignSelf="flex-start"
    />
  </CardHeader>
  <CardMedia height="256px" bgImage="/img/portugal.jpg" />
  <CardBody>
    <Text fontSize="md">
      Currently building amazing things in the sunny Algarve.
    </Text>
  </CardBody>
  <CardFooter>
    <Button variant="solid" colorScheme="primary">
      Contact
    </Button>
    <Spacer />
    <IconButton icon={<FaTwitter />} aria-label="Twitter" />
  </CardFooter>
</Card>

Hoverable card#

Use the isHoverable prop to enable a subtle hover animation on the card.

<SimpleGrid columns={3} gap="2">
  <Card isHoverable>
    <CardBody>
      <Text>Shadow (default)</Text>
    </CardBody>
  </Card>
  <Card isHoverable variant="outline">
    <CardBody>
      <Text>Outline</Text>
    </CardBody>
  </Card>
  <Card isHoverable variant="solid">
    <CardBody>
      <Text>Solid</Text>
    </CardBody>
  </Card>
</SimpleGrid>

Clickable card#

<Card as={LinkBox} width="100%" maxW="400px" isHoverable variant="outline">
  <CardHeader>
    <Avatar src="/chakra-ui-logomark-colored.svg" size="sm" me="2" />
    <LinkOverlay href="#">
      <CardTitle>Chakra UI</CardTitle>
    </LinkOverlay>
  </CardHeader>
  <CardBody>
    <Text fontSize="md" color="muted">
      Chakra UI is a simple, modular and accessible component library that gives
      you the building blocks you need to build your React applications.
    </Text>
  </CardBody>
  <CardFooter>
    <Button
      rightIcon={
        <Icon
          as={FiArrowRight}
          transform="translateX(-5px)"
          transitionProperty="common"
          transitionDuration="normal"
          sx={{ '.saas-card:hover &': { transform: 'translateX(0)' } }}
        />
      }
      variant="link"
      sx={{ '.saas-card:hover &': { color: 'teal.400' } }}
    >
      Learn more
    </Button>
  </CardFooter>
</Card>

Actions#

<SimpleGrid columns={[1, null, 2]} gap="2">
  <Card variant="outline">
    <CardHeader>
      <Icon as={FaGithub} me="2" boxSize="6" />
      <CardTitle>Github</CardTitle>
    </CardHeader>
    <CardBody py={2}>
      <Text color="muted" size="md">
        Link pull requests
      </Text>
    </CardBody>
    <CardFooter spacing={4}>
      <Button variant="outline" colorScheme="green">
        Enabled
      </Button>
      <Button as={Link} variant="link" isExternal>
        Learn more
      </Button>
    </CardFooter>
  </Card>
  <Card variant="outline">
    <CardHeader>
      <Icon as={FaSlack} me="2" boxSize="6" />
      <CardTitle>Slack</CardTitle>
    </CardHeader>
    <CardBody py={2}>
      <Text color="muted" size="md">
        Send push notifications
      </Text>
    </CardBody>
    <CardFooter spacing={4}>
      <Button colorScheme="gray" variant="solid">
        Enable
      </Button>
      <Button as={Link} variant="link" isExternal>
        Learn more
      </Button>
    </CardFooter>
  </Card>
</SimpleGrid>

Props#

The Card component and all sub components accept all Box properties.

Card Props#

action

Description

The header action

Type
React.ReactNode

actions

Description

The card footer actions, will be wrapped in a ButtonGroup

Type
React.ReactNode

avatar

Description

The card avatar

Type
React.ReactNode

isHoverable

Description

Show hover styles when the mouse hovers the card.

Type
boolean

subtitle

Description

This will render the CardHeader with the sub title.

Type
React.ReactNode

title

Description

This will render the CardHeader with the title.

Type
React.ReactNode

variant

Type
"plain" | "outline" | "solid"
Default
"elevated"

CardHeader Props#

action

Description

The header action

Type
React.ReactNode

avatar

Description

The card avatar

Type
React.ReactNode

spacing

Description

The spacing between the avatar and title

Type
SystemProps["margin"]

subtitle

Description

The sub title

Type
React.ReactNode

title

Description

The title

Type
React.ReactNode

CardFooter Props#

spacing

Description

The spacing between buttons

Type
SystemProps['margin']
Default
2

variant

Description

The default button variant

Type
"link" | "outline" | "solid" | "primary" | "secondary" | "ghost" | "unstyled" | "subtle" | "elevated"
Default
"ghost"

Was this helpful?