OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Card

Container that groups related content and actions.

Teodros Girmay

Engineering

 <Card style={{ maxWidth: 240 }}>
  <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 style={{ maxWidth: 350 }}>
  <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" maxWidth="350px">
  <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>