Esikatselu
<Tile icon={<IconDecoEuro />} label="Maksettu tai palautettu" value="280,42 €" variant="primary" />
Käyttötarkoitus
Tile on tiedon korostamiseen ja sisällön visuaaliseen jäsentelyyn suunniteltu nostokomponentti. TileGroup-komponentilla voi puolestaan luoda ryhmän, joka koostuu useammasta Tile-nostosta.
Komponenttia kannattaa soveltaa sisällössä melko säästeliäästi. Käyttö on perusteltua esimerkiksi silloin, kun sisällöstä halutaan nostaa esiin käyttäjän kannalta tärkeimmät ydintiedot tai avainluvut.
Tile-komponentti toimii parhaiten silloin, kun komponentilla esitetty tieto on muotoiltu lyhyesti. Selittävän otsikon (label) ja lihavoidun avaintiedon (value) tulisi molempien mahtua yhdelle riville.
Isojen tietomassojen tai merkkimäärältään pitkien sisältöjen esittämiseen kannattaa soveltaa muuta esitystapaa.
Saavutettavuus
Nostoryhmä (TileGroup) erottuu omaksi kokonaisuudeksi ulkoasun perusteella.
Käyttötilanteesta riippuen sama ryhmittely voi olla hyvä esittää myös ruudunlukijalle. Ryhmittelyn voi tässä tapauksessa esittää sijoittamalla nostoryhmä section-elementin sisään ja lisäämällä ruudunlukijalle sisältökokonaisuutta kuvaavan tekstin aria-label-attribuutin avulla.
Responsiivisuus
Oletuksena TileGroup-komponentilla luodun nostoryhmän yksittäiset nostot pinotaan pienimmillä näytöillä ja näytetään rinnakkain breakpointista sm alkaen.
Ryhmän responsiivisuuteen voi vaikuttaa breakpoint-propilla.
Nostotyypit ja värit
Komponentti perustuu neljään samasta väristä johdettuun nostotyyppiin. Taustan, tekstin ja ikonin sävy määrittyy automaattisesti valitun värin mukaan.
Esimerkki primary-variantin eri nostotyypeistä:
- Erottuva: otsikkotasoinen tai vahvasti korostettu nostoelementti, jonka taustavärinä primary-väristä johdettu tumma korostussävy.
- Keskitaso: väliotsikkotasoinen tai kevyemmin korostettu nostoelementti, jonka taustavärinä primary-väristä johdettu vaalea korostussävy.
- Neutraali: neutraali sisältöelementti, jossa vaaleanharmaa tausta ja primary-väristä johdettu nostoteksti
- Pelkkä kehys: neutraali sisältöelementti, jossa vaaleanharmaa reunaväri ja primary-väristä johdettu nostoteksti
<>
<Tile label="primary" value="123 €" variant="primary" className="kds-mb-4" />
<Tile label="primary-medium" value="123 €" variant="primary-medium" className="kds-mb-4" />
<Tile label="primary-light" value="123 €" variant="primary-light" className="kds-mb-4" />
<Tile label="primary-outline" value="123 €" variant="primary" appearance="outline" className="kds-mb-42" />
</>
Kaikkiin Tile-variantteihin voi myös tarvittaessa soveltaa käyttötilanteen mukaisia tilavärejä.
<>
<TileGroup className="kds-mb-4">
<Tile label="Maksettu tai palautettu" value="280,42 €" variant="success" />
<Tile label="Vähennykset" value="-149,56 €" variant="danger" />
</TileGroup>
<TileGroup className="kds-mb-4">
<Tile label="Maksettu tai palautettu" value="280,42 €" variant="success-medium" />
<Tile label="Vähennykset" value="-149,56 €" variant="danger-medium" />
</TileGroup>
<TileGroup className="kds-mb-4">
<Tile label="Maksettu tai palautettu" value="280,42 €" variant="success-light" />
<Tile label="Vähennykset" value="-149,56 €" variant="danger-light" />
</TileGroup>
<TileGroup>
<Tile label="Maksettu tai palautettu" value="280,42 €" variant="success-light" appearance="outline" />
<Tile label="Vähennykset" value="-149,56 €" variant="danger-light" appearance="outline" />
</TileGroup>
</>
Esimerkki neutraaleista dark-varianteista:
<>
<Tile label="Erottuva taustasävy (dark)" value="123 €" variant="dark" className="kds-mb-4" />
<Tile label="Keskitason taustasävy (dark-medium)" value="123 €" variant="dark-medium" className="kds-mb-4" />
<Tile label="Neutraali taustasävy (dark-light)" value="123 €" variant="dark-light" className="kds-mb-4" />
<Tile label="Neutraali kehys (dark-outline)" value="123 €" variant="dark" appearance="outline" className="kds-mb-2" />
</>
Ikoneilla kuvitetut nostot
Tile-komponenttiin voi liittää asiasisältöä kuvaavan kuvitusikonin. Ikonin koko on valmiiksi määritetty (large, 48 px).
Yksittäisessä Tile-nostossa ikoni tasautuu oletuksena aina vasempaan reunaan.
<>
<Tile
icon={<IconDecoEuro />}
label="Maksut yhteensä"
value="429,98 €"
variant="primary-medium"
className="kds-mb-4"
/>
<Tile
icon={<IconDecoCheckmarkCircle />}
label="Maksupäivä"
value="13.10.2019"
variant="primary-medium"
className="kds-mb-4"
/>
<Tile
icon={<IconDecoCalendar />}
label="Kauden kesto"
value="23 päivää"
variant="primary-medium"
className="kds-mb-2"
/>
</>
Vierekkäisten Tile-elementtien muodostamassa nostoryhmässä (TileGroup) ikonit ja tekstielementit on oletusarvoisesti keskitetty.
<>
<TileGroup>
<Tile icon={<IconDecoEuro />} label="Maksut yhteensä" value="429,98 €" variant="primary-medium" />
<Tile icon={<IconDecoCheckmarkCircle />} label="Maksupäivä" value="13.10.2019" variant="primary-medium" />
<Tile icon={<IconDecoCalendar />} label="Kauden kesto" value="23 päivää" variant="primary-medium" />
</TileGroup>
</>
Tarvittaessa myös korkeat Tile-elementit voi tasata samaan linjaan muiden nostoryhmän elementtien kanssa.
<>
<TileGroup breakpoint="lg">
<Tile
icon={<IconDecoEuro />}
align="left"
label="Etuus tai asia"
value="Sairauspäiväraha"
variant="primary-medium"
/>
<Tile icon={<IconDecoEuro />} align="left" label="Saaja" value="Esimerkkihenkilö, Eino" variant="primary-medium" />
<Tile
icon={<IconDecoEuro />}
align="left"
label="Maksu ajalta"
value="1.1.2029 - 4.2.2029"
variant="primary-medium"
/>
</TileGroup>
<Tile label="Maksettu tai palautettu" value="280,42 €" variant="primary-medium" />
<TileGroup>
<Tile label="Maksu- tai palautuspäivä" value="1.1.2029" variant="primary-medium" />
<Tile label="Päiviä" value="12" variant="primary-medium" />
<Tile label="Lisätieto" value="Takautuva" variant="primary-medium" />
</TileGroup>
</>
Lukunostojen koot
Tile-komponentin lukunoston tekstikokoa voi muokata valueSize-muuttujan avulla. Lukunoston voi esittää komponentissa neljässä eri koossa.
<>
<Tile
label="Lukunoston oletuskoko (xl)"
value="2.10.2023"
variant="primary"
appearance="outline"
className="kds-mb-4"
/>
<Tile
label="Korostettu lukunosto (2xl)"
value="2.10.2023"
valueSize="2xl"
variant="primary"
appearance="outline"
className="kds-mb-4"
/>
<Tile
label="Korostettu lukunosto (3xl)"
value="2.10.2023"
valueSize="3xl"
variant="primary"
appearance="outline"
className="kds-mb-4"
/>
<Tile
label="Korostettu lukunosto (4xl)"
value="2.10.2023"
valueSize="4xl"
variant="primary"
appearance="outline"
className="kds-mb-2"
/>
</>
Visuaaliseen korostamiseen voi käyttää samanaikaisesti myös ikonia. Tällöin lukunostossa (value) kannattaa yleensä soveltaa joko oletuskokoa (xl) tai kevyesti kasvatettua tekstikokoa (2xl).
<>
<Tile
icon={<IconDecoEuro />}
label="Lukunoston oletuskoko (xl)"
value="2.10.2023"
variant="primary"
appearance="outline"
className="kds-mb-4"
/>
<Tile
icon={<IconDecoEuro />}
label="Korostettu lukunosto (2xl)"
value="2.10.2023"
valueSize="2xl"
variant="primary"
appearance="outline"
className="kds-mb-2"
/>
</>
Nostoryhmä (TileGroup)
TileGroup-komponenttia voi soveltaa silloin, kun yksittäisistä Tile-nostoista halutaan luoda yhtenäinen ryhmä tai ruudukkomainen näkymä, jonka tiedot liittyvät samaan teemaan tai aihepiiriin.
Nostoryhmä voi sisältää esimerkiksi kaksi tai kolme vierekkäistä nostoa, joissa kiteytetään tiettyyn aiheeseen liittyvät ydintiedot.
<section aria-label="Maksutietoja">
<TileGroup>
<Tile icon={<IconDecoEuro />} label="Maksut yhteensä" value="429,98 €" variant="primary" />
<Tile icon={<IconDecoCheckmarkCircle />} label="Maksupäivä" value="13.10.2019" variant="primary" />
<Tile icon={<IconDecoCalendar />} label="Kauden kesto" value="23 päivää" variant="primary" />
</TileGroup>
<Tile label="Maksettu tai palautettu" value="280,42 €" />
<Tile label="Vähennykset yhteensä" value="-149,56 €" variant="danger-light" />
</section>
<section aria-label="Maksutietoja">
<TileGroup>
<Tile icon={<IconDecoEuro />} label="Maksut yhteensä" value="429,98 €" variant="primary" />
<Tile icon={<IconDecoCheckmarkCircle />} label="Maksupäivä" value="13.10.2019" variant="primary" />
<Tile icon={<IconDecoCalendar />} label="Kauden kesto" value="23 päivää" variant="primary" />
</TileGroup>
<Tile label="Maksettu tai palautettu" value="280,42 €" />
<Tile label="Vähennykset yhteensä" value="-149,56 €" variant="danger-light" />
</section>