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.
Every example on this page is the real component, not a picture. There is no Figma component.
Choose the link state, the number of features and the names of the two cards, and the pair and its code update. Below 640px each card stacks its features under the text; from 769px the two cards sit next to each other. Resize the window to see both.
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 further down the page.
It is an experiment, built on the comparison pages (feature-comparison-roles.html, e-handelspartner.html). There is no Figma component, so the values are the project’s own. A pair has a light card for the base tier and a dark card for the extended or administrative tier. Each card has a badge, a name, a description, a link and three or four feature strips.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use a role tier card pair. Specifications holds the values: tokens, type, sizes, measurements and requirements. Code shows how to add one to a page.
Use a card pair above a comparison table, to help the reader pick the right tier before the detail. Use it to:
A pair holds two cards, a light one and a dark one. For three or more tiers, go straight to the comparison table.
A single graphical link is a Tile link, not a card pair.
| You need… | Use |
|---|---|
| to introduce two tiers of one category and link to the full table | Role tier card pair |
| to compare many roles in detail | A comparison table (the product table component is planned; the table of these pages is the Docs table) |
| one prominent link | Tile link |
The info block (1 to 4) and the feature strips (5) sit side by side from 640px and stack below it.
Pairs stack one under another, one per category. The order of the pairs follows the order of the tabs in the comparison table below them.
A compact row with one small System-style link per role, above the cards. It uses the same goToCompareView() as the card links.
The only interactive part is the link. It has no underline when enabled; the label is underlined on hover and the color changes. Hover is forced on this page; in your code it comes from :hover.
| State | Base card | Dark card |
|---|
A card has no sizes. It fills half of the row from 769px and the whole row below it, and its parts keep their size. The values are under Sizes in Specifications.
The two cards sit in one column below 769px and in two columns from 769px. Inside a card the text block takes 55% and the feature strips 45% from 640px; below 640px the strips sit under the text.
The light card uses the white surface and primary text. The dark card uses surface-100 with the accent color on the name and the icon. Token names and values are under Design Tokens in Specifications.
The link is the only interactive part. It switches the active tab of the comparison table before it scrolls, by calling the table’s own setCompareView(), and it scrolls to the table with the header offset.
The cards change at 640px (strips beside or under the text) and at 769px (one or two cards per row, larger type and padding). Tablet (640 to 768px) shows the strips beside the text, but one card per row.
The Specifications page has no Breakpoint control: the card changes at 640 and 769px, and the control only switches at 769px. Resize the window instead.
All requirements are listed under Accessibility Requirements in Specifications.
The link is reached with Tab and opened with Enter. It shows a 2px focus ring on keyboard focus.
The icon is decorative (aria-hidden="true"). The link label names the tier it compares, for example “Compare Administrator in the table”.