HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<footer class="kds-footer kds-footer--copyright-only">
<div class="kds-fluid-container kds-fluid-container--2xl kds-mx-auto">
<div class="kds-footer__copyright"><div class="kds-footer__copyright-text">© Lorem ipsum</div></div>
</div>
</footer>
Esimerkit
<footer class="kds-footer">
<div class="kds-footer__content">
<div class="kds-fluid-container kds-fluid-container--2xl kds-mx-auto">
<div class="kds-row kds-gy-6">
<div class="kds-col md:kds-col--size md:kds-col--6">
<h2 class="kds-footer__title kds-heading kds-heading--5">Tässä palvelussa</h2>
<ul class="kds-list kds-list--unordered kds-list--unstyled">
<li class="kds-list__item">
<a class="kds-link kds-link--standalone" href="#"
><span class="kds-link__text">Henkilöasiakkaat</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-link__type-icon kds-icon kds-icon--size-relative"
role="img"
aria-hidden="true"
>
<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
></a>
</li>
<li class="kds-list__item">
<a class="kds-link kds-link--standalone" href="#"
><span class="kds-link__text">Työnantaja</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-link__type-icon kds-icon kds-icon--size-relative"
role="img"
aria-hidden="true"
>
<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
></a>
</li>
<li class="kds-list__item">
<a class="kds-link kds-link--standalone" href="#"
><span class="kds-link__text">Yhteistyökumppanit</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-link__type-icon kds-icon kds-icon--size-relative"
role="img"
aria-hidden="true"
>
<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
></a>
</li>
<li class="kds-list__item">
<a class="kds-link kds-link--standalone" href="#"
><span class="kds-link__text">Tietoa Kelasta</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-link__type-icon kds-icon kds-icon--size-relative"
role="img"
aria-hidden="true"
>
<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
></a>
</li>
</ul>
</div>
<div class="kds-col md:kds-col--size md:kds-col--6">
<h2 class="kds-footer__title kds-heading kds-heading--5">Kela muualla verkossa</h2>
<ul class="kds-list kds-list--unordered kds-list--unstyled">
<li class="kds-list__item">
<a class="kds-link kds-link--standalone" href="#"
><span class="kds-link__text">Elämässä.fi</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-link__type-icon kds-icon kds-icon--size-relative"
role="img"
aria-hidden="true"
>
<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
></a>
</li>
<li class="kds-list__item">
<a class="kds-link kds-link--standalone" href="#"
><span class="kds-link__text">EU-terveydenhoito.fi</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-link__type-icon kds-icon kds-icon--size-relative"
role="img"
aria-hidden="true"
>
<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
></a>
</li>
<li class="kds-list__item">
<a class="kds-link kds-link--standalone" href="#"
><span class="kds-link__text">Kanta.fi</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-link__type-icon kds-icon kds-icon--size-relative"
role="img"
aria-hidden="true"
>
<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
></a>
</li>
<li class="kds-list__item">
<a class="kds-link kds-link--standalone" href="#"
><span class="kds-link__text">Sosiaalivakuutus.fi</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-link__type-icon kds-icon kds-icon--size-relative"
role="img"
aria-hidden="true"
>
<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
></a>
</li>
<li class="kds-list__item">
<a class="kds-link kds-link--standalone" href="#"
><span class="kds-link__text">Tutkimusblogi.fi</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-link__type-icon kds-icon kds-icon--size-relative"
role="img"
aria-hidden="true"
>
<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
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="kds-fluid-container kds-fluid-container--2xl kds-mx-auto">
<div class="kds-row">
<div class="kds-col">
<div class="kds-footer__copyright">
<div class="kds-footer__copyright-text">© Kansaneläkelaitos</div>
<div class="kds-footer__copyright-links">
<a class="kds-link" href="#"><span class="kds-link__text">Anna palautetta</span></a
><a class="kds-link" href="#"><span class="kds-link__text">Tietosuoja ja evästeet</span></a
><a class="kds-link" href="#"><span class="kds-link__text">Saavutettavuusseloste</span></a>
</div>
</div>
</div>
</div>
</div>
</footer>
CSS-luokat