Three card types ship in the product, all at 16px radius on a white surface
with a 1px #E5E7EB hairline and no shadow. The DS previously published a
“marketplace card” with teal icon tiles, category dots, N MARKETS counters and a gradient top bar,
and a “ProSuite feature card” — none of which exist in Norbielink.
LOB tile
The marketplace product picker. A 60px round grey disc holding the product’s own 38px PNG icon — the same asset the app serves from /insurance-icons/, with a centred two-line label beneath.
| Property | Value |
|---|---|
| Size | 120px wide · height follows the label |
| Surface | #FFFFFF · 1px #E5E7EB · radius 16px · no shadow |
| Padding | 20px 12px · gap 12px, column, centred |
| Icon disc | 60×60px 9999px · #EFEFEF · icon 38×38px |
| Label | 12px / 500 · line-height 15px · #2D3653 · centred |
Promo card
The marketplace highlights rail. A fixed-size image on the left, then an uppercase razz tag, a title, two lines of body, and a razz call to action.
| Part | Value |
|---|---|
| Card | radius 16px · padding 12px · gap 12px · items-stretch |
| Image | 96px wide · radius 12px · overflow hidden |
| Tag | 10px / 700 · uppercase · letter-spacing 1px · #A614C3 |
| Title | 13px / 700 · line-height 16.25px · #2D3653 |
| Body | 11px / 400 · line-height 15.125px · #6B7280 |
| CTA | 11px / 600 · #A614C3 · gap 4px |
Stat card
The KPI row above a table. Each card is a filter: the label and count sit on one row, and selecting a card turns both its border and its number razz.
| Part | Value |
|---|---|
| Card | radius 16px · padding 16px 20px · 1px #E5E7EB · it is a button |
| Head row | flex · items-start · justify-between · gap 12px · margin-bottom 2px |
| Label | 15px / 600 · truncates |
| Number | 24px / 600 · line-height 1 · letter-spacing -0.025em · right-aligned, never shrinks |
| Caption | 11px / 400 · #6B7280 |
| Selected | Border and number both #A614C3 · #4ECDC4 in dark |
| Hover | Unselected border → #D1D5DB · rgba(255,255,255,.20) in dark |