Entwurf
Farbe
Hintergrund

Prototyp · Bausteine

Bausteine

Jeder Baustein mit echtem Inhalt, Zweck, Feldern, Varianten und der Abbildung in WordPress. Ein Baustein existiert nur, weil ein Inhalt ihn braucht.

SiteHeader .site-header

Zweck: Orientierung und Navigation. Vollbreite Glasleiste, sticky, Inhalt auf Content-Breite. Nicht für: Buttons und Werbeaufrufe, Suche, Social-Icons.

Siehe oben auf dieser Seite. Die Leiste ist auf jeder Seite identisch.

Inhalt

  • Logo (Pflicht, führt zur Startseite)
  • maximal 6 Navigationspunkte (Pflicht), derzeit 5

Varianten und Zustände

  • Desktop ab 1200 px: Leiste
  • darunter: Schublade mit Menü-Knopf, Label bleibt „Menü“ (keine Breitenänderung)
  • aktiver Punkt: Akzentlinie, aria-current
  • ohne JS: Navigation im Fluss

WordPress

Template-Part Kopfbereich mit Core-Blöcken Site Logo und Navigation (Overlay-Menü). Menüpunkte pflegt man unter Design → Navigation.

Barrierefreiheit

  • Esc schließt die Schublade, Fokus bleibt darin
  • Menü-Knopf mit aria-expanded und aria-controls
  • Skip-Link „Zum Inhalt springen“ davor

Hero .hero · .page-hero

Zweck: Erste Aussage einer Seite und der Weg ins Angebot. Nicht für: Slider, Videos, mehrere Botschaften.

Unterseite

Trainingszeiten

Alle Termine der Woche auf einen Blick.

Inhalt

  • Eyebrow (optional)
  • H1 (Pflicht)
  • Lead, 1–2 Sätze (Pflicht)
  • 1–2 Buttons (Start)
  • Bild mit Bildunterschrift (Start, optional)

Varianten und Zustände

  • Start: mit Bild
  • Unterseite: kompakt, ohne Bild, optional Sprunglinks

WordPress

Pattern „Hero“ aus Group (Stil Glas), Heading, Paragraph, Buttons, Image. Unterseiten-Hero als zweites Pattern.

NoticeBanner .notice

Zweck: Zeitkritischer redaktioneller Hinweis: Pause, Ausfall, Termin. Vom Verein schnell ein- und ausschaltbar. Nicht für: Rückmeldungen nach einer Aktion (dafür gibt es Alert), Dauerinfos.

Winterpause vom bis

In dieser Zeit ruht der Trainingsbetrieb. Der Wochenplan unten gilt davor und danach.

Inhalt

  • Titel mit Datum (Pflicht)
  • ein Satz Text (optional)
  • Link (optional)

Varianten und Zustände

  • Info (Standard)
  • Wichtig (.notice--wichtig, Akzentbalken)

WordPress

Synced Pattern „Hinweis“ auf der Startseite. Ein- und Ausschalten: Block ausblenden oder löschen. Später als Block-Stil-Variante einer Group.

EventList .events · .event

Zweck: Wenige Termine und Hinweise mit Vorlauf auf der Startseite: Winterpause, Jahreshauptversammlung, Kursstart. Nicht für: kurzfristige Trainingsausfälle, Berichte, ein Archiv.

Termine & Hinweise

Was demnächst ansteht

  1. Jahreshauptversammlung

    Samstag,

    Für alle Mitglieder. Uhrzeit, Ort und Tagesordnung stehen in der Einladung.

  2. bis

    Winterpause

    bis

    In dieser Zeit ruht der Trainingsbetrieb. Danach wird wieder nach Trainingsplan trainiert.

Leerzustand

Zurzeit stehen keine besonderen Termine an. Trainiert wird nach Trainingsplan.

Inhalt

  • Datum oder Zeitraum (Pflicht, Kachel und ausgeschrieben)
  • Titel (Pflicht)
  • ein Satz (Pflicht)
  • Link (optional)
  • Ablaufdatum data-bis (Pflicht)

Varianten und Zustände

  • ein Termin oder Zeitraum (Kachel mit „bis …“)
  • alle Einträge gleich gewichtet, keine Hervorhebung einzelner Termine
  • 0 Einträge: Leerzustand
  • 1 Eintrag: volle Breite, 2–4: Raster mit 2 Spalten

WordPress

