Card

Bordered surface for grouping related content.

import { Card } from "@ps1ui/core";

Basic

deploy.log

Group related content on a bordered surface.

<Card>
  <Stack direction="column" gap="sm">
    <Heading level={3} size="md">deploy.log</Heading>
    <Text variant="muted">Group related content on a bordered surface.</Text>
  </Stack>
</Card>

In a grid

<Grid columns={{ base: 1, md: 3 }} gap="md">
  <Card>
    <Text variant="muted">01</Text>
  </Card>
  <Card>
    <Text variant="muted">02</Text>
  </Card>
  <Card>
    <Text variant="muted">03</Text>
  </Card>
</Grid>

Props

All native <div> attributes are also accepted.