An inline banner that asks the user to look at something, optionally with one action. Norbielink has a single alert: a neutral surface with the brand gradient as the only accent. The alert itself has no severity variants — it is always neutral. Severity lives elsewhere: status badges carry the product’s teal / amber / red status map, and destructive confirmation uses the red dialog on the Alert Dialog page.
Pending updates from recent edits
The ITC record is behind. Review and push the changes.
<div class="alert"> <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke-width="2"> <circle cx="12" cy="12" r="10"/> <line x1="12" x2="12" y1="8" y2="12"/> <line x1="12" x2="12.01" y1="16" y2="16"/> </svg> <div class="alert-body"> <div class="alert-title">Pending updates from recent edits</div> <div class="alert-desc">The ITC record is behind. Review and push the changes.</div> </div> <button class="alert-action">Review Updates</button> </div>
Installation
Built with pure HTML and CSS. Include ds-shared.css in your project.
pnpm add @norbielink/ds
Usage
Import
<link rel="stylesheet" href="ds-shared.css">
Basic structure
<div class="alert"> <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke-width="2"> <circle cx="12" cy="12" r="10"/> <line x1="12" x2="12" y1="8" y2="12"/> <line x1="12" x2="12.01" y1="16" y2="16"/> </svg> <div class="alert-body"> <div class="alert-title">Pending updates from recent edits</div> <div class="alert-desc">The ITC record is behind. Review and push the changes.</div> </div> <button class="alert-action">Review Updates</button> </div>
Examples
Without an action
The action is optional. Drop the button when the alert only reports state and there is nothing to click.
This agency has no appointed carriers
Quotes cannot be bound until at least one carrier appointment is active.
Title only
The description is optional too — a single line keeps the banner at 44px.
3 users are waiting for approval
API Reference
Parts
| Class | Required | Notes |
|---|---|---|
alert | Yes | The banner. 12px radius, 16px padding, 12px gap, max-width 760px |
alert-icon | Yes | 20×20 stroke SVG, gradient stroke, stroke-width 2 — not a filled Material icon |
alert-body | Yes | Wraps title + description, flex:1; min-width:0 |
alert-title | Yes | 13px / 600, gradient text |
alert-desc | No | 12px, muted. Omit for a single-line banner |
alert-action | No | Trailing button, solid brand gradient, 8px radius |
Tokens
| Property | Light | Dark |
|---|---|---|
| Surface | #F9FAFB | rgba(255,255,255,.04) |
| Border | 1px #E5E7EB | 1px rgba(255,255,255,.12) |
| Icon stroke | #5C2ED4 → #A614C3 | #A855F7 → #D946EF |
| Title | #5C2ED4 → #A614C3 | #A855F7 → #D946EF |
| Description | #6B7280 | #8B8FA8 |
| Action | linear-gradient(90deg, #5C2ED4 0%, #A614C3 65%), white text, hover brightness(1.10) | |
Don't
| Tint the surface by severity. Norbielink has no info / success / warning / error alert. |
| Use a filled Material icon — the alert icon is a 2px stroke outline. |
| Add a left colour bar. The banner has a full 1px border, not a 3px rail. |
| Give the alert more than one action. |