Pattern „Termine“ auf der Startseite, direkt im Editor gepflegt: pro Termin eine Group mit Datum, Titel, Text. Abgelaufene Einträge blendet das Theme-Skript nach data-bis aus (Feld „Zusätzliche CSS-Klasse“ bzw. Block-Attribut). Kein Beitragsarchiv.

Barrierefreiheit

  • Datum als <time datetime>, ausgeschrieben im Text, die Kachel allein reicht nicht
  • ohne JS bleiben alle Einträge sichtbar

OfferCard (Kachel) .offer-card

Zweck: Ein Angebot anteasern, z. B. auf der Startseite. Nicht für: vollständige Angebotsinfos, mehrere Links pro Karte.

  • Welpen- & Junghundeschule

    Spielerisch die Welt kennenlernen, erste Kommandos üben und als Team zusammenwachsen. Für Welpen bis 6 Monate und Junghunde ab 6 Monaten.

    • Mittwoch ab 17:30 Uhr
    • 10 € pro Stunde

  • Erziehungskurs

    Grundgehorsam, Leinenführigkeit und Abruf in Theorie und Praxis. Für Anfänger und auch für Nichtmitglieder.

    • ab 6 Monaten
    • 6 Doppelstunden, 130 €

Inhalt

  • Bild (optional, sonst Platzhalter)
  • Titel mit Link (Pflicht)
  • 1–2 Sätze (Pflicht)
  • 1–3 Eckdaten-Chips (optional)

Varianten und Zustände

  • mit Bild
  • kompakt ohne Bild (.offer-card--compact)
  • Hover: hebt sich an, Fokus: Rahmen um die ganze Karte

WordPress

Pattern aus Group, Image, Heading (mit Link), Paragraph, Buttons-Block als Chips. Ganze Karte klickbar über CSS am Titel-Link.

Barrierefreiheit

  • nur ein Link im Markup, der Rest der Karte ist Klickfläche per CSS
  • „Mehr erfahren“ ist rein visuell (aria-hidden)

OfferBlock .offer

Zweck: Ein Angebot vollständig: was, für wen, wann, Kosten, Anmeldung, wer leitet. Nicht für: Werbetexte, allgemeine Erklärungen zum Hundesport.

Für jeden Hund

Agility

Beim Agility bewältigt ihr als Team einen Parcours, ähnlich wie beim Springreiten. Es kommt auf Gehorsam, Distanzkontrolle, Tempo und einen guten Führstil an. Mitmachen kann jeder Hund, Größe und Rasse sind egal. Wichtig ist, dass ihr beide Spaß habt.

Mit positiver Bestärkung lernt dein Hund die Hindernisse kennen: Hürde, Laufsteg, Tunnel, Slalom, Wippe, A-Wand, Weitsprung, Sacktunnel, Reifen und Mauer. Wir bauen alles gelenkschonend auf und lassen den Hund auch mal allein arbeiten. Ob als Freizeitspaß oder als Turniersport, die Regeln sind dieselben.

Wir trainieren in Gruppen von je ca. 5 Teams, damit jedes Team genug Zeit bekommt.

Was du zum Probetraining mitbringst

  • Leckerlis, die ohne Kauen gehen, zum Beispiel Fleischwurst oder Käse
  • Spielzeug
  • Leine, keine Rollleine
  • Festes Schuhwerk

Füttere deinen Hund einige Stunden vorher möglichst nicht mehr und lass ihn sich vor dem Training noch einmal lösen.

Für wen
Jeder Hund, egal welche Größe oder Rassefür den Kurs ab 6 Monaten
Wann
Montag 18:30–19:30 Uhr und 19:30–20:30 Uhr
Kosten
Probetraining kostenlosdanach auf Anfrage
Anmeldung
Probetraining nach Absprache, über das Kontaktformular

Wer dich begleitet

Du hast Erfahrung mit Agility und möchtest eine Gruppe leiten? Wir suchen eine Trainerin oder einen Trainer.

Probetraining anfragen

Inhalt

  • Eyebrow, Titel mit Anker (Pflicht)
  • Text (Pflicht)
  • KeyFacts (Pflicht)
  • Checkliste (optional)
  • Personen (optional)
  • CTA (Pflicht)

Varianten und Zustände

  • mit und ohne Checkliste
  • mit Personen kompakt

WordPress

Pattern „Angebot“: Columns mit Group (Text, List) und Group (Details-Liste, Personen, Buttons). Der Anker ist das HTML-Anker-Feld der Überschrift.

