Design-System

Komponenten & Layout-Varianten.

Interne Referenzseite (noindex). Alle Komponenten stammen aus theme.json, critical.css und site.css des Themes „Technical SEO Flex“. Inhalte werden ausschließlich über Gutenberg-Blöcke mit den hier gezeigten CSS-Klassen gepflegt – ohne Inline-Styles.

Primär-Button

Outline-Button

Proof-Item (tsf-proof + tsf-i-*)

Icon book

Icon trophy

Icon clock

Hero-Aside-Karte (tsf-card)

Checkliste: tsf-checks
Weitere Varianten: Alert-Karte, Formular, Expertenkarte

Dokumentation

Klassenreferenz

Section-Varianten, Layout und Komponenten.

Klasse	Element	Zweck
tsf-section + –white \| –tint \| –ice \| –blue \| –dark	Gruppe (section, volle Breite)	Abschnitt mit Innenabstand und Hintergrund
tsf-hero, tsf-hero–page, tsf-hero-grid, tsf-hero-copy, tsf-hero-visual, tsf-hero-stage, tsf-hero-dash	Gruppen / Bild	Hero-Layout (Critical CSS)
tsf-eyebrow, tsf-lead, tsf-subline, tsf-label, tsf-note, tsf-meta	Absatz	Typografie-Varianten
tsf-section-heading, tsf-section-foot	Gruppe / Absatz / Buttons	Überschriftenzeile und Abschluss
tsf-flex + –2 … –6	Gruppe	Responsives Flexbox-Raster
tsf-card + –featured \| –tile \| –link \| –loc \| –all	Gruppe	Karten
tsf-i-{icon}	Gruppe / Absatz	Icon-Kachel per ::before
tsf-price, tsf-pill, tsf-badge, tsf-more	Absatz	Preise, Labels, Textlinks
tsf-checks, tsf-alerts, tsf-tags, tsf-flow, tsf-timeline, tsf-footer-links	Liste	Listen-Varianten
tsf-steps, tsf-split (–wide, –reverse), tsf-align-start	Gruppe	Prozess- und Zweispalter
tsf-faq	Gruppe mit Details-Blöcken	Native Akkordeons
tsf-table, tsf-compare	Tabellen-Block	Tabellen und Vergleich
tsf-author, tsf-avatar, tsf-expert, tsf-award, tsf-role	Gruppe / Absatz	E-E-A-T-Komponenten
tsf-article-layout, tsf-prose, tsf-aside, tsf-toc, tsf-article-meta	Gruppe / Shortcode	Ratgeber-Layout
tsf-mini, tsf-stack, tsf-trust-strip, tsf-proof	Gruppe	Kompakte Zeilen
tsf-cta-band	Section (blau)	Abschluss-CTA
tsf-callout, tsf-notice	Gruppe / Absatz	Hinweisboxen
[tsf_lead_form variant="compact\|full" service="…"]	Shortcode-Block	Lead-Formular mit serverseitiger Verarbeitung
[tsf_article_meta]	Shortcode-Block	Autor, Veröffentlichungs- und Prüfdatum

Seiten-Metadaten: Benutzerdefinierte Felder tsf_seo_title, tsf_meta_description, tsf_reviewed (JJJJ-MM-TT), tsf_article (1), tsf_noindex (1).

Karten

Karten & Raster

tsf-flex–4 mit Standard-, Featured-, Kachel- und Link-Karte.

Pill

Standardkarte

Beschreibung

Check 1
Check 2

350 €

Meta-Zeile

Button →

Badge

Featured

Hervorgehobene Karte

Check 1
Check 2

499 €/Monat

Kachel

tsf-card–tile

Link-Karte

tsf-card–link

Textlink →

Ort

Standortlink →

Alle

Übersicht →

Mini-Zeile

Zweite Zeile

Abläufe

Prozess, Ablauf & Vergleich

Schritt

Text

Schritt

Text

Schritt

Text

Schritt

Text

Flow 1Text
Flow 2Text
Flow 3Text

Leistung	A	B
Zeile	✓	–
Zeile	✓	✓

Vergleichstabelle (tsf-compare)

Autor

E-E-A-T

CB

Cyrus Badde

SEO-Experte für technisches SEO, Autor und Berater

Cyrus Badde arbeitet seit mehr als 20 Jahren professionell in der Suchmaschinenoptimierung – mit Schwerpunkt auf technischer Optimierung, SEO-Strategie und Content-Strategie für anspruchsvolle Websites und große Digitalprojekte. Er ist Autor mehrerer Fachbücher und wurde im Agentur-Tipp SEO Wettbewerb 2023 für die „Beste Content Strategie“ ausgezeichnet.

Mehr über Cyrus Badde →

Beste Content Strategie
Auszeichnung im Agentur-Tipp SEO Wettbewerb 2023

Ihr Experte: Cyrus Badde

CB

Cyrus Badde
Technisches SEO, Audits & Beratung

Mehr als 20 Jahre professionelle SEO-Erfahrung
Autor mehrerer Fachbücher
Gewinner „Beste Content Strategie“, Agentur-Tipp SEO Wettbewerb 2023
Erfahrung mit anspruchsvollen Websites und großen Digitalprojekten

Mehr über Cyrus Badde →

Timeline-EintragNur mit verifizierten Daten verwenden.
Timeline-EintragText

Catena Media
BayBets
Growth Leads
BILD
MyToys
Arvato
Ogilvy
Adpepper
LEAP
Kryptoszene
Betting.net
BB-Verpackungen
nico-cruises
Billiger Mietwagen
e-hoi

Inhalte

FAQ, Hinweise & Alerts

Frage

Antwort

Frage 2

Antwort 2

Alert-Karte

Problem 1
Problem 2

Callout: Hervorgehobener Hinweis.

Notice: Platzhalter für Redaktion (nur in Entwürfen verwenden).

Formular full

Lead-Formular

Variante „full“ mit Name, Unternehmen, Leistung, Website-Größe.

Formular

Pflichtfelder: Website, Name, E-Mail und Leistung.

CTA-Band (tsf-cta-band)

Blaue Abschluss-Sektion mit zwei Buttons und Karte oder Bild.

Primär →

Outline

Karte

Punkt
Punkt