Components

Card

A bordered surface with consistent padding.

Start a conversation

Ask about the work or how it was built.

ControlsTab through the example to inspect focus.

Example

<Card aria-label="Conversation" padding="xl">
  <Box gap="m">
    <Text as="h2" variant="heading">Start a conversation</Text>
    <Text as="p">Ask about the work or how it was built.</Text>
    <Box align="start"><Button>Ask Rob</Button></Box>
  </Box>
</Card>

Props

Generated from design-system/primitives.tsx. Native HTML and accessibility props are forwarded. className and style are excluded.

Prop	Type	Required	Default
`padding`	`Space`	No	`"xl"`

View Card source · design-system/primitives.tsx:106