HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<div style="max-width: 22rem">
<div class="kds-card kds-card--vertical">
<div class="kds-card__body">
<h2 class="kds-card__title kds-heading kds-heading--4">Lorem ipsum</h2>
<p>Dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
Kortti taustavärillä
<div class="kds-card kds-card--solid kds-card--horizontal kds-card--success">
<figure class="kds-card__icon kds-ratio">
<div class="kds-card__icon-content">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
width="1em"
height="1em"
aria-hidden="true"
class="kds-icon kds-icon--size-none"
role="img"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.1"
d="M5.68 17.51H2.82c-.45 0-.82.37-.82.82v9.85c0 .45.37.82.82.82h2.86c1.36 0 2.46-1.1 2.46-2.46v-6.56c0-1.36-1.1-2.46-2.46-2.46Zm2.77 9.59c1.62.44 3.81.9 5.5.9h7.32c1.81 0 3.51-.85 4.59-2.3l3.94-5.25c.57-.75.62-1.79.25-2.35-.1-.16-.23-.3-.38-.41-.6-.53-1.62-.48-2.22.16L23 21.99"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.1"
d="M16.35 23.24h5c.9 0 1.64-.74 1.64-1.64v-.02c-.02-.9-.74-1.62-1.64-1.62h-2.97c-.49 0-1.02-.18-1.44-.54-2-1.76-6.8-1.75-8.52-.14M26.65 6c-1.86 0-4.49.15-5.83 1.5-1.18 1.18-1 3.68 0 4.68.52.52 1.45.82 2.38.82.86 0 1.73-.25 2.3-.82 1.34-1.34 1.5-3.97 1.5-5.83 0-.19-.16-.35-.35-.35"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.1"
d="M19 18c0-3.25.78-6.04 4-8.5M10.07 4c2.17 0 5.24.18 6.8 1.75 1.38 1.38 1.17 4.3 0 5.46-.61.61-1.69.96-2.78.96-1 0-2.02-.29-2.68-.96-1.57-1.57-1.75-4.63-1.75-6.8 0-.22.18-.41.41-.41Z"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.1"
d="M19 18c0-3.79-.91-6.96-4.67-9.83"
></path>
<path fill="none" d="M0 0h32v32H0z"></path>
</svg>
</div>
</figure>
<div class="kds-card__body">
<h2 class="kds-card__title kds-heading kds-heading--4">Lorem ipsum</h2>
<p>Dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
Korttityypit
Kortti (Card)
<div class="kds-card kds-card--vertical" style="max-width: 22rem">
<div class="kds-card__header">Kortin ylätunniste</div>
<div class="kds-card__body">
<h2 class="kds-card__title kds-heading kds-heading--4">Kortin otsikko, pituus 1-2 riviä</h2>
<p>Kortin sisältöä kuvaava lyhyt teksti. Sopiva pituus yleensä 1-3 riviä.</p>
<button class="kds-btn kds-btn--solid kds-btn--primary kds-btn--icon-after" type="button">
<span>Lue lisää</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-ml-2 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>
</button>
</div>
<div class="kds-card__footer">Kortin alatunniste</div>
</div>
Kuvallinen kortti (CardImage)
<div style="max-width: 22rem">
<div class="kds-card kds-card--vertical">
<figure class="kds-card__image kds-ratio">
<img class="kds-card__image-content" src={cardExampleImage.src} alt="Nainen sadeviitassa" />
</figure>
<div class="kds-card__header">
<span class="kds-badge kds-badge--pill kds-badge--primary">Kategoria</span>
</div>
<div class="kds-card__body">
<h2 class="kds-card__title kds-heading kds-heading--4">Kortin otsikko, pituus 1-2 riviä</h2>
<p class="kds-text">Kortin sisältöä kuvaava lyhyt teksti. Sopiva pituus yleensä 1-3 riviä.</p>
<button class="kds-btn kds-btn--outline kds-btn--primary kds-btn--icon-after" type="button">
<span>Lue lisää</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-ml-2 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>
</button>
</div>
</div>
</div>
Ikonilla kuvitettu kortti (CardIcon)
<div class="kds-card kds-card--vertical" style="max-width: 22rem">
<figure class="kds-card__icon kds-ratio">
<div class="kds-card__icon-content" style="background-color: rgb(127, 210, 158)">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
width="1em"
height="1em"
class="kds-icon kds-icon--size-none"
role="img"
style="color: rgb(0, 53, 128)"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.1"
d="M3 4.49h26V21.5H3zM3 21.5 1 25v.66c0 1.02.82 1.84 1.84 1.84h26.32c1.02 0 1.84-.82 1.84-1.84V25l-2-3.5m2 3.5H1"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.1"
d="m14 14.54-3.01-3 1.38-1.37L6 8l2.17 6.36L9.53 13l3.01 3z"
></path>
<path fill="none" d="M0 0h32v32H0z"></path>
</svg>
</div>
</figure>
<div class="kds-card__body">
<h2 class="kds-card__title kds-heading kds-heading--4">Kortin otsikko, 1-2 riviä</h2>
<p class="kds-text">Kortin sisältöä kuvaava lyhyt teksti. Sopiva pituus yleensä 1-3 riviä.</p>
<button class="kds-btn kds-btn--outline kds-btn--primary kds-btn--icon-after" type="button">
<span>Painike</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-ml-2 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>
</button>
</div>
</div>
CSS-luokat