854 lines
38 KiB
HTML
854 lines
38 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<meta name="color-scheme" content="light dark" />
|
||
<title>JuConnect · Styleguide</title>
|
||
<link rel="stylesheet" href="./assets/css/style.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<a class="skip-link" href="#content">Zum Inhalt springen</a>
|
||
|
||
<div class="app" id="top">
|
||
<!-- Side Navigation -->
|
||
<aside class="sidenav" aria-label="Navigation">
|
||
<div class="sidenav__inner">
|
||
<div class="sidenav__top">
|
||
<a class="brand" href="#top" aria-label="JuConnect Styleguide">
|
||
<img
|
||
class="brand__logo"
|
||
src="./assets/img/juconnect_icon.svg"
|
||
data-logo-light="./assets/img/juconnect_icon.svg"
|
||
data-logo-dark="./assets/img/juconnect_icon_light.svg"
|
||
alt="JuConnect Icon" />
|
||
<div class="brand__text">
|
||
<div class="brand__name">JuConnect</div>
|
||
<div class="brand__tagline">Hilfen zur Erziehung</div>
|
||
</div>
|
||
</a>
|
||
|
||
<div class="sidenav__actions">
|
||
<button class="btn btn--ghost btn--sm" type="button" data-theme-toggle title="Theme wechseln">
|
||
<span class="btn__icon" aria-hidden="true">☼</span>
|
||
<span class="btn__label">Theme</span>
|
||
</button>
|
||
<button class="btn btn--ghost btn--sm" type="button" data-copy=":root{\n --primary:#1d354f;\n --accent:#8FAE9A;\n}" data-copy-label="Tokens kopieren">
|
||
<span class="btn__icon" aria-hidden="true">⧉</span>
|
||
<span class="btn__label">Tokens</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidenav__search">
|
||
<label class="sr-only" for="navSearch">Suche</label>
|
||
<input class="input input--sm" id="navSearch" type="search" placeholder="Suchen (z. B. button, form, logo) …" data-nav-search />
|
||
</div>
|
||
|
||
<nav class="sidenav__nav" data-nav>
|
||
<div class="navgroup">
|
||
<div class="navgroup__title">Grundlagen</div>
|
||
<a class="navlink" href="#brand">Marke & Kommunikation</a>
|
||
<a class="navlink" href="#bildsprache">Bildsprache</a>
|
||
<a class="navlink" href="#logo">Logo</a>
|
||
<a class="navlink" href="#tokens">Design Tokens</a>
|
||
<a class="navlink" href="#colors">Farben</a>
|
||
<a class="navlink" href="#typography">Typografie</a>
|
||
</div>
|
||
|
||
<div class="navgroup">
|
||
<div class="navgroup__title">UI-Bausteine</div>
|
||
<a class="navlink" href="#buttons">Buttons</a>
|
||
<a class="navlink" href="#forms">Formulare</a>
|
||
<a class="navlink" href="#feedback">Feedback</a>
|
||
<a class="navlink" href="#layout">Layout</a>
|
||
<a class="navlink" href="#patterns">Patterns</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="sidenav__bottom">
|
||
<div class="mini-note">
|
||
<div class="mini-note__title">Leitlinie</div>
|
||
<div class="mini-note__text">
|
||
Klar · seriös · freundlich. <br/>
|
||
Primärfarbe führt, Akzent unterstützt.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main -->
|
||
<main class="main" id="content" tabindex="-1">
|
||
<header class="pagehead">
|
||
<div class="pagehead__left">
|
||
<div class="pagehead__eyebrow">
|
||
<span class="badge badge--info">Design System</span>
|
||
<span class="muted">Version 0.2</span>
|
||
</div>
|
||
<div class="pagehead__brand">
|
||
<img
|
||
src="./assets/img/juconnect.svg"
|
||
data-logo-light="./assets/img/juconnect.svg"
|
||
data-logo-dark="./assets/img/juconnect_light.svg"
|
||
alt="JuConnect Logo" />
|
||
</div>
|
||
<h1 class="h1">Styleguide</h1>
|
||
<p class="lead">
|
||
Toolbox Styleguide für JuConnect. Klar strukturierte Regeln und kopierbare Code-Snippets für konsistente Gestaltung und Kommunikation.
|
||
</p>
|
||
<div class="pagehead__chips">
|
||
<span class="pill">
|
||
<span class="pill__dot" aria-hidden="true"></span>
|
||
<span>Primär <code>#1d354f</code></span>
|
||
<button class="pill__copy" type="button" data-copy="#1d354f" data-copy-label="Primärfarbe kopiert" aria-label="Primärfarbe kopieren">⧉</button>
|
||
</span>
|
||
<span class="pill pill--accent">
|
||
<span class="pill__dot" aria-hidden="true"></span>
|
||
<span>Akzent <code>#8FAE9A</code></span>
|
||
<button class="pill__copy" type="button" data-copy="#8FAE9A" data-copy-label="Akzentfarbe kopiert" aria-label="Akzentfarbe kopieren">⧉</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pagehead__right">
|
||
<div class="card card--tight">
|
||
<div class="kpi">
|
||
<div class="kpi__label">Use-case</div>
|
||
<div class="kpi__value">Öffentliche Träger</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="kpi__label">Ton</div>
|
||
<div class="kpi__value">Sachlich, respektvoll</div>
|
||
</div>
|
||
<div class="kpi">
|
||
<div class="kpi__label">Akzent</div>
|
||
<div class="kpi__value">sparsam, unterstützend</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Brand -->
|
||
<section class="section" id="brand">
|
||
<div class="section__head">
|
||
<h2 class="h2">Marke & Kommunikation</h2>
|
||
<p class="muted">Kurzregeln für Sprache, Tonalität und visuelle Haltung.</p>
|
||
</div>
|
||
|
||
<div class="grid grid--2">
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Stimme (Voice)</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy="• Sie-Ansprache\n• kurz & klar\n• keine Buzzwords\n• keine Überversprechen\n• fachlich korrekt, aber verständlich"
|
||
data-copy-label="Voice-Regeln kopiert">⧉ Copy</button>
|
||
</div>
|
||
<ul class="list">
|
||
<li>Sie-Ansprache, respektvoll</li>
|
||
<li>kurze Sätze, klare Begriffe</li>
|
||
<li>keine Marketing-Floskeln, keine Superlative</li>
|
||
<li>keine Emotionalisierung sensibler Themen</li>
|
||
<li>präzise Zuständigkeiten & Abläufe</li>
|
||
</ul>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Do / Don’t</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy="DO: strukturiert, neutral, lösungsorientiert\nDON'T: dramatisierend, reißerisch, stock-klischee"
|
||
data-copy-label="Do/Don't kopiert">⧉ Copy</button>
|
||
</div>
|
||
<div class="grid grid--2">
|
||
<div>
|
||
<div class="badge badge--success">Do</div>
|
||
<ul class="list">
|
||
<li>„Ablauf in 3 Schritten“</li>
|
||
<li>„Zuständigkeit & Kontakt“</li>
|
||
<li>„Dokumente & Nachweise“</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<div class="badge badge--danger">Don’t</div>
|
||
<ul class="list">
|
||
<li>„Wir ändern Ihr Leben“</li>
|
||
<li>zu viele Fotos/Emotionen</li>
|
||
<li>verspielte UI-Effekte</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Bildsprache -->
|
||
<section class="section" id="bildsprache">
|
||
<div class="section__head">
|
||
<h2 class="h2">Bildsprache</h2>
|
||
<p class="muted">Leitlinien für sachliche, respektvolle Illustrationen im JuConnect-Kontext.</p>
|
||
</div>
|
||
|
||
<div class="grid grid--2">
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Regeln</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy="Stil: sachlich, reduziert, freundlich\nKeine Verniedlichung\nKeine übertriebenen Emotionen\nKlare Formen, ruhige Farben\nEher erklärend als erzählend"
|
||
data-copy-label="Bildsprache-Regeln kopiert">⧉ Copy</button>
|
||
</div>
|
||
<ul class="list">
|
||
<li>Stil: sachlich, reduziert, freundlich</li>
|
||
<li>Keine Verniedlichung</li>
|
||
<li>Keine übertriebenen Emotionen</li>
|
||
<li>Klare Formen, ruhige Farben</li>
|
||
<li>Eher erklärend als erzählend</li>
|
||
</ul>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Beispiele</h3>
|
||
<span class="badge badge--info">Referenz</span>
|
||
</div>
|
||
<div class="image-grid">
|
||
<figure class="image-card">
|
||
<img src="./assets/img/helfer.png" alt="Beispielbild Helfer" />
|
||
<figcaption class="muted">Helfer</figcaption>
|
||
</figure>
|
||
<figure class="image-card">
|
||
<img src="./assets/img/gruppe.png" alt="Beispielbild Gruppe" />
|
||
<figcaption class="muted">Gruppe</figcaption>
|
||
</figure>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Prompt-Generator</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button" data-bild-copy data-copy-label="Bildprompt kopiert">⧉ Copy</button>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="label" for="bildTopic">Thema</label>
|
||
<input class="input" id="bildTopic" type="text" placeholder="z. B. Hilfeplangespräch mit Jugendamt" data-bild-topic />
|
||
<div class="help">Beim Kopieren wird das Thema direkt in den Prompt eingesetzt.</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<!-- Logo -->
|
||
<section class="section" id="logo">
|
||
<div class="section__head">
|
||
<h2 class="h2">Logo</h2>
|
||
<p class="muted">Anwendung, Schutzraum, Mindestgröße, Varianten.</p>
|
||
</div>
|
||
|
||
<div class="grid grid--2">
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Logo-Assets</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy='<img src="./assets/img/juconnect.svg" alt="JuConnect" />'
|
||
data-copy-label="Logo-HTML kopiert">⧉ Copy</button>
|
||
</div>
|
||
|
||
<div class="logo-demo">
|
||
<div class="logo-demo__tile">
|
||
<div class="logo-demo__label">Hell</div>
|
||
<div class="logo-demo__surface logo-demo__surface--light">
|
||
<img src="./assets/img/juconnect.svg" alt="JuConnect Logo" />
|
||
</div>
|
||
</div>
|
||
<div class="logo-demo__tile">
|
||
<div class="logo-demo__label">Dunkel</div>
|
||
<div class="logo-demo__surface logo-demo__surface--dark">
|
||
<img src="./assets/img/juconnect_light.svg" alt="JuConnect Logo hell" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="logo-downloads">
|
||
<a class="btn btn--ghost btn--sm" href="./assets/img/juconnect.svg" download="juconnect.svg">Download Logo (Standard)</a>
|
||
<a class="btn btn--ghost btn--sm" href="./assets/img/juconnect_light.svg" download="juconnect_light.svg">Download Logo (Hell)</a>
|
||
</div>
|
||
|
||
<p class="muted">Hinweis: Auf dunklen Flächen die helle Logo-Variante verwenden.</p>
|
||
|
||
<hr class="hr" />
|
||
|
||
<div>
|
||
<h4 class="h3">Icon-Assets</h4>
|
||
<div class="logo-demo logo-demo--icon">
|
||
<div class="logo-demo__tile">
|
||
<div class="logo-demo__label">Hell</div>
|
||
<div class="logo-demo__surface logo-demo__surface--light">
|
||
<img class="logo-demo__icon" src="./assets/img/juconnect_icon.svg" alt="JuConnect Icon" />
|
||
</div>
|
||
</div>
|
||
<div class="logo-demo__tile">
|
||
<div class="logo-demo__label">Dunkel</div>
|
||
<div class="logo-demo__surface logo-demo__surface--dark">
|
||
<img class="logo-demo__icon" src="./assets/img/juconnect_icon_light.svg" alt="JuConnect Icon hell" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="logo-downloads">
|
||
<a class="btn btn--ghost btn--sm" href="./assets/img/juconnect_icon.svg" download="juconnect_icon.svg">Download Icon (Standard)</a>
|
||
<a class="btn btn--ghost btn--sm" href="./assets/img/juconnect_icon_light.svg" download="juconnect_icon_light.svg">Download Icon (Hell)</a>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Regeln</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy="Schutzraum: mindestens 1× Logo-Höhe\nMindestbreite Web: 120 px\nNicht verzerren, nicht schattieren, keine Farbänderung"
|
||
data-copy-label="Logo-Regeln kopiert">⧉ Copy</button>
|
||
</div>
|
||
|
||
<div class="callout callout--info">
|
||
<div class="callout__title">Schutzraum</div>
|
||
<div class="callout__text">Rundum mindestens <strong>1× Logo-Höhe</strong> Abstand zu anderen Elementen.</div>
|
||
</div>
|
||
|
||
<div class="callout">
|
||
<div class="callout__title">Verboten</div>
|
||
<ul class="list">
|
||
<li>Strecken/Quetschen</li>
|
||
<li>Schatten/Glow hinzufügen</li>
|
||
<li>Farben ändern</li>
|
||
<li>auf unruhigen Bildern platzieren</li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tokens -->
|
||
<section class="section" id="tokens">
|
||
<div class="section__head">
|
||
<h2 class="h2">Design Tokens</h2>
|
||
<p class="muted">Copy & paste: CSS Variablen als Single Source of Truth.</p>
|
||
</div>
|
||
|
||
<article class="card">
|
||
<div class="snippet" data-snippet>
|
||
<div class="snippet__head">
|
||
<div class="snippet__title">CSS Tokens (Auszug)</div>
|
||
<div class="snippet__actions">
|
||
<button class="btn btn--ghost btn--sm" type="button" data-snippet-copy data-copy-label="CSS Tokens kopiert">⧉ Copy</button>
|
||
</div>
|
||
</div>
|
||
<pre class="snippet__code"><code>:root{
|
||
--primary: #1d354f;
|
||
--accent: #8FAE9A;
|
||
|
||
--bg: #f6f7f8;
|
||
--surface: #ffffff;
|
||
--surface2: #eef1f3;
|
||
--text: #101922;
|
||
--text2: #3c4a58;
|
||
--muted: #607384;
|
||
--line: #d7dee5;
|
||
|
||
--radius: 14px;
|
||
--shadow-sm: 0 6px 16px rgba(16, 25, 34, .08);
|
||
--focus: 0 0 0 3px rgba(143, 174, 154, .35);
|
||
}</code></pre>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<!-- Colors -->
|
||
<section class="section" id="colors">
|
||
<div class="section__head">
|
||
<h2 class="h2">Farben</h2>
|
||
<p class="muted">Primärfarbe führt. Akzent ist Unterstützung, nicht Hauptdarsteller.</p>
|
||
</div>
|
||
|
||
<div class="grid grid--3">
|
||
<article class="swatch card" data-swatch data-name="primary" data-hex="#1d354f">
|
||
<div class="swatch__chip swatch__chip--primary"></div>
|
||
<div class="swatch__meta">
|
||
<div class="swatch__name">Primär</div>
|
||
<div class="swatch__row"><code>--primary</code> <span class="dot">·</span> <code>#1d354f</code></div>
|
||
<div class="swatch__actions">
|
||
<button class="btn btn--ghost btn--sm" type="button" data-swatch-copy="hex">Hex</button>
|
||
<button class="btn btn--ghost btn--sm" type="button" data-swatch-copy="token">Token</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="swatch card" data-swatch data-name="accent" data-hex="#8FAE9A">
|
||
<div class="swatch__chip swatch__chip--accent"></div>
|
||
<div class="swatch__meta">
|
||
<div class="swatch__name">Akzent (Salbei)</div>
|
||
<div class="swatch__row"><code>--accent</code> <span class="dot">·</span> <code>#8FAE9A</code></div>
|
||
<div class="swatch__actions">
|
||
<button class="btn btn--ghost btn--sm" type="button" data-swatch-copy="hex">Hex</button>
|
||
<button class="btn btn--ghost btn--sm" type="button" data-swatch-copy="token">Token</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="swatch card" data-swatch data-name="bg" data-hex="#f6f7f8">
|
||
<div class="swatch__chip swatch__chip--bg"></div>
|
||
<div class="swatch__meta">
|
||
<div class="swatch__name">Hintergrund</div>
|
||
<div class="swatch__row"><code>--bg</code> <span class="dot">·</span> <code data-bg-hex>#f6f7f8</code></div>
|
||
<div class="swatch__actions">
|
||
<button class="btn btn--ghost btn--sm" type="button" data-swatch-copy="hex">Hex</button>
|
||
<button class="btn btn--ghost btn--sm" type="button" data-swatch-copy="token">Token</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Header-Verlauf</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy="background:\n radial-gradient(120% 140% at 100% 0%, var(--header-grad-accent) 0%, rgba(143,174,154,0) 50%),\n radial-gradient(120% 140% at 0% 100%, var(--header-grad-primary) 0%, rgba(29,53,79,0) 60%),\n var(--surface);"
|
||
data-copy-label="Header-Verlauf kopiert">⧉ Copy</button>
|
||
</div>
|
||
<div class="gradient-preview" aria-label="Vorschau Header-Verlauf"></div>
|
||
<div class="swatch__row"><code>Layer 1 (light)</code> <span class="dot">·</span> <code>#8FAE9A38</code> → <code>#8FAE9A00</code></div>
|
||
<div class="swatch__row"><code>Layer 2 (light)</code> <span class="dot">·</span> <code>#1D354F1A</code> → <code>#1D354F00</code></div>
|
||
<div class="swatch__row"><code>Layer 1 (dark)</code> <span class="dot">·</span> <code>#8FAE9A2E</code> → <code>#8FAE9A00</code></div>
|
||
<div class="swatch__row"><code>Layer 2 (dark)</code> <span class="dot">·</span> <code>#8FAE9A26</code> → <code>#8FAE9A00</code></div>
|
||
<div class="swatch__row"><code>Base</code> <span class="dot">·</span> <code>var(--surface)</code></div>
|
||
<div class="swatch__actions">
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy="radial-gradient(120% 140% at 100% 0%, var(--header-grad-accent) 0%, rgba(143,174,154,0) 50%)"
|
||
data-copy-label="Gradient Layer 1 kopiert">Layer 1 CSS</button>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy="radial-gradient(120% 140% at 0% 100%, var(--header-grad-primary) 0%, rgba(29,53,79,0) 60%)"
|
||
data-copy-label="Gradient Layer 2 kopiert">Layer 2 CSS</button>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy="background:\n radial-gradient(120% 140% at 100% 0%, var(--header-grad-accent) 0%, rgba(143,174,154,0) 50%),\n radial-gradient(120% 140% at 0% 100%, var(--header-grad-primary) 0%, rgba(29,53,79,0) 60%),\n var(--surface);"
|
||
data-copy-label="Header-Verlauf CSS kopiert">Full CSS</button>
|
||
</div>
|
||
<p class="muted">Einsatz: Page-Header, Hero-Flächen und ruhige visuelle Trennung.</p>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="grid grid--2">
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Primär in UI</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy=".btn--primary{ background:var(--primary); color:#fff; }"
|
||
data-copy-label="CSS kopiert">⧉ Copy</button>
|
||
</div>
|
||
<p class="muted">Primärfarbe für Navigation, Headlines, Primary Actions.</p>
|
||
<div class="row wrap">
|
||
<button class="btn btn--primary" type="button">Primär-CTA</button>
|
||
<button class="btn btn--secondary" type="button">Sekundär</button>
|
||
<button class="btn btn--ghost" type="button">Ghost</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Akzent sparsam</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy="Akzent nur für: Marker, Icons, Fokus, kleine Highlights"
|
||
data-copy-label="Regel kopiert">⧉ Copy</button>
|
||
</div>
|
||
<div class="callout callout--accent">
|
||
<div class="callout__title">Beispiel: dezenter Highlight</div>
|
||
<div class="callout__text">Akzent nur als feiner Rahmen / Marker — nicht als große Fläche.</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Typography -->
|
||
<section class="section" id="typography">
|
||
<div class="section__head">
|
||
<h2 class="h2">Typografie</h2>
|
||
<p class="muted">Source Sans 3. Lesbarkeit und ruhige Hierarchie.</p>
|
||
</div>
|
||
|
||
<div class="grid grid--2">
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Skala</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy="H1 32px/1.2\nH2 24px/1.25\nH3 18px/1.25\nBody 16px/1.55\nSmall 14px/1.55"
|
||
data-copy-label="Typo-Skala kopiert">⧉ Copy</button>
|
||
</div>
|
||
<div class="typeset">
|
||
<h1 class="h1">H1 — Überschrift</h1>
|
||
<h2 class="h2">H2 — Abschnitt</h2>
|
||
<h3 class="h3">H3 — Unterpunkt</h3>
|
||
<p class="lead">Lead: kurze Einleitung. Keine Floskeln, klare Sprache.</p>
|
||
<p>Fließtext: max. 75 Zeichen pro Zeile. <a href="#!" class="link">Link</a> ist deutlich.</p>
|
||
<p class="muted">Muted: Metadaten, Hilfetexte, sekundäre Inhalte.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Copy Snippets</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button" data-copy="max-width:75ch; line-height:1.55;" data-copy-label="CSS kopiert">⧉ Copy</button>
|
||
</div>
|
||
<div class="callout">
|
||
<div class="callout__title">Regel</div>
|
||
<div class="callout__text">Fließtext-Breite begrenzen (<code>max-width: 75ch</code>).</div>
|
||
</div>
|
||
<div class="callout callout--info">
|
||
<div class="callout__title">Betonung</div>
|
||
<div class="callout__text">Fett sparsam; Bedeutung entsteht durch Struktur, nicht Gewicht.</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Buttons -->
|
||
<section class="section" id="buttons">
|
||
<div class="section__head">
|
||
<h2 class="h2">Buttons</h2>
|
||
<p class="muted">Primär = Markenblau. Akzent bleibt dezent.</p>
|
||
</div>
|
||
|
||
<div class="grid grid--2">
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Preview</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy='<button class="btn btn--primary" type="button">Primär</button>'
|
||
data-copy-label="Button-HTML kopiert">⧉ Copy</button>
|
||
</div>
|
||
|
||
<div class="row wrap">
|
||
<button class="btn btn--primary" type="button">Primär</button>
|
||
<button class="btn btn--secondary" type="button">Sekundär</button>
|
||
<button class="btn btn--ghost" type="button">Ghost</button>
|
||
<button class="btn btn--danger" type="button" data-modal-open="#demoModal">Danger</button>
|
||
<button class="btn btn--primary" type="button" disabled>Disabled</button>
|
||
</div>
|
||
<p class="muted">Fokuszustand ist sichtbar, Hover ist zurückhaltend.</p>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Button CSS</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button" data-snippet-copy data-copy-label="CSS kopiert">⧉ Copy</button>
|
||
</div>
|
||
<pre class="snippet__code"><code>.btn--primary{
|
||
background: var(--primary);
|
||
color: #fff;
|
||
border-color: rgba(0,0,0,.06);
|
||
}</code></pre>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Forms -->
|
||
<section class="section" id="forms">
|
||
<div class="section__head">
|
||
<h2 class="h2">Formulare</h2>
|
||
<p class="muted">Klare Labels, Hilfetexte, Validierung. Tool-first: HTML direkt kopieren.</p>
|
||
</div>
|
||
|
||
<div class="grid grid--2">
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Kontaktformular (Snippet)</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button" data-snippet-copy data-copy-label="Formular-HTML kopiert">⧉ Copy</button>
|
||
</div>
|
||
|
||
<div class="snippet" data-snippet>
|
||
<pre class="snippet__code"><code><form class="form">
|
||
<div class="field">
|
||
<label class="label" for="name">Name</label>
|
||
<input class="input" id="name" type="text" />
|
||
<div class="help">Pflichtfeld.</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="label" for="email">E-Mail</label>
|
||
<input class="input" id="email" type="email" />
|
||
</div>
|
||
|
||
<button class="btn btn--primary" type="submit">Senden</button>
|
||
</form></code></pre>
|
||
</div>
|
||
|
||
<hr class="hr"/>
|
||
|
||
<form class="form" data-demo-form>
|
||
<div class="field">
|
||
<label class="label" for="fName">Name</label>
|
||
<input class="input" id="fName" name="name" type="text" placeholder="Vor- und Nachname" autocomplete="name" />
|
||
<div class="help">Pflichtfeld.</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="label" for="fEmail">E-Mail</label>
|
||
<input class="input" id="fEmail" name="email" type="email" placeholder="name@beispiel.de" autocomplete="email" />
|
||
<div class="help">Wir antworten i. d. R. innerhalb von 2 Werktagen.</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="label" for="fTopic">Thema</label>
|
||
<select class="select" id="fTopic" name="topic">
|
||
<option value="">Bitte wählen …</option>
|
||
<option>Allgemeine Anfrage</option>
|
||
<option>Kooperation / Träger</option>
|
||
<option>Dokumente / Nachweise</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="label" for="fMsg">Nachricht</label>
|
||
<textarea class="textarea" id="fMsg" name="msg" rows="5" placeholder="Kurze Beschreibung Ihres Anliegens …"></textarea>
|
||
</div>
|
||
|
||
<div class="field field--inline">
|
||
<label class="check">
|
||
<input type="checkbox" class="check__box" name="privacy" />
|
||
<span class="check__text">Datenschutzhinweise gelesen</span>
|
||
</label>
|
||
<span class="muted">Pflicht für Anfrage.</span>
|
||
</div>
|
||
|
||
<div class="row wrap">
|
||
<button class="btn btn--primary" type="submit">Senden</button>
|
||
<button class="btn btn--secondary" type="reset">Zurücksetzen</button>
|
||
</div>
|
||
|
||
<div class="form__status" aria-live="polite"></div>
|
||
</form>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Zustände</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy="is-error + aria-invalid=true\nhelp + error Text"
|
||
data-copy-label="State-Regeln kopiert">⧉ Copy</button>
|
||
</div>
|
||
|
||
<div class="field is-error">
|
||
<label class="label" for="errEmail">E-Mail</label>
|
||
<input class="input" id="errEmail" type="email" value="name@" aria-invalid="true" />
|
||
<div class="error">Bitte eine gültige E-Mail-Adresse eingeben.</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="label" for="okEmail">E-Mail (ok)</label>
|
||
<input class="input" id="okEmail" type="email" value="name@beispiel.de" />
|
||
<div class="help">Beispiel für korrekte Eingabe.</div>
|
||
</div>
|
||
|
||
<div class="callout callout--info">
|
||
<div class="callout__title">Regel</div>
|
||
<div class="callout__text">Fehlertexte sind konkret, kurz, lösungsorientiert.</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Feedback -->
|
||
<section class="section" id="feedback">
|
||
<div class="section__head">
|
||
<h2 class="h2">Feedback</h2>
|
||
<p class="muted">Modal, Toast, Tooltip, Accordion/Tabs (kopierbar).</p>
|
||
</div>
|
||
|
||
<div class="grid grid--2">
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Modal</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy='<button class="btn btn--secondary" data-modal-open="#demoModal">Modal öffnen</button>'
|
||
data-copy-label="Modal-Trigger kopiert">⧉ Copy</button>
|
||
</div>
|
||
<div class="row wrap">
|
||
<button class="btn btn--secondary" type="button" data-modal-open="#demoModal">Modal öffnen</button>
|
||
<button class="btn btn--ghost" type="button" data-toast="Hinweis gespeichert.">Toast</button>
|
||
<button class="btn btn--ghost" type="button" data-tooltip="Kurzer, sachlicher Hinweis.">Tooltip</button>
|
||
</div>
|
||
<p class="muted">Modal: Esc schließt, Backdrop klick schließt, Fokus-Falle aktiv.</p>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Accordion + Tabs</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy="data-accordion / data-tabs"
|
||
data-copy-label="Hooks kopiert">⧉ Copy</button>
|
||
</div>
|
||
|
||
<div class="tabs" data-tabs>
|
||
<div class="tabs__list" role="tablist" aria-label="Beispiel Tabs">
|
||
<button class="tab is-active" role="tab" aria-selected="true" aria-controls="tabA" id="tabBtnA">Leistung</button>
|
||
<button class="tab" role="tab" aria-selected="false" aria-controls="tabB" id="tabBtnB">Ablauf</button>
|
||
<button class="tab" role="tab" aria-selected="false" aria-controls="tabC" id="tabBtnC">Kontakt</button>
|
||
</div>
|
||
<div class="tabs__panel is-active" role="tabpanel" id="tabA" aria-labelledby="tabBtnA">
|
||
<p>Kurze, klare Beschreibung der Leistung.</p>
|
||
</div>
|
||
<div class="tabs__panel" role="tabpanel" id="tabB" aria-labelledby="tabBtnB">
|
||
<ol class="list"><li>Anfrage</li><li>Rückmeldung</li><li>Abstimmung</li></ol>
|
||
</div>
|
||
<div class="tabs__panel" role="tabpanel" id="tabC" aria-labelledby="tabBtnC">
|
||
<p>Kontaktmöglichkeiten für Träger.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spacer"></div>
|
||
|
||
<div class="accordion" data-accordion>
|
||
<button class="acc__trigger" aria-expanded="false">
|
||
Was sind „Hilfen zur Erziehung“?
|
||
<span class="acc__icon" aria-hidden="true">⌄</span>
|
||
</button>
|
||
<div class="acc__panel" hidden>
|
||
<p class="muted">Kurz, neutral, ohne Pathos.</p>
|
||
</div>
|
||
|
||
<button class="acc__trigger" aria-expanded="false">
|
||
Wie läuft eine Anfrage über den Träger?
|
||
<span class="acc__icon" aria-hidden="true">⌄</span>
|
||
</button>
|
||
<div class="acc__panel" hidden>
|
||
<p class="muted">Schritte, Zuständigkeiten, Zeitrahmen.</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Layout -->
|
||
<section class="section" id="layout">
|
||
<div class="section__head">
|
||
<h2 class="h2">Layout</h2>
|
||
<p class="muted">Cards, Grid, Tables. Vorlagen für spätere Seiten.</p>
|
||
</div>
|
||
|
||
<div class="grid grid--2">
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Card</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy='<article class="card">…</article>'
|
||
data-copy-label="Card-HTML kopiert">⧉ Copy</button>
|
||
</div>
|
||
<p class="muted">Für Inhalt, nicht für Deko. Konsistente Abstände.</p>
|
||
<a class="link" href="#!">Mehr</a>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Callout</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button"
|
||
data-copy='<div class="callout callout--info"><div class="callout__title">Hinweis</div><div class="callout__text">…</div></div>'
|
||
data-copy-label="Callout-HTML kopiert">⧉ Copy</button>
|
||
</div>
|
||
<div class="callout callout--info">
|
||
<div class="callout__title">Hinweis</div>
|
||
<div class="callout__text">Ruhige Information ohne Alarmismus.</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="card layout__table">
|
||
<div class="card__head">
|
||
<h3 class="h3">Tabelle</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button" data-snippet-copy data-copy-label="Table-HTML kopiert">⧉ Copy</button>
|
||
</div>
|
||
<div class="tablewrap">
|
||
<table class="table">
|
||
<thead>
|
||
<tr><th>Dokument</th><th>Status</th><th>Aktion</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>Leistungsbeschreibung</td><td><span class="badge badge--info">Entwurf</span></td><td><button class="btn btn--ghost btn--sm" type="button">Öffnen</button></td></tr>
|
||
<tr><td>Datenschutz</td><td><span class="badge badge--success">Final</span></td><td><button class="btn btn--ghost btn--sm" type="button">Öffnen</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Patterns -->
|
||
<section class="section" id="patterns">
|
||
<div class="section__head">
|
||
<h2 class="h2">Patterns</h2>
|
||
<p class="muted">Basis-Sektionen für die spätere Website (Hero, Section, CTA).</p>
|
||
</div>
|
||
|
||
<article class="card">
|
||
<div class="card__head">
|
||
<h3 class="h3">Hero (Template)</h3>
|
||
<button class="btn btn--ghost btn--sm" type="button" data-snippet-copy data-copy-label="Hero-HTML kopiert">⧉ Copy</button>
|
||
</div>
|
||
|
||
<div class="snippet" data-snippet>
|
||
<pre class="snippet__code"><code><section class="hero">
|
||
<div class="hero__inner">
|
||
<h1 class="h1">Hilfen zur Erziehung – strukturiert & verlässlich</h1>
|
||
<p class="lead">Informationen für öffentliche Träger und Kooperationspartner.</p>
|
||
<div class="row wrap">
|
||
<a class="btn btn--primary" href="#kontakt">Kontakt</a>
|
||
<a class="btn btn--secondary" href="#leistungen">Leistungen</a>
|
||
</div>
|
||
</div>
|
||
</section></code></pre>
|
||
</div>
|
||
|
||
<section class="hero">
|
||
<div class="hero__inner">
|
||
<h1 class="h1">Hilfen zur Erziehung – strukturiert & verlässlich</h1>
|
||
<p class="lead">Informationen für öffentliche Träger und Kooperationspartner.</p>
|
||
<div class="row wrap">
|
||
<a class="btn btn--primary" href="#forms">Kontakt</a>
|
||
<a class="btn btn--secondary" href="#brand">Leitlinien</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</article>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<span class="muted">JuConnect · Styleguide v0.2</span>
|
||
</footer>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Modal -->
|
||
<div class="modal" id="demoModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" hidden>
|
||
<div class="modal__backdrop" data-modal-close></div>
|
||
<div class="modal__panel" role="document">
|
||
<div class="modal__head">
|
||
<h2 class="h3" id="modalTitle">Beispiel-Modal</h2>
|
||
<button class="btn btn--ghost btn--icon" type="button" aria-label="Schließen" data-modal-close>✕</button>
|
||
</div>
|
||
<div class="modal__body">
|
||
<p class="muted">
|
||
Modals sparsam verwenden. Für kritische Bestätigungen oder komprimierte Prozesse.
|
||
</p>
|
||
</div>
|
||
<div class="modal__foot">
|
||
<button class="btn btn--secondary" type="button" data-modal-close>Abbrechen</button>
|
||
<button class="btn btn--primary" type="button" data-toast="Aktion bestätigt.">Bestätigen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast container -->
|
||
<div class="toasts" aria-live="polite" aria-relevant="additions"></div>
|
||
|
||
<script src="./assets/js/app.js"></script>
|
||
</body>
|
||
</html>
|