Componente
Layout e colori
Ogni pagina è composta da sezioni. Una sezione definisce schema di colori, larghezza e griglia; i blocchi si dispongono in base allo schermo.
Opzione
Schema Hafer
Lo standard del sito: bianco caldo, testo scuro, terracotta come accento.
Tostato fresco
Testo con link.
Opzione
Schema Weiss
Per le aree negozio e l'intestazione – neutro, per valorizzare i prodotti.
Tostato fresco
Testo con link.
Opzione
Schema Espresso
Fasce scure per messaggi forti, ad esempio alle aziende.
Tostato fresco
Testo con link.
Opzione
Schema Salbei
Superfici calme per sapere, domande e consigli.
Tostato fresco
Testo con link.
Opzione
Larghezza: contenuto
La sezione resta nella larghezza del tema (qui 80 rem) e mantiene un margine.
Opzione
Larghezza: tutta la pagina
La sezione occupa tutta la larghezza – per immagini e fasce.
Opzione
Griglia: colonne
Ripartizione fissa da un modello, qui tre colonne uguali dal tablet.
Espresso
Intenso e cioccolatoso.
Filtro
Fruttato e chiaro.
Decaffeinato
Pieno di gusto la sera.
Opzione
Griglia: ripartizione libera
Colonne libere, qui 2 : 1 : 1.
Espresso
Intenso e cioccolatoso.
Filtro
Fruttato e chiaro.
Decaffeinato
Pieno di gusto la sera.
Opzione
Griglia: riquadri
Tante colonne quante ne consente la larghezza minima di 12 rem – senza breakpoint fissi.
Espresso
Intenso e cioccolatoso.
Filtro
Fruttato e chiaro.
Decaffeinato
Pieno di gusto la sera.
Rarità
Singole piantagioni.
Accessori
Macinini e filtri.
Opzione
Griglia: flusso
I blocchi si affiancano e vanno a capo – ideale per i pulsanti.
Opzione
Colonne per schermo
Una colonna su smartphone, due su tablet, quattro su desktop – cambi la larghezza della finestra.
Mobile
Una colonna.
Tablet
Due colonne.
Desktop
Quattro colonne.
Breakpoint
da 768 e 1024 pixel.
Opzione
Visibilità per schermo
Un blocco può essere nascosto su certe dimensioni di schermo. Uno dei due avvisi qui sotto è ora invisibile.
Solo su smartphone e tablet
Nascosto dal desktop.
Opzione
Sezione nella sezione
Una sezione può essere un blocco di un'altra – con il proprio schema di colori, ad esempio per un riquadro.
Tostiamo i nostri chicchi in piccoli lotti e li spediamo il giorno stesso. Così il caffè le arriva con tutto il suo aroma.
Sezione incorporata
Con il proprio schema Espresso.