HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<h2 class="kds-heading">Lorem ipsum</h2>
Esimerkit
Perusotsikot
<div>
<h1 class="kds-heading">Ensimmäisen tason otsikko (H1)</h1>
<h2 class="kds-heading">Toisen tason otsikko (H2)</h2>
<h3 class="kds-heading">Kolmannen tason otsikko (H3)</h3>
<h4 class="kds-heading">Neljännen tason otsikko (H4)</h4>
<h5 class="kds-heading">Viidennen tason otsikko (H5)</h5>
<h6 class="kds-heading">Kuudennen tason otsikko (H6)</h6>
</div>
Display-otsikot
<div>
<h1 class="kds-heading kds-heading--display-1">Näyttävä pääotsikko (display 1)</h1>
<h2 class="kds-heading kds-heading--display-2">Näyttävä pääotsikko (display 2)</h2>
<h3 class="kds-heading kds-heading--display-3">Näyttävä pääotsikko (display 3)</h3>
<h4 class="kds-heading kds-heading--display-4">Näyttävä pääotsikko (display 4)</h4>
</div>
Otsikon visuaalisen koon muokkaaminen
<h1 class="kds-heading kds-heading--2">Ensimmäisen tason otsikko H2-koossa</h1>
CSS-luokat
|
kds-heading | | Otsikon perusluokka |
kds-heading--[size] | 1, 2, 3, 4, 5, 6 | Otsikon visuaalinen koko |
kds-heading--display-[display] | 1, 2, 3, 4 | Display-otsikon koko |