HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<div style={{ maxWidth: "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>
Korttityypit
Kortti (Card)
<div class="kds-card kds-card--vertical" style={{ maxWidth: "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={{ maxWidth: "22rem" }}>
<div class="kds-card kds-card--vertical">
<figure class="kds-card__figure kds-ratio kds-ratio--16x9">
<img class="kds-card__img" 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={{ maxWidth: "22rem" }}>
<figure class="kds-card__figure kds-ratio kds-ratio--16x9">
<div class="kds-card__icon" style={{ backgroundColor: "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