Card

Hairline frame; label, title, body.

Case study

A quieter interface

Emphasis from weight and spacing, never from a hue.

Install

npx raster add card

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>

React

import { Card, CardBody, CardLabel, CardTitle } from "@/components/raster/card";

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

Classes

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