Card

Groups related content as a label, title, and body. No outline.

Preview

Case study

A quieter interface

Emphasis from weight and spacing, never from a hue.

In action

Case

Studio note

A quieter interface

Emphasis from weight and spacing, never from a hue.

When to use

Use it for

A titled block of copy on the grid: label, title, body.
CardInner for a padded field inside a Nest.

Not for

Framed boxes with shadows; cards have no outline.
Interactive tiles; wrap the title in a Link instead of making the card clickable.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Card, CardBody, CardLabel, CardTitle } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/card.

2. Vendor the source

npx @noorddev/vlak-cli add card

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/card.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Card, CardBody, CardLabel, CardTitle } from "@noorddev/vlak-react";

<Card>
  <CardLabel>Case study</CardLabel>
  <CardTitle>A quieter interface</CardTitle>
  <CardBody>Emphasis from weight and spacing, never from a hue.</CardBody>
</Card>

Props

Card

Also accepts HTMLAttributes<HTMLDivElement>.

CardBody

Also accepts HTMLAttributes<HTMLParagraphElement>.

CardInner

Also accepts HTMLAttributes<HTMLDivElement>.

CardLabel

Also accepts HTMLAttributes<HTMLSpanElement>.

CardTitle

Also accepts HTMLAttributes<HTMLHeadingElement>.

Accessibility

CardTitle renders an <h3>; adjust the heading level with a wrapper when it breaks the outline.
The ref on Card is forwarded to the <div>.

Markup

<div class="rs-card"><span class="rs-card-label">Case study</span><h3 class="rs-card-title">A quieter interface</h3><p class="rs-card-body">Emphasis from weight and spacing, never from a hue.</p></div>

Classes

.rs-card.rs-card-label.rs-card-title.rs-card-body.rs-card-in