Skip to content

Components

Reusable UI components used throughout the site.

Buttons

Buttons come in two variants: primary and secondary.

View Code 
<Button variant="primary" label="Primary Button" />
<Button variant="secondary" label="Secondary Button" />

Hero Banner

The hero banner component displays a large heading, description, and optional action buttons.

Hero Banner Title

This is a description that provides context about the content below.

View Code 
<HeroBanner 
  title="Hero Banner Title"
  description="Description text"
  primaryButton={{ label: "Get Started" }}
  secondaryButton={{ label: "Learn More" }}
/>

Component Guidelines

  • Use Button component instead of raw <button> tags for consistency
  • All components emit custom events that can be listened to by parent components
  • Components automatically adapt to dark mode through CSS variables