A role tier card pair introduces two tiers of one category side by side, for example Standard and Administrator, and links on to the full comparison table.
Tokens, type, sizes, measurements and requirements. The values come from the live token package and from the comparison pages; there is no Figma component.
Resolved from the live token package.
| Card | Part | Token | Value |
|---|
| Part | Base card | Dark card (.role-tier--dark) |
|---|---|---|
| Background | surface-raised-primary | surface-100 |
| Border | border-primary | surface-90 |
| Title and icon | text-primary | accent-default |
| Description | text-secondary | text-secondary-inverted |
| Link | text-action-primary, hover -hover | text-action-primary-inverted, hover -hover |
| Feature strips | surface-05, lines border-primary | surface-90, lines white at 12% |
Open point: the line between the feature strips on the dark card is rgba(255, 255, 255, 0.12). There is no token for white at 12%, so it is written out with a comment in the CSS.
| Element | Token | Mobile | Desktop (769px+) |
|---|---|---|---|
| Name | title-lg, weight 600 | 20/24, 0 | 24/28, 0 |
| Description | body-md | 16/22, 0.32px | 17/24, 0.32px |
| Link | Action link, Medium, Bold (600), 24px icon, gap 6px | 16/24, 0.32px | 17/24, 0.32px |
| Feature | body-sm | 14/20, 0.36px | 14/20, 0.36px |
| Quick link | System, small | 14/14, 0.56px, uppercase, 600 | The same |
| Part | Value |
|---|---|
| Pair | 1 column below 769px, 2 columns from 769px, gap 24px; stacked pairs 24px (xs) and 32px (md and up) apart |
| Card | Column below 640px, row from 640px; 1px border, sharp corners |
| Info block | 24px padding (32px from 769px), gap 8px, 55% of the width |
| Feature strip | Min height 56px, 16px padding, text centered; 45% of the width |
| Quick link | Height 32px, padding 6px 12px, gap 6px, icon 16px |
A card has one size. The parts change with the breakpoint, as the table shows.
| Attribute | Mobile (below 769px) | Desktop (769px+) |
|---|---|---|
| Info block padding | 24px | 32px |
| Gap inside the info block | 8px | 8px |
| Gap between badge row and name | 12px (8px gap + 4px margin) | 12px |
| Link top margin | 8px | 8px |
| Feature strip | min 56px high, 16px padding | The same |
| Card border | 1px | 1px |
| Gap between the two cards | 24px | 24px |
| Gap between stacked pairs | 24px | 32px |
The card changes at 640px and at 769px, and the Breakpoint control only switches at 769px, so there is no measurement figure and no Breakpoint control. The values are read from the component.
The values as spacing tokens.
| Part | Value |
|---|---|
| Info block padding, mobile | space-24 |
| Info block padding, desktop | space-32 |
| Gap in the info block, link top margin | space-8 |
| Feature strip padding | space-16 |
| Gap, icon to link label | 6px (no spacing token) |
| State | Link | Rest of the card |
|---|---|---|
| Enabled | No underline. Base: text-action-primary. Dark: text-action-primary-inverted. | Static. |
| Hover | Label underlined. Color moves to the -hover token of its card. | Static. |
| Focus | 2px ring, border-focus, 2px outside (keyboard only). | Static. |
The card itself has no hover, active or disabled state.
| Element | Class | Notes |
|---|---|---|
| Pair | role-tier-pair | A grid of two cards. Several pairs stack. |
| Card | role-tier, role-tier--dark | Light by default; --dark for the extended tier. |
| Info block | role-tier__info | Holds the badge row, name, description and link. |
| Badge row | role-tier__badge-row | role-tier__icon and a badge-basic. |
| Name, description | role-tier__name, role-tier__desc | Paragraphs. |
| Link | role-tier__link | role-tier__link-label and role-tier__link-icon. |
| Feature strips | role-tier__features, role-tier__feature | Three or four rows. |
| Quick links | role-quicklinks, role-quicklink | A row of small links above the cards. |
A pair fills its container. Two cards share the row equally from 769px.
| Topic | Rule |
|---|---|
| Link | Switches the active tab in the table before scrolling, by calling the table’s own setCompareView(). Call event.preventDefault() so the anchor does not snap mid-scroll. |
| Scroll offset | Scroll to the section with the --header-top-h offset, never a plain scrollIntoView(). |
| Feature strips | Three or four rows taken from rows that really exist in the comparison table and are specific to that role. |
| Order | The pairs follow the order of the tabs. |
| Motion | The link color changes with duration-fast-3 and ease-standard. |
Open points: no Figma component. The card is built for the comparison pages, and the link needs their table script.
| Topic | Requirement |
|---|---|
| Link | A real <a> with a label that names the tier. The click handler calls preventDefault() and moves focus or scroll to the table. |
| Icons | The tier icon and the arrow are decorative: aria-hidden="true". |
| Focus | Keyboard focus shows a 2px ring (border-focus) 2px outside the link. |
| Contrast | Text on the dark card uses the inverted tokens (text-secondary-inverted on surface-100). |
| Order | The reading order is badge, name, description, link, then the features. |