Overview
Reference for cardano.org's shared React component library. Layout primitives, content blocks, and interactive widgets used across pages.
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.
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.
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.
Icon Hero
Frame an icon in a rounded tile with an optional dotted halo using the IconHero 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.
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.
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 or horizontal spacing between content blocks using the SpacerBox component.
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.
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.