Käytä korttikomponenttia ryhmittelemään samaan asiaan kuuluvaa tekstiä, kuvia ja toimintoja helposti silmäiltäviksi kokonaisuuksiksi. Modulaariseen rakenteeseen perustuvaa korttia voi käyttää joustavasti eri käyttötarkoituksiin.
Korttikomponenttia voi soveltaa esimerkiksi listamaisen sisällön ryhmittelyyn, visuaalisesti korostettuihin artikkelinostoihin tai korostamaan call-to-action-painikkeita lisätiedolla.
Yksi kortti sisältää yhteen aiheeseen liittyviä sisältöjä ja toimintoja tiiviisti esitettynä. Yksittäisen kortin tulee olla ymmärrettävissä ilman ympäröivää sisältöä. Kortin tulee myös erottua visuaalisesti muusta sisällöstä.
Käytä korteissa johdonmukaista rakennetta, joka tukee esitettävän tiedon luettavuutta. Esimerkiksi listamaisessa esityksessä kaikkien korttien pitää noudattaa samanlaista perusrakennetta.
Card-komponentti rakentuu modulaarisesti useasta eri elementistä. Rakenteen voi suunnitella joustavasti käyttötarkoituksen ja esitettävän sisällön mukaan.
Tee näin
Esitä kortissa vain yksi asia kerrallaan.
Varmista, että kokonaisuus on selkeä ja silmäiltävä.
Suosi selkeää kieltä ja informatiivista kuvatyyliä. Otsikoi napakasti.
Lisätiedon esittämiseen voi tarvittaessa käyttää esimerkiksi klikattavaa Collapse-komponenttia.
Jos tarvitset vain reunaviivallisen elementin etkä muita Cardin ominaisuuksia, käytä Box-komponenttia.
Älä tee näin
Älä yhdistele erilaisia korttityyppejä tai -rakenteita.
Älä sommittele kortteja sisäkkäin.
Vältä monirivisiä otsikoita ja pitkiä tekstikappaleita.
Saavutettavuus
Komponentti ei sisällä tällä hetkellä mitään erityistä teknistä toteutusta saavutettavuuden huomioimiseksi.
Komponentin käyttäjän vastuulle jää varmistaa kortin sisällön ja rakenteen saavutettavuus.
Kortin rakenne
Kortti koostuu useasta eri peruselementistä, joita voi soveltaa joustavasti käyttötarkoituksen mukaan.
Card - Kortti
CardImage - Kuvapaikka kuvalle (kuvasuhde toistaiseksi vain 16:9)
CardIcon - Kuvapaikka ikonille
CardHeader - Kortin ylätunniste
CardTitle - Kortin otsikko
CardTitleLink - Kortin otsikkolinkki
CardBody - Kortin sisältö
CardFooter - Kortin alatunniste
Muut elementit
Vakioelementtien lisäksi korttiin voi yhdistää myös muita Kela Design Systemin komponentteja.
Korttikomponenttia voi käyttää joko sellaisenaan tai kuvitettuna. Kortissa esitetyn sisällön perusraamina toimii aina yksinkertainen Card-komponentti.
Kuvitetun kortin kuvapaikka tuotetaan joko CardImage- tai CardIcon-komponentilla.
Kortti (Card)
<Card style={{ maxWidth: "22rem" }}>
<CardHeader>Kortin ylätunniste</CardHeader>
<CardBody>
<CardTitle>Kortin otsikko, pituus 1-2 riviä</CardTitle>
<Text>Kortin sisältöä kuvaava lyhyt teksti. Sopiva pituus yleensä 1-3 riviä.</Text>
<Button iconAfter={<IconUiCaretRight />}>Lue lisää</Button>
</CardBody>
<CardFooter>Kortin alatunniste</CardFooter>
</Card>
Kuvallinen kortti (CardImage)
Staattisella kuvalla kuvitetun kortin kuvapaikka tuotetaan CardImage-komponentilla.
Pystysuuntaisessa asettelussa kuvapaikka tukee toistaiseksi vain leveää
kuvaa. Kortissa esitettävän kuvan tulee olla kuvasuhteessa 16:9.
Vaakamallisessa asettelussa kuvapaikan sisältö rajataan kuvapaikkaan sopivaksi. Kuva tulee valita siten, että kuvan olennaisin sisältö sijoittuu kuvan keskelle.
CardImage-kuvapaikalla voi soveltaa joustavasti erilaisia kuvatyyppejä ja visuaalisia sisältökonsepteja.
<Card style={{ maxWidth: "22rem" }}>
<CardImage src={cardExampleImage.src} alt="Nainen sadeviitassa" />
<CardHeader>
<Badge variant="primary">Kategoria</Badge>
</CardHeader>
<CardBody>
<CardTitle>Kortin otsikko, pituus 1-2 riviä</CardTitle>
<Text>Kortin sisältöä kuvaava lyhyt teksti. Sopiva pituus yleensä 1-3 riviä.</Text>
<Button appearance="outline" iconAfter={<IconUiCaretRight />}>
Lue lisää
</Button>
</CardBody>
</Card><Card direction="horizontal">
<CardImage src={cardExampleImage.src} alt="Nainen sadeviitassa" />
<CardBody>
<CardTitle>Kortin otsikko, pituus 1-2 riviä</CardTitle>
<Text>Kortin sisältöä kuvaava lyhyt teksti. Sopiva pituus yleensä 1-3 riviä.</Text>
<Button appearance="outline" iconAfter={<IconUiCaretRight />}>
Lue lisää
</Button>
</CardBody>
</Card>
Kuvan valinta ja sommittelu
Kortin kuvituksena käytetään vaakasuuntaista kuvaa, jonka kuvasuhde on 16:9. Kuva kannattaa valita siten, että kuvan olennaisin visuaalinen informaatio asettuu kuvan keskikohtaan.
Kortissa käytetään leveää kuvaa, jonka kuvasuhde on 16:9. Kuva tulee valita siten, että tärkein visuaalinen informaatio asettuu keskelle kuvaa.
Ikonilla kuvitettu kortti (CardIcon)
Ikoniin perustuvan kuvituksen voi tuottaa CardIcon-komponentilla. Kortin sisällön voi asetella joko vaaka- tai pystysuuntaisesti käyttämällä direction-proppia.
Kortin kuvittamiseen käytetään verkkokäyttöön tarkoitettuja kuvitusikoneja. Ikonivalikoima on saatavilla Kela Design Systemin kuvitusikonien kirjastosta valmiina svg-kuvakekomponentteina.
<Card style={{ maxWidth: "22rem" }} variant="primary">
<CardIcon>
<IconDecoLaptop />
</CardIcon>
<CardBody>
<CardTitle>Kortin otsikko, 1-2 riviä</CardTitle>
<Text>Kortin sisältöä kuvaava lyhyt teksti. Sopiva pituus yleensä 1-3 riviä.</Text>
<Button appearance="outline" iconAfter={<IconUiCaretRight />}>
Painike
</Button>
</CardBody>
</Card>
Vaakamallinen CardIcon-kortti
Vaakamallisessa asettelussa CardIcon-komponentin kuvapaikka rajautuu automaattisesti kapeampaan kuvasuhteeseen. Kuvapaikan pinta-ala määräytyy dynaamisesti sisältöelementtien ja tekstien pituuden mukaan.
Tekstisisällössä kannattaa suosia lyhyttä ja napakkaa ilmaisua
Otsikko kannattaa pitää 1-2 rivin mittaisena
Vaakasuuntaiseen asetteluun perustuva kortti muuttuu kapeammilla näyttöleveyksillä automaattisesti pystysuuntaiseksi kortiksi.
<Card direction="horizontal" variant="primary">
<CardIcon>
<IconDecoLaptop />
</CardIcon>
<CardBody>
<CardTitle>Kortin otsikko, 1-2 riviä</CardTitle>
<Text>Kortin sisältöä kuvaava lyhyt teksti. Sopiva pituus yleensä 1-3 riviä.</Text>
<Button appearance="outline" iconAfter={<IconUiCaretRight />}>
Lue lisää
</Button>
</CardBody>
</Card>
Värit ja ikonit
Ikonin ja kuvapaikan taustavärin voi valita käyttökohteen mukaan. Värit asetetaan oletuksena kortin värivariantin mukaisesti. Tarvittaessa värityksen voi asettaa räätälöidysti.
CardIcon-komponentille voi asettaa taustavärin bgColor-propilla tai CSS-luokalla (className).
Vaalealla taustalla ikonin väriksi kannattaa yleensä valita tumma sininen (kela-blue-80, #003580)
Tummalla taustalla ikonin väriksi kannattaa yleensä valita puhdas valkoinen (white, #fff).
<>
<Card direction="horizontal" variant="success">
<CardIcon>
<IconDecoHandGrown />
</CardIcon>
<CardBody>
<CardTitle>Ikonissa kortin variantin väritys</CardTitle>
<Text>Lorem ipsum dolor sit amet</Text>
<Button appearance="outline" iconAfter={<IconUiCaretRight />}>
Lue lisää
</Button>
</CardBody>
</Card>
<Card direction="horizontal" className="kds-mt-4">
<CardIcon className="kds-bg-brand-primary">
<IconDecoLaptop className="kds-text-white" />
</CardIcon>
<CardBody>
<CardTitle>Ikonissa sovellettu väritys</CardTitle>
<Text>Lorem ipsum dolor sit amet</Text>
<Button appearance="outline" iconAfter={<IconUiCaretRight />}>
Lue lisää
</Button>
</CardBody>
</Card>
</>
Esimerkkejä CardIcon-komponentin tyylistä.
Klikattava kortti
Kortista voi tehdä kokonaan klikattavan alueen Clickable-komponentilla.
Esimerkki koko kortin klikattavasta alueesta, jossa kortin linkkinä on otsikko.
<Clickable
render={({ getProps, getActionProps }) => (
<Card variant="primary" {...getProps<CardProps<"div">>({ style: { maxWidth: "22rem" } })}>
<CardImage src={cardExampleImage.src} alt="Esimerkkikuva: nainen sadeviitassa" />
<CardBody>
<CardTitle>
<CardTitleLink href="#" {...getActionProps<CardTitleLinkProps<"a">>()}>
Kortin otsikko, 1-2 riviä
</CardTitleLink>
</CardTitle>
<Text>Kortin sisältöä kuvaava lyhyt teksti. Sopiva pituus yleensä 1-3 riviä.</Text>
</CardBody>
</Card>
)}
/>
Esimerkki koko kortin klikattavasta alueesta, jossa kortin linkkinä Lue lisää -painike.
<Clickable
render={({ getProps, getActionProps }) => (
<Card variant="primary" {...getProps<CardProps<"div">>({ style: { maxWidth: "22rem" } })}>
<CardImage src={cardExampleImage.src} alt="Esimerkkikuva: nainen sadeviitassa" />
<CardBody>
<CardTitle>Kortin otsikko, 1-2 riviä</CardTitle>
<Text>Kortin sisältöä kuvaava lyhyt teksti. Sopiva pituus yleensä 1-3 riviä.</Text>
<Button
appearance="outline"
as="a"
href="#"
iconAfter={<IconUiCaretRight />}
{...getActionProps<ButtonProps<"button">>({}, { type: "button" })}
>
Lue lisää<span className="kds-sr-only">: Kortin otsikko</span>
</Button>
</CardBody>
</Card>
)}
/>
Sisältötekstin lyhentäminen
Pitkät sisältötekstit voi tarvittaessa lyhentää TextTruncate-komponentilla, jos tekstistä ei ole saatavilla valmista lyhyttä katkelmaa.
Lyhennettävä teksti ei kuitenkaan saisi sisältää olennaista tietoa, joka voi jäädä käyttäjältä huomaamatta tekstin katkeamisen vuoksi.
<Card variant="success" style={{ maxWidth: "22rem" }}>
<CardIcon>
<IconDecoStatistics />
</CardIcon>
<CardBody>
<CardTitle>Kortin otsikko, 1-2 riviä</CardTitle>
<Text>
<TextTruncate maxLines={3}>
Kortin sisältöä kuvaava lyhyt teksti. Sopiva pituus on yleensä 1-3 riviä. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Sed posuere interdum sem.
</TextTruncate>
</Text>
<Button as="a" appearance="outline" href="#" iconAfter={<IconUiCaretRight />}>
Painike
</Button>
</CardBody>
</Card>
Skeleton
Muodosta skeleton-korttikomponentti aina käyttötapauksen mukaan ja siten, että se vastaa varsinaisen kortin rakennetta.
