Card
A padded block that groups related content, such as a summary metric or a set of settings. It has no border or background of its own unless it is a link.
Active projects
12
Across three teams
Code
demo.tsx
import {Card} from '@earendil-works/elanor-react';
export default function CardDemo() {
return <Card label="Active projects" value="12" description="Across three teams" />;
}Usage
import {Card} from '@earendil-works/elanor-react';
<Card label="Active projects" value="12" description="Across three teams" />;label, value, and description lay out a summary metric. Children replace that layout.
Custom content
Code
custom-content.tsx
import {Card, Heading, Link, Stack, Text} from '@earendil-works/elanor-react';
export default function CardCustomContent() {
return (
<Card>
<Stack gap="small">
<Heading level={3}>Workspace settings</Heading>
<Text>Manage members, billing, and security for your workspace.</Text>
<Link href="#">Open settings</Link>
</Stack>
</Card>
);
}Link
Use render={<a href="…" />} to make the whole card a link. Linked cards get a border, so the whole target is visible.
Code
link.tsx
import {Card, Heading, Text} from '@earendil-works/elanor-react';
export default function CardLink() {
return (
<Card render={<a href="#" />}>
<Heading level={3}>Workspace settings</Heading>
<Text>Manage members, billing, and security for your workspace.</Text>
</Card>
);
}The link’s accessible name is all of the card’s text, so keep it short. Don’t put other links or buttons inside; use custom content with a separate link instead.
API
Card
A padded block for related content. Renders a div by default; render an <a> to make the whole card a link, which gets hover and focus styles.
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | - | Names the metric, such as "Active projects". Ignored when children is set. |
value | ReactNode | - | The metric, such as a count. Ignored when children is set. |
description | ReactNode | - | Supporting text below the metric. Ignored when children is set. |
padded | boolean | true | Adds inner padding. Set false for edge-to-edge content. |
children | ReactNode | - | Custom content, replacing the metric layout. |
Renders <div>. Also accepts its HTML attributes, ref, and render.