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 of pending, approved, rejected, cancelled.
• .card-footer — actions row, bordered from the body.

Variants

Approved (full-day)

Pending (meeting)

Rejected

Cancelled

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.