Styleguide för pensionsmyndigheten.se

Base

Base innehåller basgenskaper så som färger, responsivitet, ikoner och typsnitt.
Allt som ligger här byggs in i ps-styleguide.css och finns därför inbyggt i alla våra sidor

Color

Main

BACKGROUND


Info

Instruktion

För att använda en färg använder vi variablerna från _theme.scss.
Färgarna från _color-palette.scss är mappade i _theme.scss
Color palette

Designa mörkare eller ljusare färg

SASS funktionaliten gör det möjligt som följande exemple

$darker-version: darken($s_color-border-3, 10%);
$lighter-version: lighten($s_color-border-9, 50%);

Typography

Examples

h1 | Pensionens alla delar

h2 | Din pensionspyramid kan se annorlunda ut

h3 med klass s_font-normal | Din allmänna pension kommer från staten

h3 med klass s_font-bold | Bostadsform

h4 | Fyll i uppgifter om din bostad

legend | Hur bor du?
preamble | Tilläggspensionen är en del av den allmänna pensionen

paragraph med klass s_font-large | Tilläggspensionen är en inkomstgrundad pension som

paragraph | Alerts, tooltip

paragraph med klass s_font-bold s_font-small | Postkod:

paragraph med klass s_font-small | Din anmälan registreras och du kommer få ett brev

paragraph med klass s_font-readable | Varje år får du som bor i ett annat land och får pension från Sverige.

Code

h1 | Pensio Sans Normal


h2 | Pensio Sans Normal


h3 | Pensio Sans Normal


h3 med klass s_font-medium


h4 med klass s_font-medium


legend | Pensio Sans Normal

paragraph | Pensio Sans Normal



preamble | Pensio Sans Normal

paragraph med klass s_font-large


paragraph


paragraph med klass s_font-small


paragraph med klass s_font-medium s_font-small


Centrerad paragraph med klass s_font-center


Space

Examples

En "unit" kan användas tillsammans med en margin eller padding css-klass oavsett riktning, som till exempel
s_margin-1 s_margin-top-2 s_padding-right-3 s_padding-bottom-4
Spacing unit
0
1
2
3
4
5
6
7
8
9
10

Examples

Vid utveckling av en css-klass används variabler som till exempel

$s_space-
0
1
2
3
4
5
6
7
8
9
10

Code
















































































































Icons

Main

Code