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
CardBody - Kortin sisältö
CardFooter - Kortin alatunniste
Muut elementit
Vakioelementtien lisäksi korttiin voi yhdistää myös muita Kela Design Systemin komponentteja. Esimerkkejä lisäelementeistä:
Badge - Metatiedon esittäminen
Button - Painike
Collapse - Toissijaisen tiedon esittäminen
Link - Siirtymää kuvaava linkki
Korttityypit
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>
<p>Kortin sisältöä kuvaava lyhyt teksti. Sopiva pituus yleensä 1-3 riviä.</p>
<Button iconAfter={<IconCaretRight />}>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={<IconCaretRight />}>
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={<IconCaretRight />}>
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" }}>
<CardIcon bgColor={COLOR_SUCCESS_GREEN_30}>
<IconLaptop color={COLOR_KELA_BLUE_80} />
</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={<IconCaretRight />}>
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">
<CardIcon bgColor={COLOR_KELA_BLUE_30}>
<IconLaptop color={COLOR_KELA_BLUE_80} />
</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={<IconCaretRight />}>
Lue lisää
</Button>
</CardBody>
</Card>
Värit ja ikonit
Ikonin ja kuvapaikan taustavärin voi valita käyttökohteen mukaan.
