Uppdaterad 19 september 2024

Style guide

Skribent: admin

Style Guide

Font storlek

Sätt class för storlek istället för att ändra semantiskt.

Heading XXL

Heading XL

Heading H1

Looks H1

Heading H2

Looks H2

Heading H3

Looks H3

Heading H4

Looks H4

Heading H5

Looks H5

Heading H6

Looks H6

Headline pre

Body XL

Body L

Body Default (Gutenberg)

Body Default (Generateblock)

Body S

Body XS

Text s

Text XS

Listpunkt 1
Listpunkt 2
Listpunkt 3

Listpunk 1
Listpunkt 2
Listpunkt 3

Färgprofil för sparmagasinet.se

Ändra färgkoder under ”anpassa -> färger -> globala färger

Accent

Primary alt

Contrast

Contrast alt

Brand

Brand alt

Action

Action alt

Base-0

Base-100

Base-200

Base-300

Base-700

Base-800

Base-900

Base-950

Knappar

Sätt class ”btn” för Primary utseende.
Sätt ”btn” och respektive class för resterande.

Primary Button Brand Button secondary Button contrast

Yttre sektion

Calc padding på sidorna, top och bottom

Section XL (10rem / 1.5rem)

Section L (7.5rem / 1.5rem)

Section D (5rem / 1.5rem)

Section M (2.5rem / 1.5rem)

Section S (1.5rem / 1.5rem)

Section XS (1rem / 1.5rem)

Inre sektion

Styr inre sektionens bredd

Inner Container D

Inner Container M

Inner Container S

Inner Container XS