Will­kom­men zur Mus­ter-Landing­pa­ge. Die­se Sei­te dient als visu­el­le Demo, um Typo­gra­fie, Abstän­de, Medi­en und typi­sche Landing­pa­ge-Ele­men­te zu prü­fen.

Inhalt

• Intro
• Hero / Ban­ner
• Key Bene­fits
• Social Pro­of
• Fea­tures
• Call to Action
• Typo­gra­fie
• Lis­ten
• Zita­te
• But­tons & Links
• Medi­en
• Lay­out
• Code­blö­cke
• Tabel­len
• For­mu­la­re
• Emo­jis & Sym­bo­le
• Fuß­no­ten

---

Intro {#intro}

Eine Bei­spiel­sei­te, um Design-Tokens, Abstän­de, Far­ben, Typo­gra­fie und Word­Press-Blocks zu über­prü­fen.

---

Hero / Banner {#hero}

---

Key Benefits {#key-benefits}

Drei klare Vorteile

1. Schnel­le Umset­zung – Laun­chen Sie Pro­jek­te in Rekord­zeit.
2. Ein­fa­ches Design­sys­tem – Kon­sis­ten­te Kom­po­nen­ten für jeden Anwen­dungs­fall.
3. Mobil opti­miert – Per­fek­te Dar­stel­lung auf allen Gerä­ten.

---

Social Proof {#social-proof}

“Das bes­te Tool für moder­ne Web-Teams.”
— Agen­tur Mus­ter­haft

---

Features {#features}

---

Call to Action {#call-to-action}

---

Typografie {#typografie}

Überschriften

H1 Beispiel

H2 Beispiel

H3 Beispiel

H4 Beispiel

H5 Beispiel

H6 Beispiel

Fett, kur­siv, fett-kur­siv, Inline-Code.
Sub­script: H₂O · Super­script: x⁴

---

Listen {#listen}

Ungeordnet

• Punkt A
• Punkt B
  • Unter­punkt B.1
  • Unter­punkt B.2

Geordnet

1. Schritt eins
2. Schritt zwei
   1. Sub-Schritt zwei-eins

Aufgabenliste (HTML)

• Auf­ga­be erle­digt
• Auf­ga­be offen

---

Zitate {#zitate}

Dies ist ein Stan­dard-Block­quo­te.

Dies ist ein Pull­quo­te-Bei­spiel.

---

Buttons & Links {#buttons–links}

Stan­dard-Link – Hover, Focus und Visi­ted-Zustän­de kön­nen per CSS getes­tet wer­den.

Primary Button
Outline Button

---

Medien {#medien}

Bild

Cover

Media & Text

Audio/Video (Platzhalter)

---

Layout {#layout}

Columns (2‑spaltig)

Columns (3‑spaltig)

Group

Verse

Ich stand auf einem Hügel,
und sah die Wolken ziehn.

Details

Mehr anzei­gen

Zusätz­li­cher Bei­spiel­in­halt.

---

Codeblöcke {#codeblöcke}

HTML

<div class="box">Hallo Welt</div>

CSS

.box {
  padding: 1rem;
  background: #eee;
}

JS

console.log("Beispieltest");

---

Tabellen {#tabellen}

Pro­dukt	Preis	Ver­füg­bar
Alpha	19 €	Ja
Beta	29 €	Nein
Gam­ma	39 €	Ja

Zebra-Style (Inline-Style):

Spal­te A	Spal­te B
Ein­trag 1	Wert 1
Ein­trag 2	Wert 2

---

Formulare {#formulare}

Ihr Name

Ihre Nach­richt

News­let­ter erhal­ten
AGB akzep­tie­ren

Opti­on A
Opti­on B

Kate­go­rie
Bitte wählenOption 1Option 2

Absenden

---

Emojis & Symbole {#emojis–symbole}

⭐ ✔️ ❗

---

Fußnoten {#fußnoten}

Ein Bei­spiel­text mit Fußnote.[^1]

[^1]: Dies ist eine Bei­spiel-Fuß­no­te.