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
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

Interaction

I need	Use
Tabs that switch between panels	Pill Tabs
An FAQ or other expandable questions	Accordion for new pages. Older pages use FAQ Section
A dialog opened from a button	Modal
A horizontal row of cards with scroll arrows	Horizontal Scroller
Previous and next buttons to step through epochs	Insights Epoch Nav
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?

1. Check whether an existing component can take an additive prop that covers your case.
2. 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.
3. 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 from docs/get-involved/components/_template.md.