KeyFacts .key-facts

Zweck: Eckdaten scannbar machen. Nicht für: Fließtext, mehr als 5 Zeilen.

Für wen
Jeder Hund, egal welche Größe oder Rassefür den Kurs ab 6 Monaten
Wann
Montag 18:30–19:30 Uhr und 19:30–20:30 Uhr
Kosten
Probetraining kostenlosdanach auf Anfrage
Anmeldung
Probetraining nach Absprache, über das Kontaktformular

Inhalt

  • Für wen · Wann · Kosten · Anmeldung, je Icon, Begriff, Wert

Varianten und Zustände

  • Wert mit Zusatzzeile (.muted)

WordPress

Core-Block Details-Liste gibt es nicht. Umsetzung als kleiner Custom Block „Eckdaten“ mit vier Feldern, der die Icons selbst setzt.

Checklist .checklist

Zweck: Was mitbringen, Voraussetzungen. Nicht für: Aufzählungen ohne Handlungsbezug.

  • Leckerlis, die ohne Kauen gehen, zum Beispiel Fleischwurst oder Käse
  • Spielzeug
  • Leine, keine Rollleine
  • Festes Schuhwerk

Inhalt

  • Listenpunkte (Pflicht)

Varianten und Zustände

  • –

WordPress

Core-Block Liste mit Block-Stil „Checkliste“.

WeekSchedule .schedule

Zweck: Der Wochenplan. Nicht für: Termine mit Datum (dafür EventList).

Tag Zeit Angebot Leitung Hinweis
Mo 18:30–19:30 Uhr Agility Probetraining möglich
Mo 19:30–20:30 Uhr Agility Probetraining möglich
Di später Nachmittag Unterordnung Lauren Helm nur Mitglieder
Di 18:00–22:00 Uhr Offenes Training nur Mitglieder
Mi ab 17:30 Uhr Welpen- und Junghundestunde Monika Bodirsky, Vertretung Lauren Helm offen für alle, Anmeldung nötig
Do – trainingsfrei
Fr später Nachmittag Unterordnung Chantal Rücker nur Mitglieder
Sa nach Absprache Fährtenarbeit Anmeldung nötig
So 10:00–11:00 Uhr Unterordnung Conny Stehlik
So 10:00–11:00 Uhr Grundlagen Gabi Fritsch nur Mitglieder
Kurs nach Absprache Erziehungskurs Conny Stehlik, Lauren Helm offen für alle, Anmeldung nötig

Inhalt

  • Tag · Zeit · Angebot · Leitung · Hinweis, eine Zeile pro Termin

Varianten und Zustände

  • Desktop: Tabelle
  • mobil: Tageskarten, Beschriftung per CSS aus der Spaltenposition
  • heutiger Tag markiert
  • Hinweise „nur Mitglieder“, „Anmeldung nötig“, „offen für alle“, „kostenlos“ werden zu Chips

WordPress

Core-Block Tabelle mit Block-Stil „Wochenplan“. Die Redaktion pflegt nur eine einfache Tabelle. Kein doppelter Inhalt für Mobil. Tag in Spalte 1 als „Mo“, „Di“ … schreiben, damit „Heute“ funktioniert.

WeekStrip .week-strip

Zweck: Kompakte Woche auf der Startseite. Nicht für: den vollständigen Plan.

  1. Mo
    • Agility18:30–20:30 Uhr
  2. Di
    • Unterordnungspäter Nachmittag
    • Offenes Training18:00–22:00 Uhr
  3. Mi
    • Welpen & Junghundeab 17:30 Uhr
  4. Do
    • trainingsfrei
  5. Fr
    • Unterordnungspäter Nachmittag
  6. Sa
    • Fährtenarbeitnach Absprache
  7. So
    • Unterordnung & Grundlagen10:00–11:00 Uhr

Inhalt

  • 7 Tage, pro Tag Stichworte und Zeit
  • Link zum Plan

Varianten und Zustände

  • heutiger Tag hervorgehoben
  • trainingsfreier Tag gedämpft

WordPress

Pattern aus Columns (7) mit Paragraphs.

StepList .steps

