Overskrifter
- Overskrifter kommer i seks ulike nivåer.
- Skjermer under brekkpunktet 768px får mobil størrelser.
- Vi ønsker at de ulike overskriftene brukes som vist i eksemplene.
Desktop
Eksempel | Overskrift | Klasse | Font | Stø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.
Eksempel | Overskrift | Klasse | Font | Stø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 |
Overskrifter i en artikkel
Overskifter i en artikkel får størrelsene satt uten klasser
Eksempel | Overskrift | Font | Størrelse |
---|---|---|---|
h2 | 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 | 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 | 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,6 | Lato | 18px |
<div class="article-text">
<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>
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.
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>