Site Components

📄️ Overview

Reference for cardano.org's shared React component library. Layout primitives, content blocks, and interactive widgets used across pages.

Render a filtered grid of Cardano applications from src/data/apps.js with tag filters and search using the AppGrid component.

Render a compact list of Cardano applications by tag using the AppList component on cardano.org.

Apply themed background variants (zoom, plain, adaLight) to a page section with the BackgroundWrapper component.

Constrain content to the page boundary with consistent horizontal padding using the BoundaryBox component.

Draw decorative connecting lines between page sections with the ConnectionLine component on cardano.org.

Insert a labeled section divider with optional anchor id using the Divider component on cardano.org.

Highlight an important piece of content with an icon and accent border using the HighlightCallout component.

Embed a single quiz question card with answer feedback using the QuizCard component on cardano.org.

Embed a multi-question quiz with scoring and retry handling using the Quiz component on cardano.org.

Display a role or persona description with icon and accent color using the RoleCard component.

Render a page hero with title, description, and themed banner using the SiteHero component on cardano.org.

Insert vertical or horizontal spacing between content blocks using the SpacerBox component.

Display a numbered step in an instructional flow using the StepCard component on cardano.org.

Arrange content in a responsive two-column layout with optional reverse order using the TwoColumnLayout component.