Zweck: Ein Ablauf in Schritten, z. B. der Weg in den Verein. Nicht für: ungeordnete Listen.

  1. Welpenstunde

    Für Welpen ab der 8. Lebenswoche bis etwa 6 Monate. Die Welpenstunde ist mittwochs ab 17:30 Uhr.

    Zur Welpenschule

  2. Junghundegruppe

    Die Junghundegruppe überbrückt die Zeit bis zum nächsten Kurs. Du darfst bis zu 4-mal zum Reinschnuppern kommen.

    Trag dich am besten gleich in die Kursliste am Vereinsheim ein. Dann planen wir ohne lange Wartezeit. Zur Junghundeschule

  3. Erziehungs- oder Agilitykurs

    Für den Kurs sollte dein Hund mindestens 6 Monate alt sein. Die Trainingstage legen wir mit den Teilnehmenden fest.

    Zum Erziehungskurs · Zu Agility

  4. Aufnahme in den Verein

    Nach dem Kurs nehmen wir dich gern auf, ohne Aufnahmegebühr.

Inhalt

  • Titel und Text je Schritt (Pflicht)
  • Hinweis pro Schritt (optional)

Varianten und Zustände

  • horizontal (.steps--row, Start)
  • vertikal mit Linie (.steps--vertical)

WordPress

Core-Block Liste (nummeriert) mit Block-Stil „Schritte“, Titel fett in der ersten Zeile.

PersonCard .person

Zweck: Ansprechpartner und Team, Foto links. Nicht für: Lebensläufe, Kontaktdaten von Ehrenamtlichen.

  • Lauren Helm

    1. Übungsleiterin, Übungsleitervorsitzende

    Hund: Babbels (Mix)

    Trainiert: Welpenstunde (Vertretung), Unterordnung, Erziehungskurs

    Qualifikationen
    • Begleithundeprüfung
    • Jugendkreismeisterin
    • Seminare zu Erziehung und Verhalten
    • Welpenseminar
    • Trainerschein

  • Agility-Trainer/in gesucht

    Agility

    Für unsere Agility-Gruppen suchen wir eine Trainerin oder einen Trainer. Du hast Erfahrung und Lust, im Verein mitzumachen? Dann melde dich.

    Nachricht schreiben

Monika Bodirsky

Hundetrainerin, Basis- und Junghundeausbilderin

Inhalt

  • Foto Hochformat 2 : 3 (optional)
  • Name, Rolle (Pflicht)
  • Hund, Trainiert (optional)
  • Qualifikationen aufklappbar (optional)
  • Button „Nachricht schreiben“ nur bei offiziellen Ansprechpartnern

Varianten und Zustände

  • groß (.person--large, Team)
  • Zeile (.person--row, Kontaktliste: Foto, Text, Button nebeneinander, Button bricht nie um)
  • kompakt im Angebot (.person--compact)
  • ohne Foto: Initialen auf Duoton, kein „Bild folgt“
  • gesucht (.person--wanted)

WordPress

Pattern „Person“ aus Media & Text (Bild links) mit Heading, Paragraph, Details-Block, Button. Ohne Foto: Pattern-Variante mit Initialen.

RoleList .roles

Zweck: Vorstand und Ämter kompakt. Nicht für: Personen mit Foto.

Vorstand Felix Vogel Hans Sam
Kassier Roland Eppig Jürgen Hartlaub
Schriftführung Gudrun Eller Conny Stehlik
Delegierte Martin Löffler, Conny Hochmuth

Inhalt

  • Amt (Pflicht)
  • 1. und 2. Besetzung nebeneinander, damit Paare zusammenbleiben
  • Ämter ohne Rangfolge (Delegierte): eine Zelle über beide Spalten, ans Ende

Varianten und Zustände

  • Tabelle, max. 52 rem breit
  • unter 600 px: Amt oben, Namen darunter nebeneinander

WordPress

Core-Block Tabelle (drei Spalten) mit Block-Stil „Ämter“.

LocationCard .location

Zweck: Anfahrt zum Trainingsgelände. Nicht für: eingebettete Karten (bräuchten ein Cookie-Banner).

Karte: Das HSV-Trainingsgelände liegt nördlich von Großwallstadt am Ende der Niedernberger Straße, zwischen den Baggerseen und dem Main. Main Großwallstadt ↑ Niedernberg B 469 Niedernberger Straße HSV-Trainingsgelände N
Kartendaten © OpenStreetMap-Mitwirkende (ODbL)

Anfahrt

So findest du uns

HSV-Trainingsgelände
Niedernbergerstraße 15
63868 Großwallstadt
Route planen mit Google Maps Route planen mit OpenStreetMap

Die Links öffnen externe Kartendienste. Vorher wird nichts geladen.

Postanschrift

