Booking card
Component
Usage
The booking card is the primary way a booking is rendered in lists and on the my-bookings page. It carries the date, purpose, key details, status badge, and a footer with available actions.
Anatomy
.card— white surface with a warm rule border..card-body— serif purpose headline, sans-serif meta text..badge.badge-<status>— one ofpending,approved,rejected,cancelled..card-footer— actions row, bordered from the body.
Variants
Approved (full-day)
12. mai 2026
Bursdagsfest
Godkjent Heldag Offentlig
1. etasje · Kjøkken
Kari Nordmann · kari@example.no
Pending (meeting)
18. mai 2026
Borettslagsmøte
Ubekreftet Møte Privat
2. etasje
Ola Hansen · ola@example.no
Rejected
20. mai 2026
Privat selskap
Avslått Heldag
Per Olsen · per@example.no
Cancelled
25. mai 2026
Kurs — maling på silke
Avbestilt Heldag
Anne Berg · anne@example.no
Notes
- The card never tints its background by status — the badge carries the signal alone. This keeps the list visually calm when many bookings are shown together.
- The cancelled variant omits the footer because no actions apply.
- Card headline uses serif (
.card-body h1); meta text uses sans.