Overview
Reference for cardano.org's shared React component library. Find the component for a common need, from page heroes and section titles to tabs, FAQs, and modals.
Accordion
Show a list of expandable questions and answers with accessible toggle buttons using the Accordion component on cardano.org.
App Grid
Render a grid of Cardano applications from src/data/apps.js filtered by category and ranked by transaction volume using the AppGrid component.
App Icon
Render an app's icon with a letter avatar fallback using the AppIcon component on cardano.org.
App List
Render a compact list of Cardano applications by tag using the AppList component on cardano.org.
App Row
Render one app from the showcase as a compact linked row with icon, blurb, activity, and category using the AppRow component on cardano.org.
App Tile
Render one app from the showcase as a linked card with icon, blurb, activity, and category using the AppTile component on cardano.org.
Background Wrapper
Apply themed background variants (zoom, plain, adaLight) to a page section with the BackgroundWrapper component.
Boundary Box
Constrain content to the page boundary with consistent horizontal padding using the BoundaryBox component.
Connection Line
Draw decorative connecting lines between page sections with the ConnectionLine component on cardano.org.
CTA One Column
Render a centered call to action with an optional title, text, and a white button using the CtaOneColumn component on cardano.org.
CTA Two Column
Render a two-column call to action with independent title, text, and white button per column using the CtaTwoColumn component on cardano.org.
Divider
Insert a labeled section divider with optional anchor id using the Divider component on cardano.org.
Dotted Image With Text
Render a dotted icon illustration next to a heading and text using the DottedImageWithText component on cardano.org.
EChart
Render an Apache ECharts chart that follows its option, resizes with the window, and cleans up after itself, using the EChart component on cardano.org.
Edit On GitHub Callout
Close a page with a callout that invites readers to correct it on GitHub, using the EditOnGitHubCallout component on cardano.org.
Epoch Range Slider
Let readers pick a range of Cardano epochs with a two-handle slider that remembers the choice, using the EpochRangeSlider component on cardano.org.
Explainer Page
Shared page shell for the site's explainer pages, with meta, FAQPage structured data, hero, section slot, FAQ and call-to-action band.
Featured Title With Text
Render a large heading on the left with description, red quote, and button on the right using the FeaturedTitleWithText component on cardano.org.
Follow Cardano
Show a centered title with round icon links to Cardano's social channels using the FollowCardano component on cardano.org.
Funding Programs
A persona switcher of program cards that open a details dialog, plus the headline stats strip, using the FundingPrograms components.
Governance Story
A scrollytelling explainer of Cardano governance. A canvas behind the chapter cards redraws itself as each chapter scrolls into view.
Grid
Lay out cards or tiles in a responsive grid whose columns follow the available width, using the Grid component on cardano.org.
Highlight Callout
Highlight an important piece of content with an icon and accent border using the HighlightCallout component.
Horizontal Scroller
Lay out cards in a horizontal scroll-snap track with arrows on desktop and dots on mobile using the HorizontalScroller component on cardano.org.
HubSpot Form
Embed a HubSpot form, such as the contact form or the Community Digest sign-up, using the HubSpotForm component on cardano.org.
Icon Hero
Frame an icon in a rounded tile with an optional dotted halo using the IconHero component on cardano.org.
Insights Epoch Nav
Step through Cardano epochs with previous and next buttons and jump to a specific epoch using the InsightsEpochNav component on cardano.org.
Insights Footer
Show the last-updated line at the end of an /insights page using the InsightsFooter component on cardano.org.
Insights Layout
Page shell for the /insights data pages, with meta driven title, hero, zoom background, and boundary box, using the InsightsLayout component on cardano.org.
Layer 2 Card
Display an ecosystem project with a colour-coded status pill using the Layer2Card component on cardano.org.
Link Card Row
End a page with a centered row of link cards that point to related pages, using the LinkCardRow component on cardano.org.
Logo Tile
Show a logo in a square or round tile, with the name's first letters when the image is missing or fails to load, using the LogoTile component on cardano.org.
Modal
Open any content in an accessible dialog from a trigger button using the Modal component on cardano.org.
One Column Box
Render one or more plain paragraphs in a full-width column using the OneColumnBox component on cardano.org.
Open Graph Info
Add Open Graph and Twitter card meta tags to a page with the OpenGraphInfo component on cardano.org.
Page CTA
Close a page with a full-width call to action band that has a title, a description, and one or two buttons, using the PageCTA component on cardano.org.
Proof Points List
Render alternating rows of icon, title, tagline, and text with an optional closing button using the ProofPointsList component on cardano.org.
Quiz Card
Promote a quiz with a call-to-action card that opens the Quiz in a modal, using the QuizCard component on cardano.org.
Quiz Modal
Launch a Quiz inside a Modal from a single button using the QuizModal component on cardano.org.
Quiz Share
Let users share a finished quiz result as a badge image with a spoiler-free text summary using the QuizShare component on cardano.org.
Quiz
Embed a multi-question quiz with scoring and retry handling using the Quiz component on cardano.org.
Role Card
Display a role or persona description with icon and accent color using the RoleCard component.
Site Hero
Render a page hero with title, description, and themed banner using the SiteHero component on cardano.org.
Spacer Box
Insert vertical spacing between content blocks using the SpacerBox component.
Stat Figure
Show key figures as a large value above a short label, alone or in an equal-column strip, using the StatFigure and StatStrip components on cardano.org.
Status Pill
Small color-coded label for a lifecycle or availability state using the StatusPill component.
Tabs
Switch between panels of related content with accessible tabs using the Tabs component on cardano.org, as pill tabs or as parts for a custom layout.
Term Explainer
Show two random glossary terms from a category under a divider using the TermExplainer component on cardano.org.
Title With Text
Render a section title with body text, optional list, and an optional call-to-action using the TitleWithText component on cardano.org.
Treasury Sections
Building blocks for the treasury explainer and the treasury insights page on cardano.org, their data sources and how pages combine them.
Two Column Box
Render two columns of plain paragraphs that collapse to one on small screens using the TwoColumnBox component on cardano.org.
Two Column Layout
Arrange content in a responsive two-column layout with an optional sticky sidebar and adjustable column ratio using the TwoColumnLayout component.
Wallet Delegation
Shared wallet building blocks for the delegation tools on cardano.org, from wallet selection and network warning to transaction status, search, and avatars.
Welcome Hero
The homepage hero of cardano.org with the animated ledger history in the background, title, description, and call to action buttons.