 <Card>
  <Flex gap="3" align="center">
    <Avatar.Root
      size="2"
      src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
    />
    <Box>
      <Text as="div" size="2" weight="bold">
        Teodros Girmay
      </Text>
      <Text as="div" size="2" color="gray">
        Engineering
      </Text>
    </Box>
  </Flex>
</Card>

API Reference

This is a Radix Themes component.

Prop	Type	Default
`asChild`	`boolean`	`false`
`size`	`Responsive<"1" \| "2" \| "3" \| "4" \| "5">`	`"1"`
`variant`	`"surface" \| "classic" \| "ghost"`	`"surface"`

The component is based on the div element and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

As another element

Use the asChild prop to render the card as a link or a button. This prop adds styles for the interactive states, like hover and focus.

Quick start

Start building your next project in minutes

 <Card asChild>
  <a href="#">
    <Text as="div" size="2" weight="bold">
      Quick start
    </Text>
    <Text as="div" color="gray" size="2">
      Start building your next project in minutes
    </Text>
  </a>
</Card>

Size

Use the size prop to control the size of the card

Teodros Girmay

Engineering

Teodros Girmay

Engineering

Teodros Girmay

Engineering

 <Flex gap="3" direction="column">
  <Card size="1" style={{ width: 350 }}>
    <Flex gap="3" align="center">
      <Avatar.Root size="2">
        <Avatar.Text>T</Avatar.Text>
      </Avatar.Root>
      <Box>
        <Text as="div" size="2" weight="bold">
          Teodros Girmay
        </Text>
        <Text as="div" size="2" color="gray">
          Engineering
        </Text>
      </Box>
    </Flex>
  </Card>

  <Card size="2" style={{ width: 425 }}>
    <Flex gap="4" align="center">
      <Avatar.Root size="2">
        <Avatar.Text>T</Avatar.Text>
      </Avatar.Root>
      <Box>
        <Text as="div" weight="bold">
          Teodros Girmay
        </Text>
        <Text as="div" color="gray">
          Engineering
        </Text>
      </Box>
    </Flex>
  </Card>

  <Card size="3" style={{ width: 500 }}>
    <Flex gap="4" align="center">
      <Avatar.Root size="3">
        <Avatar.Text>T</Avatar.Text>
      </Avatar.Root>
      <Box>
        <Text as="div" size="4" weight="bold">
          Teodros Girmay
        </Text>
        <Text as="div" size="4" color="gray">
          Engineering
        </Text>
      </Box>
    </Flex>
  </Card>
</Flex>

Variant

Use the variant prop to control the visual style of the card.

Quick start

Start building your next project in minutes

Quick start

Start building your next project in minutes

 <Flex direction="column" gap="3">
  <Card variant="surface">
    <Text as="div" size="2" weight="bold">
      Quick start
    </Text>
    <Text as="div" color="gray" size="2">
      Start building your next project in minutes
    </Text>
  </Card>

  <Card variant="classic">
    <Text as="div" size="2" weight="bold">
      Quick start
    </Text>
    <Text as="div" color="gray" size="2">
      Start building your next project in minutes
    </Text>
  </Card>
</Flex>

With inset content

Use the Inset component to align content flush with the sides of the card.

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

 <Card size="2" style={{ maxWidth: 240 }}>
  <Inset clip="padding-box" side="top" pb="current">
    <img
      src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
      alt="Bold typography"
      style={{
        display: 'block',
        objectFit: 'cover',
        width: '100%',
        height: 140,
        backgroundColor: 'var(--gray-5)',
      }}
    />
  </Inset>
  <Text as="p" size="3">
    <Strong>Typography</Strong> is the art and technique of arranging type to
    make written language legible, readable and appealing when displayed.
  </Text>
</Card>