Overview
Overview
Shared components are the default on cardano.org. Before you write a component or page markup, find your need in the table below and use the component it points to. If a component almost fits, extend it with an additive prop instead of copying it. The Component Guidelines explain when a page-specific component is fine and what a new shared component needs.
Find the right component
Page structure
| I need | Use |
|---|---|
| A page hero with title, text, and banner | Site Hero. The homepage uses Welcome Hero |
| An icon framed in a rounded tile | Icon Hero |
| A complete explainer page with hero, sections, FAQ, and call to action | Explainer Page |
| A page shell for an /insights data page | Insights Layout, Insights Footer |
| Open Graph and Twitter card meta tags | Open Graph Info |
| Content constrained to the page width | Boundary Box |
| A section background (zoom, plain, light) | Background Wrapper |
| Vertical spacing between blocks | Spacer Box |
| A labeled section divider with an anchor | Divider |
| Decorative lines that connect sections | Connection Line |
Text and layout
| I need | Use |
|---|---|
| A section title with text, list, and optional button | Title With Text |
| A large title on the left, text and button on the right | Featured Title With Text |
| A chart | EChart |
| Headline numbers, alone or in a row of equal columns | Stat Figure |
| A responsive grid of cards or tiles that wraps by item width | Grid. For filterable app cards use App Grid |
| Plain paragraphs in one or two columns | One Column Box, Two Column Box |
| Main content with a sidebar | Two Column Layout |
| A dotted icon illustration next to text | Dotted Image With Text |
| Alternating rows of icon, title, and text | Proof Points List |
| A highlighted note with icon and accent border | Highlight Callout |
| A call to action band | CTA One Column, CTA Two Column |
| A call to action band that closes a page on the normal background | Page CTA |
| A role or persona card | Role Card |
| A title with icon links to Cardano's social channels | Follow Cardano |
| A small status label | Status Pill |
| A closing callout that invites readers to fix the page on GitHub | Edit On GitHub Callout |
| A row of link cards to related pages at the end of a page | Link Card Row |
| A logo or avatar next to a name, with letters when the image is missing | Logo Tile |
Interaction
| I need | Use |
|---|---|
| Tabs that switch between panels, as pills or in a layout of your own | Tabs |
| An FAQ or other expandable questions | FAQ Section for an FAQ with its own "FAQ" heading, Accordion under a heading of your own |
| A dialog opened from a button | Modal |
| A copy button that says "Copied" for a moment | The useCopyToClipboard hook from src/utils/useCopyToClipboard.js, copyText for a plain copy, or shareOrCopy for a share button that copies where the browser cannot share |
| An image that shows something else when it fails to load, including images that failed before the page hydrated | The useImageFallback hook from src/utils/useImageFallback.js, or Logo Tile for a logo with letters as fallback |
A deep link such as #faq-lose-ada that opens or scrolls to something, on load and when the hash changes | The useHashTarget hook from src/utils/useHashTarget.js, or useHashTab for Tabs |
| A contact or sign-up form managed in HubSpot | HubSpot Form |
| A horizontal row of cards with scroll arrows | Horizontal Scroller |
| Previous and next buttons to step through epochs | Insights Epoch Nav |
| A slider that selects a range of epochs and remembers it | Epoch Range Slider |
| Two glossary terms from a category | Term Explainer |
Topic widgets
| I need | Use |
|---|---|
| App cards, rows, grids, lists, or icons | App Tile, App Row, App Grid, App List, App Icon |
| A wallet picker, network warning, or transaction status | Wallet Delegation |
| A quiz, its teaser card, modal, or share badge | Quiz, Quiz Card, Quiz Modal, Quiz Share |
| A layer 2 project card | Layer 2 Card |
| Funding program cards and stats | Funding Programs |
| Treasury charts and figures | Treasury Sections |
Nothing fits?
- Check whether an existing component can take an additive prop that covers your case.
- If you need a page-specific tool or deliberate art direction, put it in
src/components/<PageName>/and explain in the pull request why nothing above fits. - If you need a new shared component, ask in the issue or pull request first. It goes in
src/components/Layout/with JSDoc for its props, a doc page in this folder, and a row in the table above. Start the doc page fromdocs/get-involved/components/_template.md.