Card
The Card displays content related to a single subject, composed of Root, Header, Body, Footer, Title, Description, and Cover parts.
Team members
Manage your team and their roles.
This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Team members
Manage your team and their roles.
This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
// apps/docs/src/components/examples/card/default/react.tsx
import { Card, CardHeader, CardBody, CardFooter, CardTitle, CardDescription, Button } from '@cloudvoyant/helical-react';
export default function ReactCardDefault() {
return (
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle>Team members</CardTitle>
<CardDescription>Manage your team and their roles.</CardDescription>
</CardHeader>
<CardBody>
<p className="text-sm text-muted-foreground">
This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</CardBody>
<CardFooter>
<Button variant="solid" color="primary" size="sm">
Add member
</Button>
<Button variant="outline" color="primary" size="sm">
Cancel
</Button>
</CardFooter>
</Card>
);
}<!-- apps/docs/src/components/examples/card/default/svelte.svelte -->
<script lang="ts">
import { Card, CardHeader, CardBody, CardFooter, CardTitle, CardDescription, Button } from '@cloudvoyant/helical-svelte';
</script>
<Card class="w-full max-w-sm">
<CardHeader>
<CardTitle>Team members</CardTitle>
<CardDescription>Manage your team and their roles.</CardDescription>
</CardHeader>
<CardBody>
<p class="text-sm text-muted-foreground">
This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</CardBody>
<CardFooter>
<Button variant="solid" color="primary" size="sm">Add member</Button>
<Button variant="outline" color="primary" size="sm">Cancel</Button>
</CardFooter>
</Card>Examples
Horizontal
Horizontal card
The cover bleeds to the left, top, and bottom edges.
Use orientation="horizontal" with a flush cover and wrap the content in a flex column.
Horizontal card
The cover bleeds to the left, top, and bottom edges.
Use orientation="horizontal" with a flush cover and wrap the content in a flex column.
// apps/docs/src/components/examples/card/horizontal/react.tsx
import { Card, CardHeader, CardBody, CardTitle, CardDescription, CardCover } from '@cloudvoyant/helical-react';
import { User } from 'lucide-react';
export default function ReactCardHorizontal() {
return (
<Card orientation="horizontal" className="w-full max-w-2xl">
<CardCover className="w-1/3">
<div className="flex h-full min-h-40 w-full items-center justify-center bg-gradient-to-br from-primary/40 to-accent/50">
<User className="size-8 text-primary" />
</div>
</CardCover>
<div className="flex flex-1 flex-col gap-4">
<CardHeader>
<CardTitle>Horizontal card</CardTitle>
<CardDescription>The cover bleeds to the left, top, and bottom edges.</CardDescription>
</CardHeader>
<CardBody>
<p className="text-sm text-muted-foreground">
Use orientation="horizontal" with a flush cover and wrap the content in a flex column.
</p>
</CardBody>
</div>
</Card>
);
}<!-- apps/docs/src/components/examples/card/horizontal/svelte.svelte -->
<script lang="ts">
import { Card, CardHeader, CardBody, CardTitle, CardDescription, CardCover } from '@cloudvoyant/helical-svelte';
import { User } from 'lucide-svelte';
</script>
<Card orientation="horizontal" class="w-full max-w-2xl">
<CardCover class="w-1/3">
<div class="flex h-full min-h-40 w-full items-center justify-center bg-gradient-to-br from-primary/40 to-accent/50">
<User class="size-8 text-primary" />
</div>
</CardCover>
<div class="flex flex-1 flex-col gap-4">
<CardHeader>
<CardTitle>Horizontal card</CardTitle>
<CardDescription>The cover bleeds to the left, top, and bottom edges.</CardDescription>
</CardHeader>
<CardBody>
<p class="text-sm text-muted-foreground">
Use orientation="horizontal" with a flush cover and wrap the content in a flex column.
</p>
</CardBody>
</div>
</Card>Override
Overridden heading
This title renders as an h2 with a larger size instead of the default h3.
Use asChild to change the heading level, and a text-* class to change the size.
Overridden heading
This title renders as an h2 with a larger size instead of the default h3.
Use asChild to change the heading level, and a text-* class to change the size.
// apps/docs/src/components/examples/card/override/react.tsx
import { Card, CardHeader, CardBody, CardTitle, CardDescription } from '@cloudvoyant/helical-react';
export default function ReactCardOverride() {
return (
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle asChild>
<h2 className="text-xl">Overridden heading</h2>
</CardTitle>
<CardDescription>This title renders as an h2 with a larger size instead of the default h3.</CardDescription>
</CardHeader>
<CardBody>
<p className="text-sm text-muted-foreground">
Use asChild to change the heading level, and a text-* class to change the size.
</p>
</CardBody>
</Card>
);
}<!-- apps/docs/src/components/examples/card/override/svelte.svelte -->
<script lang="ts">
import { Card, CardHeader, CardBody, CardTitle, CardDescription } from '@cloudvoyant/helical-svelte';
</script>
{#snippet heading(props)}
<h2 {...props({ class: 'text-xl' })}>Overridden heading</h2>
{/snippet}
<Card class="w-full max-w-sm">
<CardHeader>
<CardTitle asChild={heading} />
<CardDescription>This title renders as an h2 with a larger size instead of the default h3.</CardDescription>
</CardHeader>
<CardBody>
<p class="text-sm text-muted-foreground">
Use asChild to change the heading level, and a text-* class to change the size.
</p>
</CardBody>
</Card>Sizes
Card - sm
Small card.
Card - md
Medium card.
Card - lg
Large card.
Card - sm
Small card.
Card - md
Medium card.
Card - lg
Large card.
// apps/docs/src/components/examples/card/sizes/react.tsx
import { Card, CardHeader, CardBody, CardTitle } from '@cloudvoyant/helical-react';
export default function ReactCardSizes() {
return (
<div className="flex flex-col gap-4">
<Card size="sm">
<CardHeader>
<CardTitle>Card - sm</CardTitle>
</CardHeader>
<CardBody>
<p className="text-sm text-muted-foreground">Small card.</p>
</CardBody>
</Card>
<Card size="md">
<CardHeader>
<CardTitle>Card - md</CardTitle>
</CardHeader>
<CardBody>
<p className="text-sm text-muted-foreground">Medium card.</p>
</CardBody>
</Card>
<Card size="lg">
<CardHeader>
<CardTitle>Card - lg</CardTitle>
</CardHeader>
<CardBody>
<p className="text-sm text-muted-foreground">Large card.</p>
</CardBody>
</Card>
</div>
);
}<!-- apps/docs/src/components/examples/card/sizes/svelte.svelte -->
<script lang="ts">
import { Card, CardHeader, CardBody, CardTitle } from '@cloudvoyant/helical-svelte';
</script>
<div class="flex flex-col gap-4">
<Card size="sm">
<CardHeader>
<CardTitle>Card - sm</CardTitle>
</CardHeader>
<CardBody>
<p class="text-sm text-muted-foreground">Small card.</p>
</CardBody>
</Card>
<Card size="md">
<CardHeader>
<CardTitle>Card - md</CardTitle>
</CardHeader>
<CardBody>
<p class="text-sm text-muted-foreground">Medium card.</p>
</CardBody>
</Card>
<Card size="lg">
<CardHeader>
<CardTitle>Card - lg</CardTitle>
</CardHeader>
<CardBody>
<p class="text-sm text-muted-foreground">Large card.</p>
</CardBody>
</Card>
</div>Variants
Outline
The default variant with a border and subtle shadow.
Elevated
No border with a deeper shadow.
Subtle
A muted background with no border.
Outline
The default variant with a border and subtle shadow.
Elevated
No border with a deeper shadow.
Subtle
A muted background with no border.
// apps/docs/src/components/examples/card/variants/react.tsx
import { Card, CardHeader, CardBody, CardTitle } from '@cloudvoyant/helical-react';
export default function ReactCardVariants() {
return (
<div className="grid gap-4 sm:grid-cols-3">
<Card>
<CardHeader>
<CardTitle>Outline</CardTitle>
</CardHeader>
<CardBody>
<p className="text-sm text-muted-foreground">The default variant with a border and subtle shadow.</p>
</CardBody>
</Card>
<Card variant="elevated">
<CardHeader>
<CardTitle>Elevated</CardTitle>
</CardHeader>
<CardBody>
<p className="text-sm text-muted-foreground">No border with a deeper shadow.</p>
</CardBody>
</Card>
<Card variant="subtle">
<CardHeader>
<CardTitle>Subtle</CardTitle>
</CardHeader>
<CardBody>
<p className="text-sm text-muted-foreground">A muted background with no border.</p>
</CardBody>
</Card>
</div>
);
}<!-- apps/docs/src/components/examples/card/variants/svelte.svelte -->
<script lang="ts">
import { Card, CardHeader, CardBody, CardTitle } from '@cloudvoyant/helical-svelte';
</script>
<div class="grid gap-4 sm:grid-cols-3">
<Card>
<CardHeader>
<CardTitle>Outline</CardTitle>
</CardHeader>
<CardBody>
<p class="text-sm text-muted-foreground">The default variant with a border and subtle shadow.</p>
</CardBody>
</Card>
<Card variant="elevated">
<CardHeader>
<CardTitle>Elevated</CardTitle>
</CardHeader>
<CardBody>
<p class="text-sm text-muted-foreground">No border with a deeper shadow.</p>
</CardBody>
</Card>
<Card variant="subtle">
<CardHeader>
<CardTitle>Subtle</CardTitle>
</CardHeader>
<CardBody>
<p class="text-sm text-muted-foreground">A muted background with no border.</p>
</CardBody>
</Card>
</div>With Image
Flush cover
The cover bleeds edge-to-edge.
A flush cover reaches the card boundaries.
Inset cover
The cover keeps the card padding.
An inset cover stays within the padding with rounded corners.
Flush cover
The cover bleeds edge-to-edge.
A flush cover reaches the card boundaries.
Inset cover
The cover keeps the card padding.
An inset cover stays within the padding with rounded corners.
// apps/docs/src/components/examples/card/with-image/react.tsx
import { Card, CardHeader, CardBody, CardTitle, CardDescription, CardCover } from '@cloudvoyant/helical-react';
export default function ReactCardWithImage() {
return (
<div className="flex flex-col gap-4 sm:flex-row">
<Card className="w-full max-w-sm">
<CardCover>
<div className="h-40 w-full bg-gradient-to-br from-primary/40 to-accent/50" />
</CardCover>
<CardHeader>
<CardTitle>Flush cover</CardTitle>
<CardDescription>The cover bleeds edge-to-edge.</CardDescription>
</CardHeader>
<CardBody>
<p className="text-sm text-muted-foreground">A flush cover reaches the card boundaries.</p>
</CardBody>
</Card>
<Card className="w-full max-w-sm">
<CardCover variant="inset">
<div className="h-40 w-full bg-gradient-to-br from-primary/40 to-accent/50" />
</CardCover>
<CardHeader>
<CardTitle>Inset cover</CardTitle>
<CardDescription>The cover keeps the card padding.</CardDescription>
</CardHeader>
<CardBody>
<p className="text-sm text-muted-foreground">An inset cover stays within the padding with rounded corners.</p>
</CardBody>
</Card>
</div>
);
}<!-- apps/docs/src/components/examples/card/with-image/svelte.svelte -->
<script lang="ts">
import { Card, CardHeader, CardBody, CardTitle, CardDescription, CardCover } from '@cloudvoyant/helical-svelte';
</script>
<div class="flex flex-col gap-4 sm:flex-row">
<Card class="w-full max-w-sm">
<CardCover>
<div class="h-40 w-full bg-gradient-to-br from-primary/40 to-accent/50" />
</CardCover>
<CardHeader>
<CardTitle>Flush cover</CardTitle>
<CardDescription>The cover bleeds edge-to-edge.</CardDescription>
</CardHeader>
<CardBody>
<p class="text-sm text-muted-foreground">A flush cover reaches the card boundaries.</p>
</CardBody>
</Card>
<Card class="w-full max-w-sm">
<CardCover variant="inset">
<div class="h-40 w-full bg-gradient-to-br from-primary/40 to-accent/50" />
</CardCover>
<CardHeader>
<CardTitle>Inset cover</CardTitle>
<CardDescription>The cover keeps the card padding.</CardDescription>
</CardHeader>
<CardBody>
<p class="text-sm text-muted-foreground">An inset cover stays within the padding with rounded corners.</p>
</CardBody>
</Card>
</div>API Reference
Card
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant |
'outline' | 'elevated' | 'subtle' |
'outline' |
outline = border + subtle shadow; elevated = no border + deeper shadow; subtle = muted background, no border. |
size |
'sm' | 'md' | 'lg' |
'md' |
Padding and gap scale. |
orientation |
'vertical' | 'horizontal' |
'vertical' |
horizontal lays the media and content side by side. |
className / class |
string |
— | Merged last via cn. |
CardCover
A cover slot that accepts an image, icon, or any element. variant="flush" (default) bleeds the media edge-to-edge to the card’s boundaries, adapting to the root’s orientation (top/left/right for vertical, left/top/bottom for horizontal). variant="inset" keeps the card’s padding around the media with rounded corners.
| Prop | Type | Default | Description |
|---|---|---|---|
variant |
'flush' | 'inset' |
'flush' |
flush bleeds to the card’s edges (no rounding on the cover); inset stays within the padding with rounded corners. |
orientation |
'vertical' | 'horizontal' |
inherited | Overrides the root’s orientation for the cover bleed. |
className / class |
string |
— | Merged last via cn. |
Parts
Card, CardHeader, CardBody, CardFooter, CardTitle (renders an <h3>), CardDescription (renders a <p>), and CardCover are exported from both @cloudvoyant/helical-react and @cloudvoyant/helical-svelte.
Accessibility
Renders native <div>s with a semantic <h3> for the title; no roles or keyboard handling are required.