HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<section aria-label="Kävijätilastot" class="kds-cookie-banner kds-cookie-banner--border">
<div class="kds-px-2 md:kds-px-6 kds-fluid-container kds-fluid-container--2xl kds-mx-auto kds-gx-0">
<div class="kds-row kds-gx-0">
<div class="kds-col">
<h2 class="kds-heading kds-mt-0">Kävijätilastot</h2>
<p class="kds-text kds-mb-0">
Keräämme sivuston käyttäjistä kävijätilastoja. Kerätyistä tiedoista ei voi tunnistaa sinua.
</p>
<p class="kds-text">Kävijätilastoja käytetään palvelun kehittämiseen ja raportointiin.</p>
<h3 class="kds-heading kds-heading--4 kds-mt-0">Hyväksytkö kävijätilastojen keräämisen?</h3>
<div role="group" class="kds-mb-4 kds-btn-group kds-btn-group--fluid xs:kds-btn-group--horizontal">
<button
class="kds-btn kds-btn--solid kds-btn--primary"
aria-label="Hyväksyn kävijätilastojen keräämisen"
type="button"
>
Hyväksyn
</button>
<button
class="kds-btn kds-btn--solid kds-btn--primary"
aria-label="En hyväksy kävijätilastojen keräämistä"
type="button"
>
En hyväksy
</button>
</div>
<p class="kds-text kds-mb-0">
<a class="kds-link kds-link--standalone" href="#">
<span class="kds-link__text">Lue lisää kävijätilastoinnista</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>
</p>
</div>
</div>
</div>
</section>
CSS-luokat