easy-web

Komponenten-Galerie

Live-Vorschauen aller 16+ easy-web Inhaltsblöcke.

Navigation

ThemeToggle

Wechselt zwischen hellem und dunklem Design (theme-core).

import ThemeToggle from '@easy-web/content-blocks/components/ThemeToggle';

<ThemeToggle label="Design umschalten (Darkmode)" />

LanguageSwitch

Verlinkt auf die alternative Sprachversion der aktuellen Seite.

EN 
import LanguageSwitch from '@easy-web/content-blocks/components/LanguageSwitch';

<LanguageSwitch currentLang="de" pathname="/de/components/" ariaLabel="Zu Englisch wechseln" />

Header & Footer

Bereits im Base-Layout enthalten. (Nur Code)

import Header from '@easy-web/content-blocks/components/Header';
import Footer from '@easy-web/content-blocks/components/Footer';

<Header siteTitle="easy-web" navigation="none" />
<Footer siteTitle="easy-web" />

Layout

Hero

Prominenter Hero-Bereich mit optionalem Call-to-Action.

Präsentiere deine Arbeit

Baue schnelle, mehrsprachige und barrierefreie Webseiten.

Hier klicken 
import Hero from '@easy-web/content-blocks/components/Hero';

<Hero 
  title="Präsentiere deine Arbeit" 
  subtitle="Baue schnelle, mehrsprachige und barrierefreie Webseiten." 
  ctaLabel="Hier klicken" 
  ctaHref="#" 
/>

Section

Semantischer Wrapper mit optionaler Überschrift und begrenzter Breite.

Mein Bereichstitel

Dies ist der Inhalt innerhalb des Bereichs. Er nutzt automatisch die Abstände des Designsystems.

import Section from '@easy-web/content-blocks/components/Section';

<Section title="Mein Bereichstitel">
  <p>Dies ist der Inhalt innerhalb des Bereichs. Er nutzt automatisch die Abstände des Designsystems.</p>
</Section>

Inhalt (Content)

Card & CardGrid

Flexibles Raster-Layout zur Darstellung mehrerer Karten.

Funktion Eins

Dies ist eine großartige Funktion.

Funktion Zwei

Dies ist eine weitere Funktion.

 
import CardGrid from '@easy-web/content-blocks/components/CardGrid';
import Card from '@easy-web/content-blocks/components/Card';

<CardGrid>
  <Card title="Funktion Eins" description="Dies ist eine großartige Funktion." href="#" />
  <Card title="Funktion Zwei" description="Dies ist eine weitere Funktion." href="#" />
</CardGrid>

BlogPostCard

Klickbare Karte, die auf einen Blog-Artikel verlinkt, inkl. Datumsformatierung.

import BlogPostCard from '@easy-web/content-blocks/components/BlogPostCard';

<BlogPostCard 
  title="Aufbau der Komponenten-Galerie" 
  description="Wie wir die easy-web Komponenten-Vorschau gebaut haben." 
  href="#" 
  pubDate=&#123;new Date('2026-06-27')&#125; 
  locale="de" 
/>

Prose

Wrapper für Fließtext/Markdown mit typografischem Styling.

Typografisches Styling

Wendet automatisch korrekte Abstände und Formatierungen auf reine HTML-Tags wie p, ul und Überschriften an.

import Prose from '@easy-web/content-blocks/components/Prose';

<Prose>
  <h2>Typografisches Styling</h2>
  <p>Wendet automatisch korrekte Abstände und Formatierungen auf reine HTML-Tags wie <code>p</code>, <code>ul</code> und Überschriften an.</p>
</Prose>

Interaktiv

CtaSection

Call-to-Action Banner mit Überschrift, optionalem Text und Button.

Bereit loszulegen?

Tritt noch heute unserem Ökosystem bei.

Registrieren 
import CtaSection from '@easy-web/content-blocks/components/CtaSection';

<CtaSection 
  heading="Bereit loszulegen?" 
  body="Tritt noch heute unserem Ökosystem bei." 
  buttonLabel="Registrieren" 
  buttonHref="#" 
  variant="primary" 
/>

ContactSection

Zentrierter Call-to-Action ausschließlich für Kontakt-E-Mails.

Individuelle Entwicklung benötigt?

Wir stehen für Freelance-Arbeit zur Verfügung.

Schreib uns 
import ContactSection from '@easy-web/content-blocks/components/ContactSection';

<ContactSection 
  heading="Individuelle Entwicklung benötigt?" 
  body="Wir stehen für Freelance-Arbeit zur Verfügung." 
  email="hallo@example.com" 
  buttonLabel="Schreib uns" 
/>

Dienstprogramm (Utility)

DraftBanner

Warnbanner für Entwürfe/unfertige Inhalte.

Diese Seite ist derzeit ein Entwurf und sollte nicht veröffentlicht werden.

import DraftBanner from '@easy-web/content-blocks/components/DraftBanner';

<DraftBanner message="Diese Seite ist derzeit ein Entwurf und sollte nicht veröffentlicht werden." />

LanguageNotice

Dezente Infobox für sprachliche/verbindliche Hinweise.

Bitte beachten: Die deutsche Übersetzung dient nur zur Bequemlichkeit. Lediglich das Original ist rechtlich bindend.

import LanguageNotice from '@easy-web/content-blocks/components/LanguageNotice';

<LanguageNotice message="Bitte beachten: Die deutsche Übersetzung dient nur zur Bequemlichkeit. Lediglich das Original ist rechtlich bindend." />

LegalLayout

Schmaler Content-Wrapper für Rechtstexte. (Nur Code)

import LegalLayout from '@easy-web/content-blocks/components/LegalLayout';

<LegalLayout title="Datenschutzerklärung" lastUpdated="Juni 2026">
  <p>Ihre Privatsphäre ist uns wichtig...</p>
</LegalLayout>