NOTE CARD: Compact left-border-accent tw-card for pinned notes and comments
VARIANTS: Default | Color accents (primary, blue, green, red, orange, magenta, neutral) | Compact (.note-sm)

Used in drawer panels, record sidebars, and timeline detail areas to display notes, comments, and pinned observations. Left border colour distinguishes note categories. Icon is optional and renders inline with text.

Default Note

Base: Left-border accent in primary colour. Icon is placed inline inside .note-text, flowing naturally with the text. Card has hover and focus-visible states for interactivity. Use <time> for timestamps.

Follow up required regarding scholarship inquiry. Parent expressed interest in music programme.
Jack Davies ·
Toured the school on 15 Jan. Very positive impression, asked about boarding options.
Sarah Thompson ·
<div class="tw-note" tabindex="0"><div class="tw-note-content"><div class="tw-note-text"><i class="fa-regular fa-file-lines tw-note-icon"></i> Text...</div><div class="tw-note-meta">Author &middot; <time datetime="...">...</time></div></div></div>

Without Icon

No icon: Simply omit the <i> element. The note renders cleanly with just text and metadata.

A note without an icon — just text content and metadata.
Admin ·
Application approved after review. All documents verified and complete.
Registrar ·
Missing birth certificate — requested from parent via email.
Admin ·
<div class="tw-note"><div class="tw-note-content"><div class="tw-note-text">Text only...</div><div class="tw-note-meta">...</div></div></div>

Color Variants

Accents: Add a colour modifier class alongside .note to change the left-border accent. Default is primary (dark blue). Colours follow the avatar/timeline palette.

Primary accent — default dark blue border.
Admin ·
Blue accent — email or communication related.
System ·
Green accent — positive or completed.
Sarah T ·
Red accent — urgent or flagged.
Head of Year ·
Orange accent — caution or warning.
Registrar ·
Magenta accent — bookmarked or categorised.
Admin ·
Neutral accent — general system notes.
System ·
<div class="tw-note tw-note-green">...</div>

Narrow Width (Text Wrapping)

Wrapping: In narrow containers, the icon stays inline on the first line while text wraps naturally below.

Parent called to discuss scholarship options for Year 7 entry. Very interested in the music programme and would like to arrange a second visit with the Head of Music before submitting the application.
Jack Davies ·
Welcome email sent to parent with prospectus attached. Awaiting response regarding tour availability for next week.
System ·
Deadline approaching — medical form still outstanding. Second reminder sent via SMS on 3 Feb. Parent acknowledged but not yet submitted.
Registrar ·
Shown at max-w-xs (320px) to demonstrate wrapping behaviour.

Compact Variant (.note-sm)

Compact: Tighter spacing and smaller text for drawer panels and narrow sidebars. Add .note-sm alongside .note.

Compact note with icon for drawer panels with tighter spacing.
Jack Davies ·
Compact blue variant without icon in a narrow container.
System ·
Compact green with icon.
Sarah T ·
<div class="tw-note tw-note-sm" tabindex="0">...</div>

In Context (Sidebar Section)

Example: Typical usage inside a record sidebar with a section header and multiple notes.

Notes

Follow up required regarding scholarship inquiry. Parent expressed interest in music programme.
Jack Davies ·
Welcome email sent with prospectus attached.
System ·
Application approved after review. All documents verified.
Registrar ·

Empty State

Empty: When no notes exist, show a helpful message with an optional action.

Notes

No notes yet