HSV Großwallstadt 1995 e.V.
c/o 1. Vorstand Felix Vogel
Turmstraße 32
63868 Großwallstadt

Inhalt

  • Adresse (Pflicht)
  • Karte aus OSM-Daten, lokal als SVG (Pflicht, mit Attribution)
  • Links „Route planen“ (Pflicht)
  • Parkhinweis (optional)

Varianten und Zustände

  • Karte folgt dem Theme über Tokens

WordPress

Pattern „Anfahrt“: Columns mit Image (Karte als selbst erzeugte Vektorgrafik) und Paragraph + Buttons. Kein Karten-Plugin, keine eingebettete Karte.

ContactForm .form

Zweck: Der Hauptkontaktweg. Keine E-Mail-Adresse auf der Website nötig. Nicht für: Newsletter, Umfragen, Mitgliedsanträge mit Bankdaten.

Probier es aus

Felder mit * sind Pflichtfelder.

Zu deinem Hund (optional)

Erzähl kurz, was du dir wünschst. Ein, zwei Sätze reichen.

Prototyp: Es wird nichts verschickt.

Alert-Typen

Danke, deine Nachricht ist angekommen.

Wir melden uns in der Regel innerhalb weniger Tage.

Weitere Nachricht schreiben

Bitte prüfe 2 Felder.

Das hat leider nicht geklappt.

Bitte versuch es später noch einmal. Deine Eingaben sind noch da.

Prototyp

In diesem Entwurf wird nichts verschickt.

Button im Sende-Zustand

Inhalt

  • Name*, E-Mail*
  • Telefon (optional)
  • Anliegen* (per ?anliegen= vorbelegbar)
  • Zum Hund (optional, Fieldset): Alter, Rasse oder Mix, Beispiele als Platzhalter
  • Nachricht*
  • Datenschutz-Checkbox*
  • Honeypot website_url, Zeitfalle data-started-at

Varianten und Zustände

  • leer abgeschickt: Feldfehler + Fehler-Alert mit Sprunglinks
  • danach Prüfung bei Verlassen und Tippen
  • gültig: Sende-Zustand, dann Erfolgs-Alert
  • ?senden=fehler: Server-Fehler, Eingaben bleiben

WordPress

Fluent Forms (Free): Einträge in WordPress gespeichert, bedingte Benachrichtigung je Anliegen, Empfänger nur im Backend, Honeypot, optional Turnstile. CSS-Klassen der Felder auf die Prototyp-Klassen mappen. Mails per SMTP.

Barrierefreiheit

  • Sternchen ist aria-hidden, Pflicht über required und aria-required
  • optionale Felder zusätzlich mit „(optional)“
  • Fehler: aria-invalid, Meldung per aria-describedby, Hinweistext bleibt verknüpft
  • Fehler sichtbar durch Farbe, dickeren Rahmen, Balken links und Icon
  • Fehler-Alert bekommt den Fokus, role="alert"; Erfolg role="status"
  • Sende-Button gesperrt mit aria-busy, kein Doppel-Absenden
  • ohne JS greift die HTML5-Prüfung

FormField .field

Zweck: Ein Formularfeld mit allem Drumherum. Felder bleiben deckend, Glas ist nur die Bühne. Nicht für: Felder ohne sichtbares Label.

Text

Default
Hover
Fokus
Ausgefüllt
Fehler

Bitte gib deinen Namen an.

Deaktiviert

E-Mail

Default
Hover
Fokus
Ausgefüllt
Fehler

Das sieht nicht nach einer E-Mail-Adresse aus.

Deaktiviert

Telefon

Default
Hover
Fokus
Ausgefüllt
Fehler

Bitte nur Ziffern, Leerzeichen und + / - ( ) verwenden.

Deaktiviert

Auswahl

Default
Hover
Fokus
Ausgefüllt
Fehler

Bitte wähle aus, worum es geht.

Deaktiviert

Textfeld

Default
Hover
Fokus
Ausgefüllt
Fehler

Bitte schreib uns kurz, worum es geht.

Deaktiviert

Radio-Gruppe und Checkbox

Radio
Hund schon im Verein?
Radio Fehler
Hund schon im Verein?

Bitte wähle eine Antwort.

Checkbox
Checkbox Fehler

Bitte bestätige die Datenschutzerklärung.

Deaktiviert

Inhalt

  • Label (Pflicht)
  • Pflichtmarkierung oder „(optional)“
  • Hinweistext (optional)
  • Eingabe
  • Fehlermeldung

