Component
Layout and colours
Every page is made of sections. A section sets the colour scheme, width and grid; the blocks inside arrange themselves for each screen size.
Option
Colour scheme Hafer
The standard for the whole site: warm off-white, dark text, terracotta accent.
Freshly roasted
Text with a link.
Option
Colour scheme Weiss
For shop areas and the header – neutral, so product images stand out.
Freshly roasted
Text with a link.
Option
Colour scheme Espresso
Dark bands for strong messages, for business customers for example.
Freshly roasted
Text with a link.
Option
Colour scheme Salbei
Calm areas for knowledge, questions and notes.
Freshly roasted
Text with a link.
Option
Width: content
The section stays within the theme's content width (80 rem here) and keeps a margin.
Option
Width: full page
The section runs edge to edge – for images and bands.
Option
Grid: columns
Fixed columns from a preset, here three equal columns from tablet size.
Espresso
Bold and chocolatey.
Filter
Bright and fruity.
Decaf
Full flavour in the evening.
Option
Grid: custom split
Free column definition, here 2 : 1 : 1.
Espresso
Bold and chocolatey.
Filter
Bright and fruity.
Decaf
Full flavour in the evening.
Option
Grid: tiles
As many columns as fit with a minimum width of 12 rem – without fixed breakpoints.
Espresso
Bold and chocolatey.
Filter
Bright and fruity.
Decaf
Full flavour in the evening.
Rare coffees
Single farms.
Accessories
Grinders and filters.
Option
Grid: flow
Blocks line up side by side and wrap – ideal for buttons.
Option
Columns per screen
One column on a phone, two on a tablet, four on a desktop – try resizing the window.
Mobile
One column.
Tablet
Two columns.
Desktop
Four columns.
Breakpoints
from 768 and 1024 pixels.
Option
Visibility per screen
A block can be hidden on particular screen sizes. One of the two notes below is invisible right now.
Phone and tablet only
Hidden from desktop size.
Option
Section inside a section
A section can sit inside another as a block – with its own colour scheme, for a side note for example.
We roast our beans in small batches and ship them on roasting day, so the coffee reaches you with its full aroma.
Embedded section
With its own Espresso scheme.