Quaff

QCard

Cards group information and actions around a single subject. Combine content and action sections on a filled, bordered, or elevated surface.

THE LITTLE PRINT CLUB

Print a little joy

Saturday, 10:30 · Paper Room

info QCard API Source
interface QCardProps extends HTMLAttributes<HTMLElement>
bordered
?: boolean = false
Whether the component should have a border.
fill
?: boolean | QCardFillColors = false
Defines the fill color of the card.
flat
?: boolean = false
Use the flat design for the card, removing its elevation.
rounded
?: boolean = false
Adds border radius to the card to round its corners.
info QCardActions API Source
interface QCardActionsProps extends HTMLAttributes<HTMLElement>
align
?: UseAlignOptions = undefined
No description provided.
vertical
?: boolean = false
Lays out the action items vertically.

Usage

Card Variants
Cards have elevation by default. Use bordered for an outline or flat to remove the shadow.
ELEVATED
A window of sunshine
21°

A good afternoon to take the long way home.

BORDERED
Travel light

The essentials for a day away.

Water bottle A good book
FLAT
Just one more chapter

Three short reads for a quiet weekend.

Media and Horizontal Sections
Combine images and text with a horizontal section. Grid classes let the content stack on smaller screens.
A green drink garnished with fresh mint and a slice of lime
SOMETHING REFRESHING
Mint, lime & a little fizz

A bright, alcohol-free cooler for slow afternoons.

5 minutes Serves one
Structured Card Content
Use sections for a byline, heading, and supporting text. Add rounded for softer corners.
Maya Lee
The balcony journal · 2 min read
A tiny garden, five floors up

Three pots, a handful of herbs, and a sunny corner. Sometimes a little green is all it takes.

Fill Colors
Use fill for a neutral surface, or choose primary, secondary, or tertiary. Each includes a matching text color.
Saved ideas
12

For a rainy day

Fresh air
42 min

A little time outside

Reading streak
7 days

One chapter at a time

Little victories
4 of 5

Things off your mind

Card Actions
Set align on QCardActions to position its buttons, or use vertical to stack them. Try saving the bag or adding it to your basket.
Vertical actions
Rounded corners
PACK LESS. WANDER MORE.
The day-away bag

Sand · 18 litres · €48

Room for the essentials, and a little adventure.

Privacy Policy