Styleguide
Typografie
Eine Klasse je Figma-Textstil (assets/pb-typography.css). Figma kennt keine Mobile-Skala: Komponenten wechseln je Breakpoint den Stil (Hero: Display XL Desktop, Display S Mobile).
pb-text-display-xl
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-display-l
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-display-m
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-display-s
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-h2
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-h3
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-h4
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-body-l
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-body-m
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-body-s
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-body-xs
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-label-l
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-label-m
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-label-s
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-caption
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-overline
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-price-l
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
pb-text-nav
Powerbar – Fuel for your run: Energize 0123456789 äöü ß
Rich Text (pb-rte)
Überschrift H2 im Fließtext
Beispielabsatz in Body M. Dieser Text zeigt Zeilenhöhe und Absatzabstand für Inhalte aus dem Editor, etwa Seiten, Blogartikel und Produktbeschreibungen.
Überschrift H3 im Fließtext
Beispielabsatz in Body M. Dieser Text zeigt Zeilenhöhe und Absatzabstand für Inhalte aus dem Editor, etwa Seiten, Blogartikel und Produktbeschreibungen.
- Listenpunkt im Fließtext
- Listenpunkt im Fließtext
Kleingedrucktes in Caption-Größe.
Sektionsüberschrift (pb-section-heading)
Bestseller
Beispiel-Untertitel
left
Bestseller
Beispiel-Untertitel
center
Invertiert auf dunklem Hintergrund
Bestseller
Beispiel-Untertitel
inverse
Layout
Seitenrand 16 px (Mobile) und 80 px (ab 1024 px), Content maximal 1280 px – aus den Figma-Templates gemessen. pb-grid bekommt die Spaltenzahl über --pb-grid-columns, den Abstand über --pb-grid-gap.
pb-grid mit 2 Spalten
1
2
pb-grid mit 3 Spalten
1
2
3
pb-grid mit 4 Spalten
1
2
3
4
pb-container
Content-Spalte (max. 1280 px, Seitenrand aus --pb-page-margin)
Icons
cart
plus
check
heart
chevron-up
chevron-down
chevron-left
chevron-right
minus
burger
facebook
instagram
tiktok
globe
search
trash
user
close
bean
drop
gluten
mix
sodium
proof
sugar
time
vegan
Icons auf dunklem Hintergrund
bean
drop
gluten
mix
sodium
proof
sugar
time
vegan
Buttons
Outline-inverse (auf dunklem Hintergrund)
Icon- und Zustandsvarianten
Eingabefelder (pb-input)
default
Hinweistext unter dem Feld.
value + hint
Bitte prüfe deine Eingabe.
error
disabled
email / hide_label
search
Checkbox, Radio, Select
pb-checkbox
pb-radio
pb-select
pb-select / disabled
Switch, Mengen-Stepper, Optionskarte
pb-switch
pb-quantity-stepper
pb-option-card
Preis
Kein Produkt ausgewählt. Im Block-Setting „Produkt“ ein Produkt aus dem Staging-Shop wählen, um pb-price mit echten Preisdaten zu zeigen.
Markup-Vorschau (Demo)
Statische Demo ohne Produktdaten – zeigt Klassen und Layout von pb-price mit festen Beispieltexten, keine echten Preise.
Angebotspreis
19,99 €
Statt
24,99 €
3,33 € / 100 g
inkl. MwSt., zzgl. Versandkosten
Bild
Kein Bild ausgewählt. Im Block-Setting „Bild“ ein Bild wählen, um pb-image mit srcset, sizes und Lazy Loading zu zeigen.