Seed Factory · UI

Layout- und Komponenten-Galerie

Responsive Bausteine für neue Websites – direkt mit den zentralen Design-Tokens gestaltet.

Icon-Galerie

Lucide-SVGs direkt im HTML. Suche, Größe und Farbe wählen und Astro-Code kopieren.

Icons suchen

Kategorie

Größe

Farbe

Vorschau-Hintergrund

house

search

menu

settings

mail

phone

calendar

map-pin

shield-check

zap

globe

calculator

download

check

circle-check

info

arrow-right

chevron-down

external-link

file-text

user

users

heart

star

lock

unlock

eye

eye-off

plus

minus

x

trash-2

pencil

copy

share-2

upload

clock

bell

filter

sliders-horizontal

smartphone

monitor

credit-card

shopping-cart

chart-no-axes-combined

circle-help

loader-circle

sun

moon

languages

image

file-down

Raster und Spalten

Volle Breite

Zwei Spalten · 1

Zwei Spalten · 2

Drei Spalten · 1

Drei Spalten · 2

Drei Spalten · 3

Vier Spalten · 1

Vier Spalten · 2

Vier Spalten · 3

Vier Spalten · 4

Mobile Edge Cards – Angebot und Vorschau

Rechten Kartenrand antippen, um zu wechseln.

01 · Konfiguration

Angebot konfigurieren

AngebotsnamePaketAnzahlExpressbearbeitung (+39 €)

02 · Vorschau

Website-Paket

PaketStandard

Anzahl1

Express–

Gesamtpreis (Demo)

79,00 €

<MobileEdgeCards lang={lang} />

Kartenvarianten

Standardkarte

Für Tools, Artikel und Teaser.

Einfacher Textlink

Hervorgehoben

Hervorgehobene Karte

Für besonders wichtige Inhalte oder Aktionen.

Primäre Aktion

Standardkarte

Für Tools, Artikel und Teaser.

Interaktive UI-Bausteine

Mehrstufiges Formular

Anfrage in drei Schritten

Eine lokale Demo – es werden keine Daten versendet.

1Angebot
2Kontakt
3Prüfen

<MultiStepForm lang={lang} />

Bottom Sheet / Dialog

<BottomSheetDemo lang={lang} />

Sticky Mobile CTA

Auf Mobilgeräten unten fixiert

Dein nächster SchrittZum Formular

<StickyMobileCTA lang={lang} />

Toast-Meldungen

<ToastDemo lang={lang} />

Text und Medien

Medienplatzhalter

Zweispaltiger Inhaltsbereich

Bild und Text passen sich automatisch an kleinere Bildschirme an.

Primäre Aktion

Buttons und Links

Primäre Aktion Sekundäre Aktion Einfacher Textlink

Formulare

Hinweise und FAQ

Häufige Fragen

Kann ich die Elemente wiederverwenden?

Ja. Die Galerie ist eine Referenz für die vorhandenen CSS- und Astro-Muster.

Landingpage-Bausteine

HTML-Code für eigene Komponenten kopieren.

Hero mit Handlungsaufforderung

Dein Angebot auf einen Blick

Eine klare Botschaft. Ein einfacher nächster Schritt.

Kurzer Nutzen, verständlich formuliert und auf Smartphones optimiert.

Jetzt starten Mehr erfahren

<section class="seed-hero-demo">
  <p class="seed-hero-demo__eyebrow">Dein Angebot auf einen Blick</p>
  <h1>Eine klare Botschaft. Ein einfacher nächster Schritt.</h1>
  <p>Kurzer Nutzen, verständlich formuliert und auf Smartphones optimiert.</p>
  <div class="seed-hero-demo__actions">
    <a class="button" href="/">Jetzt starten</a>
    <a class="button secondary" href="/">Mehr erfahren</a>
  </div>
</section>

So funktioniert es

Anfrage senden

Ein kurzer, verständlicher Beschreibungstext für diesen Schritt.

Angebot erhalten

Ein kurzer, verständlicher Beschreibungstext für diesen Schritt.

Entscheidung treffen

Ein kurzer, verständlicher Beschreibungstext für diesen Schritt.

<div class="seed-steps-demo">
  <article class="seed-step-demo">
    <span class="seed-step-demo__number" aria-hidden="true">1</span>
    <h3>Anfrage senden</h3>
    <p>Ein kurzer, verständlicher Beschreibungstext für diesen Schritt.</p>
  </article>
  <article class="seed-step-demo">
    <span class="seed-step-demo__number" aria-hidden="true">2</span>
    <h3>Angebot erhalten</h3>
    <p>Ein kurzer, verständlicher Beschreibungstext für diesen Schritt.</p>
  </article>
  <article class="seed-step-demo">
    <span class="seed-step-demo__number" aria-hidden="true">3</span>
    <h3>Entscheidung treffen</h3>
    <p>Ein kurzer, verständlicher Beschreibungstext für diesen Schritt.</p>
  </article>
</div>

Vertrauenselemente

Beispieltexte – keine echten Kundenbewertungen oder Leistungsversprechen.

“Hier steht eine echte Kundenstimme, sobald eine belegbare Freigabe vorliegt.”

Name / Unternehmen

<figure class="seed-quote-demo">
  <blockquote>
    <p>“Hier steht eine echte Kundenstimme, sobald eine belegbare Freigabe vorliegt.”</p>
  </blockquote>
  <figcaption>Name / Unternehmen</figcaption>
</figure>

Ergebniskarte

Dein Ergebnis

42 PunkteDemowert – keine echte Berechnung.

<div class="seed-result-demo" role="status">
  <p>Dein Ergebnis</p>
  <strong>42 Punkte</strong>
  <small>Demowert – keine echte Berechnung.</small>
</div>

CTA-Bereich

<aside class="seed-cta-demo">
  <h2>Bereit für den nächsten Schritt?</h2>
  <p>Ein kurzer Satz erklärt, was nach dem Klick passiert.</p>
  <a class="button" href="/">Jetzt starten</a>
</aside>

Code-Beispiele

HTML-Code für eigene Komponenten kopieren.

<article class="card">
  <h3>Meine Karte</h3>
  <p>Eine wiederverwendbare Karte.</p>
</article>