Skip to content
easy-web

Component Playground

Browse the easy-web UI component examples below. Each example shows the component’s visual output alongside the source code.

Available Components

Section titled “Available Components”

Hero

Full-width hero section with headline, subtitle, and call-to-action buttons.

ThemeToggle

Light/dark mode toggle button using CSS custom properties.

CardGrid

Responsive grid layout for displaying card collections.

Header

Site header with navigation and theme toggle integration.

Hero Component

Section titled “Hero Component”

The Hero component renders a full-width introductory section.

Usage

Section titled “Usage”
---
import { Hero } from '@easy-web/content-blocks';
---
<Hero
  title="Welcome to My Site"
  subtitle="Built on the easy-web platform"
  cta={{ label: 'Get Started', href: '/docs' }}
/>

Visual Preview

Section titled “Visual Preview”

Welcome to My Site

Built on the easy-web platform

Get Started

ThemeToggle Component

Section titled “ThemeToggle Component”

The ThemeToggle component switches between light and dark themes using CSS custom properties from @easy-web/theme-core.

Usage

Section titled “Usage”
---
import { ThemeToggle } from '@easy-web/content-blocks';
---
<!-- Place in your site Header -->
<ThemeToggle />

How It Works

Section titled “How It Works”

The toggle switches the data-theme attribute on <html> between light and dark. The theme CSS from @easy-web/theme-core uses this attribute to apply the correct CSS custom property values.

/* theme-core applies tokens like this: */
[data-theme="dark"] {
  --ew-color-bg: #1a1a2e;
  --ew-color-surface: #16213e;
  /* ... */
}

CardGrid Component

Section titled “CardGrid Component”

The CardGrid component renders a responsive grid of cards.

Usage

Section titled “Usage”
---
import { CardGrid, Card } from '@easy-web/content-blocks';
---
<CardGrid>
  <Card
    title="Feature One"
    description="Description of this feature"
    href="/docs/feature-one"
  />
  <Card
    title="Feature Two"
    description="Another great feature"
    href="/docs/feature-two"
  />
</CardGrid>

Visual Preview

Section titled “Visual Preview”

Feature One

Description of this feature — click to learn more.

Feature Two

Another great feature with detailed documentation.

Feature Three

Integrates seamlessly with your Astro project.

Section Component

Section titled “Section Component”

The Section component wraps content in a semantically correct <section> element with consistent spacing.

Usage

Section titled “Usage”
---
import { Section } from '@easy-web/content-blocks';
---
<Section title="About Us" id="about">
  <p>Content goes here...</p>
</Section>

Using Components Together

Section titled “Using Components Together”

Here is a typical page structure using multiple easy-web components:

---
import {
  Hero,
  Section,
  CardGrid,
  Card,
  Header,
  Footer,
  ThemeToggle
} from '@easy-web/content-blocks';
import '@easy-web/theme-core/theme.css';
---
<html>
  <body>
    <Header>
      <ThemeToggle slot="end" />
    </Header>


    <Hero
      title="My Site"
      subtitle="Powered by easy-web"
      cta={{ label: 'Get Started', href: '/docs' }}
    />


    <Section title="Features">
      <CardGrid>
        <Card title="Fast" description="Optimised for performance" />
        <Card title="Accessible" description="WCAG 2.1 compliant" />
        <Card title="Themeable" description="Light and dark mode built-in" />
      </CardGrid>
    </Section>


    <Footer />
  </body>
</html>