Typografi Fleetwood kommer med grunnleggende typografiske elementer som skal brukes til å utforme innhold

Overskrifter

Overskrift

<h4 class="lk-heading" data-size="lg">Overskrift</h4>
Eksempeldata-size

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

2xl

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

xl

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

lg

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

md
a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å
sm
a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å
xs
a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å
2xs

Overskrifter i en artikkel/redaktør styrt

Overskifter i en artikkel får størrelsene satt uten klasser

Bruke .article-text eller .editor-content klassene for å sette størrelsene

EksempelOverskriftStørrelse

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

h1 xl

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

h2 lg

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

h3 md

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

h4 sm
a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å
h5 xs
a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å
h6 2xs

  <div class="article-text">
      <h1>a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å</h1>
      <h2>a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å</h2>
      <h3>a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å</h3>
      <h4>a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å</h4>
      <h5>a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å</h5>
      <h6>a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å</h6>
  </div>
  

Utilities

Klasser for å gjøre små endringer. Ofte knyttet til en css regel.

BOLD

not bold

<p class="fw-bold">BOLD</p>
<p class="fw-normal">not bold</p>

Avviklet styling

Bruk av avviklet overskrifter

Unngå bruk av avviklet kode. Gå over til nye lk-heading så vi ikke trenger å vedlikeholde avviklet kode.

Desktop

EksempelOverskriftKlasseFontStørrelse

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

h1 .page-title PxGrotesk 50px

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

h2 .component-title PxGrotesk 30px

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

h3 .small-title PxGrotesk 21px

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

h4 .tiny-title PxGrotesk 18px
a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å
h5, h6 .tiny-title Lato 18px
<h1 class="page-title">a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å</h1>
<h2 class="component-title">a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å</h2>
<h3 class="small-title ">a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å</h3>
<h4 class="tiny-title">a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å</h4>
<h5 class="tiny-title">a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å</h5>

Mobil

De samme klassene er brukt som i desktop. Eksempel størrelser vises under.

EksempelOverskriftKlasseFontStørrelse

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

h1 .page-title PxGrotesk 30px

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

h2 .component-title PxGrotesk 24px

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

h3 .small-title PxGrotesk 20px

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

h4 .tiny-title PxGrotesk 18px
a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å
h5, h6 .tiny-title Lato 18px

Stor Ingress

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

<p class="large-lead">
    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.
</p>

Ingress

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

<p class="lead">
    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.
</p>

Tekstavsnitt

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

<p class="paragraph">
    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.
</p>

Lato

Lato brukes på brødtekst

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

Hvor finner jeg denne koden?