Styleguide
Typography
One class per Figma text style (assets/pb-typography.css). Figma has no mobile scale: components switch styles per breakpoint (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)
Heading H2 in body copy
Sample paragraph in Body M. This text shows line height and paragraph spacing for editor content such as pages, blog posts and product descriptions.
Heading H3 in body copy
Sample paragraph in Body M. This text shows line height and paragraph spacing for editor content such as pages, blog posts and product descriptions.
- List item in body copy
- List item in body copy
Fine print in caption size.
Section heading (pb-section-heading)
Bestseller
Sample subtitle
left
Bestseller
Sample subtitle
center
Inverse on dark background
Bestseller
Sample subtitle
inverse
Layout
Page margin 16 px (mobile) and 80 px (from 1024 px), content max. 1280 px – measured from the Figma templates. pb-grid takes its column count from --pb-grid-columns and its gap from --pb-grid-gap.
pb-grid with 2 columns
1
2
pb-grid with 3 columns
1
2
3
pb-grid with 4 columns
1
2
3
4
pb-container
Content column (max. 1280 px, page margin from --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 on dark background
bean
drop
gluten
mix
sodium
proof
sugar
time
vegan
Buttons
Outline-inverse (on dark background)
Icon and state variants
Input fields (pb-input)
default
Hint text below the field.
value + hint
Please check your input.
error
disabled
email / hide_label
search
Checkbox, radio, select
pb-checkbox
pb-radio
pb-select
pb-select / disabled
Switch, quantity stepper, option card
pb-switch
pb-quantity-stepper
pb-option-card
Price
No product selected. Choose a product from the staging store in the block setting “Product” to show pb-price with real price data.
Markup preview (demo)
Static demo without product data – shows the classes and layout of pb-price with fixed sample text, not real prices.
Sale price
€19.99
Was
€24.99
€3.33 / 100 g
incl. VAT, plus shipping
Image
No image selected. Choose an image in the block setting “Image” to show pb-image with srcset, sizes and lazy loading.