Nue Camp
This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod fermentum.
Usage
import { Card } from "chakra-ui-solid";<Card.Root>
<Card.Header />
<Card.Body />
<Card.Footer />
</Card.Root>Examples
Variants
Use the variant prop to change the visual style of the Card.
Nue Camp
This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nue Camp
This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nue Camp
This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Within Form
Use the Card component within a form to group related fields together.
Sign up
Fill in the form below to create an account
Sizes
Use the size prop to change the size of the Card.
Card - sm
Card - md
Card - lg
With Avatar
Use the Card component to display an avatar.
Nate Foss
@natefoss
Nate Foss has requested to join your team. You can approve or decline their request.
Props
Root
| Prop | Default | Type |
|---|---|---|
size | 'md' | ConditionalValue<'sm' | 'md' | 'lg' | PresetVariant<'card', 'size'>>The padding inside every slot and the title's type scale, as one step. |
variant | 'outline' | ConditionalValue<'elevated' | 'outline' | 'subtle' | PresetVariant<'card', 'variant'>>How the card separates itself from the page — a shadow, a border, or a tinted surface. |
Plus HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.