Privacy Policy
June 2026
Your privacy is important to us. This is a sample legal text to demonstrate the layout width and typography constraints applied by LegalLayout.
Component Gallery
Live previews of all 16+ easy-web content blocks.
Navigation
ThemeToggle
Switches between light and dark themes using theme-core.
import ThemeToggle from '@easy-web/content-blocks/components/ThemeToggle';
<ThemeToggle />LanguageSwitch
Links to the alternate locale version of the current page.
import LanguageSwitch from '@easy-web/content-blocks/components/LanguageSwitch';
<LanguageSwitch currentLang="en" pathname="/components/" />Header & Footer
Already included in the Base layout.
import Header from '@easy-web/content-blocks/components/Header';
import Footer from '@easy-web/content-blocks/components/Footer';
<Header siteName="easy-web" navItems={[]} currentLang="en" pathname="/components/" />
<Footer siteName="easy-web" legalLinks={[{label: "Privacy", href: "#"}]} />Layout
Hero
Prominent hero section with optional call to action.
import Hero from '@easy-web/content-blocks/components/Hero';
<Hero
title="Showcase Your Work"
subtitle="Build fast, multilingual, and accessible websites."
ctaLabel="Click Here"
ctaHref="#"
/>Section
Semantic wrapper with optional heading and constrained width.
My Section Title
This is the content inside the section. It automatically uses the design system's spacing.
import Section from '@easy-web/content-blocks/components/Section';
<Section title="My Section Title">
<p>This is the content inside the section. It automatically uses the design system's spacing.</p>
</Section>Content
Card & CardGrid
Flexible grid layout for displaying multiple cards.
import CardGrid from '@easy-web/content-blocks/components/CardGrid';
import Card from '@easy-web/content-blocks/components/Card';
<CardGrid>
<Card title="Feature One" description="This is a great feature." href="#" />
<Card title="Feature Two" description="This is another feature." href="#" />
</CardGrid>BlogPostCard
Clickable card linking to a blog post, with date formatting.
import BlogPostCard from '@easy-web/content-blocks/components/BlogPostCard';
<BlogPostCard
title="Building the component gallery"
description="How we built the easy-web component showcase."
href="#"
pubDate={new Date('2026-06-27')}
locale="en"
/>Prose
Wrapper for continuous text/markdown with typographic styling.
Typographic styling
Automatically applies correct spacing and styling to bare HTML tags like p, ul, and headings.
import Prose from '@easy-web/content-blocks/components/Prose';
<Prose>
<h2>Typographic styling</h2>
<p>Automatically applies correct spacing and styling to bare HTML tags like <code>p</code>, <code>ul</code>, and headings.</p>
</Prose>Interactive
CtaSection
Call-to-action banner with heading, optional body, and button.
import CtaSection from '@easy-web/content-blocks/components/CtaSection';
<CtaSection
heading="Ready to get started?"
body="Join our ecosystem today."
buttonLabel="Sign Up"
buttonHref="#"
variant="primary"
/>ContactSection
Centered mailto-only contact call to action.
import ContactSection from '@easy-web/content-blocks/components/ContactSection';
<ContactSection
heading="Need custom development?"
body="We are available for freelance work."
email="hello@example.com"
buttonLabel="Email Us"
/>Utility
DraftBanner
Warning banner for draft/unfinished content.
import DraftBanner from '@easy-web/content-blocks/components/DraftBanner';
<DraftBanner message="This page is currently a draft and should not be published." />LanguageNotice
Subtle info box for language/binding disclaimers.
Please note: The English translation is provided for convenience. Only the German original is legally binding.
import LanguageNotice from '@easy-web/content-blocks/components/LanguageNotice';
<LanguageNotice message="Please note: The English translation is provided for convenience. Only the German original is legally binding." />LegalLayout
Narrow content wrapper for legal pages.
import LegalLayout from '@easy-web/content-blocks/components/LegalLayout';
<LegalLayout title="Privacy Policy" lastUpdated="June 2026">
<p>Your privacy is important to us. This is a sample legal text to demonstrate the layout width and typography constraints applied by LegalLayout.</p>
</LegalLayout>Gallery
GalleryImageGrid
Simple grid of images.
Image Grid
import GalleryImageGrid from '@easy-web/content-blocks/components/GalleryImageGrid';
<GalleryImageGrid
title="Image Grid"
columns={3}
gap="md"
aspectRatio="square"
items={[
{ src: "...", alt: "Mountain landscape" },
{ src: "...", alt: "Forest path" },
{ src: "...", alt: "Sunlit forest" }
]}
/>GalleryHeroSlider
Full-width hero slider.
Hero Slider
import GalleryHeroSlider from '@easy-web/content-blocks/components/GalleryHeroSlider';
<GalleryHeroSlider
title="Hero Slider"
autoplay={false}
height="sm"
slides={[
{ src: "...", alt: "Mountains", title: "Reach New Heights", subtitle: "Discover our themed experiences", cta: "Explore", href: "#" },
{ src: "...", alt: "Forest", title: "Into the Wild", subtitle: "Natural beauty in every pixel", cta: "Discover", href: "#" }
]}
/>GalleryCarousel
Carousel of images.
Carousel
import GalleryCarousel from '@easy-web/content-blocks/components/GalleryCarousel';
<GalleryCarousel
title="Carousel"
autoplay={false}
showDots={true}
showArrows={true}
slides={[
{ src: "...", alt: "Green hills" },
{ src: "...", alt: "Lake and mountains" },
{ src: "...", alt: "Ocean waves" }
]}
/>GalleryMasonryGrid
Masonry grid of images.
Masonry Grid
import GalleryMasonryGrid from '@easy-web/content-blocks/components/GalleryMasonryGrid';
<GalleryMasonryGrid
title="Masonry Grid"
columns={3}
gap="md"
items={[
{ src: "...", alt: "Winter mountains" },
{ src: "...", alt: "Forest light" },
{ src: "...", alt: "Rolling hills" }
]}
/>GalleryFeatureHighlight
Feature highlight with an image and text.
Feature Highlight
Design Tokens
Override any visual property through CSS custom properties.
import GalleryFeatureHighlight from '@easy-web/content-blocks/components/GalleryFeatureHighlight';
<GalleryFeatureHighlight
title="Feature Highlight"
gap="md"
items={[
{ src: "...", alt: "Mountain", title: "Design Tokens", description: "Override any visual property through CSS custom properties.", imagePosition: "left" }
]}
/>GalleryLightboxGrid
Grid of images opening in a lightbox.
Lightbox Grid
import GalleryLightboxGrid from '@easy-web/content-blocks/components/GalleryLightboxGrid';
<GalleryLightboxGrid
title="Lightbox Grid"
columns={3}
gap="md"
items={[
{ src: "...", alt: "Ocean", title: "Ocean", description: "Cool blue waters" },
{ src: "...", alt: "Forest", title: "Forest", description: "Deep green woods" },
{ src: "...", alt: "Sunset path", title: "Sunset", description: "Golden hour" }
]}
/>