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.
How to add a card pair to a page. The file is components/css/role-tier.css.
Link the shared stylesheets once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/role-tier.css"> and badge.css. The page also needs the Material Symbols font. |
| 2. Pair | One .role-tier-pair with two .role-tier cards. Add role-tier--dark to the second. |
| 3. Content | Badge row, name, description, link and three or four .role-tier__feature rows, taken from the comparison table. |
| 4. Link logic | Add goToCompareView() (below) to the page and call it from each link. |
Copy the markup you need.
| Class | Use |
|---|---|
role-tier-pair | The grid that holds two cards. |
role-tier | A card. The base tier. |
role-tier--dark | The extended or administrative tier. |
role-tier__link | The action link. data-state="hover" forces hover (docs only). |
role-quicklinks, role-quicklink | A row of small links above the cards. |
setCompareView()). Without it, only the scroll works.The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.