HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<section class="kds-overlay-nav">
<nav class="kds-nav kds-m-0">
<a class="kds-nav__link kds-mb-4 kds-nav__link--link-with-color" href="#"
><span class="kds-mr-4"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
aria-hidden="true"
class="kds-icon kds-icon--size-relative"
role="img"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 21 7 12l10-9"
></path>
<path fill="none" d="M0 0h24v24H0z"></path></svg></span
>Etusivu</a
>
<h2 class="kds-nav__heading kds-heading kds-heading--category">
<a class="kds-nav__link kds-nav__link--active" href="#">Lorem ipsum</a>
</h2>
<ul class="kds-nav__list kds-m-0">
<li class="kds-nav__item">
<a class="kds-nav__link" href="#"
>Sed arcu lectus<span class="kds-ml-auto kds-nav__link--icon-after"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
aria-hidden="true"
class="kds-icon kds-icon--size-relative"
role="img"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m7 21 10-9L7 3"
></path>
<path fill="none" d="M-.14.11h24v24h-24z"></path></svg></span
></a>
</li>
<li class="kds-nav__item">
<a class="kds-nav__link" href="#"
>Sed posuere<span class="kds-ml-auto kds-nav__link--icon-after"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
aria-hidden="true"
class="kds-icon kds-icon--size-relative"
role="img"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m7 21 10-9L7 3"
></path>
<path fill="none" d="M-.14.11h24v24h-24z"></path></svg></span
></a>
</li>
<li class="kds-nav__item">
<a class="kds-nav__link" href="#"
>consectetuer adipiscin<span class="kds-ml-auto kds-nav__link--icon-after"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
aria-hidden="true"
class="kds-icon kds-icon--size-relative"
role="img"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m7 21 10-9L7 3"
></path>
<path fill="none" d="M-.14.11h24v24h-24z"></path></svg></span
></a>
</li>
</ul>
</nav>
</section>
CSS-luokat