Card

import { Card } from '@yarcl/react';

Cardshadow="sm"

Cardshadow="md"

Cardshadow="lg"

Cardpadding="sm", radius="lg"

<Card shadow="md">…</Card>
<Card padding="sm" radius="lg">…</Card>

padding comes from your spacing (default defaults.padding), radius from your radii, shadow from your shadows. No shadow is applied unless you set one.

Composed

Pro plan

Active

Renews on October 12. You can change or cancel your plan at any time.

---

3 seats

---

$36 / month

Manage

Named parts

Use optional Card.Header, Card.Body and Card.Footer when the sections should follow your theme’s part styles:

<Card>
  <Card.Header><Heading level={3}>Plan</Heading></Card.Header>
  <Card.Body><Text>Monthly billing</Text></Card.Body>
  <Card.Footer><Button>Choose plan</Button></Card.Footer>
</Card>

Each part is a div with native props and a regular ref prop. Parts expose data-part="header", "body" and "footer"; the root exposes "root". They have no implicit content or spacing. Configure them through component parts.

Spacing props accept typed breakpoint maps. See responsive props for supported props, defaults and examples.

Props

Prop	Type	Default	Description
as	'article' | 'aside' | 'div' | 'section'	'div'	Element to render.
padding	Responsive<Spacing>config	config.defaults.padding	Inner padding, from the spacing config. Accepts a scalar or breakpoint map.
radius	Radiusconfig	config.defaults.radius	Corner radius, from the radii config.
shadow	Shadowconfig		Elevation, from the shadows config. No shadow when omitted.