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>

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.

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

EksempelKlasseFontStø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 æ ø å

.page-title PxGrotesk 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 æ ø å

.component-title PxGrotesk 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 æ ø å

.small-title PxGrotesk 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 æ ø å

.tiny-title PxGrotesk sm
<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>

Mobil

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

EksempelKlasseFontStø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 æ ø å

.page-title PxGrotesk 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 æ ø å

.component-title PxGrotesk 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 æ ø å

.small-title PxGrotesk 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 æ ø å

.tiny-title PxGrotesk xs

Hvor finner jeg denne koden?