Hoppa till innehåll

Design system

Typography

Utilities for controlling the font size of an element.

Alternative text to describe image.

Usage

Control the font size of an element using the .text-{size} utilities.

.text-xs

The quick brown fox jumped over the lazy dog.

.text-sm

The quick brown fox jumped over the lazy dog.

.text-base

The quick brown fox jumped over the lazy dog.

.text-lg

The quick brown fox jumped over the lazy dog.

.text-xl

The quick brown fox jumped over the lazy dog.

.text-2xl

The quick brown fox jumped over the lazy dog.

.text-fluid-2xl

The quick brown fox jumped over the lazy dog.

.text-3xl

The quick brown fox jumped over the lazy dog.

.text-fluid-3xl

The quick brown fox jumped over the lazy dog.

.text-4xl

The quick brown fox jumped over the lazy dog.

.text-fluid-4xl

The quick brown fox jumped over the lazy dog.

.text-5xl

The quick brown fox jumped over the lazy dog.

.text-fluid-5xl

The quick brown fox jumped over the lazy dog.

Colors

Blues

50
100
200
300
400
500
600
700
800
900
950

Greens

50
100
200
300
400
500
600
700
800
900
950

Grays

50
100
200
300
400
500
600
700
800
900
950

Sand

50
100
200
300
400
500
600
700
800
900
950

Buttons

.button .button .button--secondary .button .button--external .button .button--download .button .button--submit .button .button--solid-lightblue .button .button--solid-sand

Links

Clean link .link-arrow .link-arrow-secondary

Prose, rich text content

Detta är en paragraf med fetstil, kursiv, en länk.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.

Rubrik nivå 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Första punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punkten
  • Andra punkten med fetstil
  • Tredje punkten

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Första numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numrerade
  2. Andra numrerade
  3. Tredje numrerade

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.

Rubrik nivå 3

  • Första punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punktenFörsta punkten
  • Andra punkten med fetstil
  • Tredje punkten
  1. Första numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numreradeFörsta numrerade
  2. Andra numrerade
  3. Tredje numrerade
“Detta är ett blockquote. Perfekt för att se hur citat visas i prose.”

Tabell

Namn Roll Ålder
Anna Designer 29
Erik Utvecklare 34
Bild

Här är en bild inbäddad i texten. Alla bilder kommer per default att vara 100% bredd i prose om man inte väljer annat

Exempelbild
Bildtext för exemplet.

Man kan välja att den ska vara bredare än texten och blöda över till både vänster och höger med classen .image-overflow:

Exempelbild
.image-overflow

Sen kan man välja om bilden ska vara 75, 50 eller 25% av bredden:

Exempelbild
.image-75
Exempelbild
.image-50
Exempelbild
.image-25

Man kan också välja att centrera bilden

Exempelbild
.image-50 .image-center
Slut på testet

Detta är sista stycket.