Varianten und Zustände

  • Typen: Text, E-Mail, Telefon, Auswahl, Radio-Gruppe, Checkbox, Textarea
  • Zustände: default, hover, focus, ausgefüllt, error, disabled
  • zwei Felder in einer Zeile teilen sich per Subgrid die Zeilen Label / Hinweis / Eingabe / Fehler, die Eingaben stehen immer auf gleicher Höhe
  • Beispiele als Platzhalter, echte Anweisungen als sichtbarer Hinweis

WordPress

Fluent-Forms-Felder; Klassen .field, .field__control, .field__error über eigenes CSS auf das Plugin-Markup übertragen.

Alert .alert

Zweck: System-Feedback nach einer Aktion, vor allem nach dem Absenden. Nicht für: redaktionelle Hinweise (dafür NoticeBanner).

Alle vier Typen stehen oben beim Formular.

Inhalt

  • Icon, Titel (Pflicht)
  • Text, Liste oder Link (optional)

Varianten und Zustände

  • success, error, warning, info

WordPress

Kommt vom Formular-Plugin; dessen Meldungen per CSS auf .alert stylen. Nicht für Redaktion.

NewsCard, NewsList, Post (zurückgestellt) .news-card · .post

Zweck: Berichte und Neuigkeiten. Derzeit auf keiner Seite im Einsatz. Termine stehen in der EventList auf der Startseite. Nicht für: Termine mit Vorlauf (dafür EventList), Dauerinhalte.

  1. Hinweis

    Winterpause: Ab 07.01.2026 wird wieder trainiert

    Nach der Winterpause geht es am 07.01.2026 auf dem Platz weiter. Bis dahin ruht der Trainingsbetrieb.

  2. Bericht

    So lief der Saisonstart

    Musterbeitrag: So sieht ein Bericht mit Bild in der Liste aus. Titel, ein, zwei Sätze Anriss, und die ganze Karte führt zum Beitrag.

Inhalt

  • Datum, Kategorie (Pflicht)
  • Titel, Anriss (Pflicht)
  • Bild (optional)

Varianten und Zustände

  • mit und ohne Bild
  • Einzelansicht mit Lesespalte

WordPress

Erst bei Bedarf: WordPress-Beiträge, Liste über Query Loop, Einzelansicht über das Beitrags-Template.

CtaBand .cta-band

Zweck: Ruhiger Abschluss einer Seite mit einem Verweis, z. B. „Fragen zum Training?“. Höchstens einer pro Seite. Nicht für: Werbeaufrufe („Lust auf …?“, „Jetzt …“), mehr als zwei Buttons.

Trainingsgelände

Niedernbergerstraße 15, 63868 Großwallstadt. Fragen beantworten wir über das Kontaktformular.

Nachricht schreiben Anfahrt

Inhalt

  • Titel (Pflicht)
  • ein Satz (optional)
  • 1–2 Buttons (Pflicht)

Varianten und Zustände

  • getöntes Glas

WordPress

Pattern „Aufruf“ aus Group (Stil Glas getönt), Heading, Paragraph, Buttons.

Button, Tag, SectionHeader, Platzhalter .btn · .tag · .eyebrow · .ph

Zweck: Grundbausteine in allen anderen. Nicht für: –

Button
Primär Sekundär Ghost Link
Klein
Getönt
Primär Sekundär Link
Tag, Chip, Badge
  • offen für alle
  • nur Mitglieder
  • Anmeldung nötig
  • Mittwoch ab 17:30 Uhr
  • Heute
  • Sprunglink
SectionHeader und Eyebrow

Eyebrow

Abschnittsüberschrift

Ein Satz, der den Abschnitt einleitet.

Bild-Platzhalter

Inhalt

  • Button: Text, optional Icon
  • Tag: kurzer Text, optional Icon
  • Platzhalter: Icon und Beschriftung, die gleich die Fotowunschliste ist

Varianten und Zustände

  • Button: primary, secondary, ghost, link; hover, focus-visible, active, disabled, busy
  • Tag: soft, outline, accent, heute, als Link

WordPress

Core-Blöcke Buttons (Stile Primär/Sekundär/Ghost/Link), Heading, Paragraph. Tags als Buttons-Block-Stil „Chip“ ohne Link.

Barrierefreiheit

  • Trefferfläche mindestens 44 px, auch bei kleinen Buttons
  • Fokusring 3 px in jedem Theme mindestens 3 : 1