Norbielink has one accordion: the correspondence list on a quote or
policy record. A row carries a timestamp and a reference number; opening it reveals the message on a white
card inset inside the row. The toggle is a plus / minus, never a chevron, and it is always
#A614C3.
Correspondence list
Rows are independent — opening one does not close the others. The closed row is
a tinted #FAFAFB block; the open body is a white card inset by 16px on each side.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Specs
| Part | Value |
|---|---|
| Group | display:flex column · gap 12px |
| Row | radius 8px · overflow:hidden · #FAFAFB on 1px #E5E7EB |
| Header | padding 14px 24px · full width · justify-content: space-between |
| Header left | gap 64px — timestamp 13px #1F2937, reference 13px / 600 #A614C3 |
| Toggle | 16×16 lucide plus → minus · #A614C3 in both states · no rotation |
| Body card | margin 0 16px 16px · radius 8px · #fff on 1px #E5E7EB |
| Body caption | padding 12px 20px · border-bottom 1px #E5E7EB · label 12px / 600 uppercase, letter-spacing .08em, #6B7280 |
| Body actions | gap 16px · PRINT is 12px / 600 #A614C3 with letter-spacing .06em and a 16px icon; the second button is icon-only |
| Body text | padding 16px 20px · 13px · line-height 1.625 · #1F2937 |
| Open state is held in a Set, so any number of rows can be open at once. There is no single-open variant. |
| The toggle does not animate. Chevrons in this product always mean a dropdown opens below — using one here would read as a select. That is why the accordion uses plus / minus instead. |
| This is not the same as Collapsible, which wraps a single bordered panel, or the sidebar’s nav group on Navigation, which reveals links rather than content. |
In dark mode the row becomes rgba(255,255,255,.03), the body card #191D35, borders rgba(255,255,255,.08), and the reference turns #4ECDC4 — the only token that changes hue rather than lightness. |