Yleistä
Esimerkit sopivat tilanteisiin, joissa on tarpeen näyttää asiakkaan kannalta oleellisia tietoryhmiä helposti selailtavana mobiiliin sopivana listana.
Tietokortti
Kortin yläosan taustavärillinen alue sisältää kortin tärkeimmät tiedot:
- otsikon
- tarvittaessa muita asiakkaan kannalta tärkeitä tietoja, jotka auttavat asiakasta löytämään listauksesta tarvitsemansa kortin
- tarvittaessa soveltuvan ikonin korostamaan tietoja
- tarvittaessa tilatietoa korostavan badge-elementin
Muut kortin tiedot laitetaan kortin sisältöön, jolla ei ole taustaväriä.
<Box p={0} bgColor="white">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Kortin pääotsikko
</Heading>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Päivämäärä">1.5.2023</DescriptionListItem>
<DescriptionListItem label="Lisätieto">Donec placerat leo sit amet velit.</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
Sisällön voi asetella myös kahteen palstaan.
<Box p={0} rounded bgColor="white">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Burana 600 mg
</Heading>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList labelWidth="s" spacing="xs" emphasizeValue>
<DescriptionListItem label="Määräyspäivä">14.10.2021</DescriptionListItem>
<DescriptionListItem label="Määrätty määrä">2 x 100 kpl</DescriptionListItem>
<DescriptionListItem label="Lääkettä jäljellä">0</DescriptionListItem>
<DescriptionListItem label="Reseptin viimeinen voimassaolopäivä">Ei voimassa</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
Kortin lisätietojen näyttäminen
Kortin yläosassa voi näyttää otsikon lisäksi asiakkaan kannalta olennaisia lisätietoja. Älä kuitenkaan laita lisätietoja liikaa, vaan valitse asiakkaan kannalta tärkeimmät.
Tekstimuotoinen lisätieto
<Box p={0} rounded bgColor="white">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Burana 600 mg
</Heading>
<Text color="brand-primary">Tabletti, kalvopäällysteinen</Text>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList labelWidth="s" spacing="xs" emphasizeValue>
<DescriptionListItem label="Määräyspäivä">14.10.2021</DescriptionListItem>
<DescriptionListItem label="Määrätty määrä">2 x 100 kpl</DescriptionListItem>
<DescriptionListItem label="Lääkettä jäljellä">0</DescriptionListItem>
<DescriptionListItem label="Reseptin viimeinen voimassaolopäivä">Ei voimassa</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
Lisätiedot ikonin kanssa
<Box p={0} bgColor="white">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Kortin pääotsikko
</Heading>
<Text mb={1} className="kds-flex kds-items-center">
<IconCalendar className="kds-mr-2" /> 1.4.2023 alkaen
</Text>
<Text className="kds-flex kds-items-center">
<IconEuro className="kds-mr-2" /> 123,45 €
</Text>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Päivämäärä">1.5.2023</DescriptionListItem>
<DescriptionListItem label="Lisätieto">Donec placerat leo sit amet velit.</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
Tilatieto badgessa
function CardExampleWithAccordion() {
const { isToggleOn: isOpen, flipToggle: setIsOpen } = useToggle();
return (
<Box p={0} bgColor="white">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Kortin pääotsikko
</Heading>
<Text mb={2}>Asiakkaan kannalta mielenkiintoinen lisätieto.</Text>
<Badge variant="primary">Tilatieto</Badge>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Päivämäärä">1.5.2024</DescriptionListItem>
<DescriptionListItem label="Lisätieto">Donec placerat leo sit amet velit.</DescriptionListItem>
</DescriptionList>
<Accordion id="card-info-1" appearance="link" isOpen={isOpen("card-info-1")}>
<AccordionToggle onClick={() => setIsOpen("card-info-1")}>
{isOpen("card-info-1") && <span>Piilota tiedot asiasta</span>}
{!isOpen("card-info-1") && <span>Näytä tiedot asiasta</span>}
</AccordionToggle>
<AccordionBody className="kds-pb-0">
<Text>
Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis
libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.
</Text>
</AccordionBody>
</Accordion>
</Spacing>
</Box>
);
}
Lisätieto ennen otsikkoa
Joskus kortin ensimmäiseksi tiedoksi on tarpeen nostaa otsikon sijaan jokin muu tieto, kuten esimerkiksi päivämäärä, jonka perusteella kortit järjestetään. Huomioi, että ruudunlukijalle järjestys menee oikein, ja otsikko luetaan ensin.
<Box p={0} bgColor="white">
<Box variant="primary" appearance="solid" m={0}>
<div className="kds-flex kds-flex-col-reverse">
<Heading as="h3" size={5} mt={0} mb={0}>
Kortin pääotsikko
</Heading>
<Text mb={2}>1.5.2024</Text>
</div>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Lorem">Donec placerat leo sit amet velit.</DescriptionListItem>
<DescriptionListItem label="Ipsum">Donec placerat leo sit amet.</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
Avattava kortti
Avattavassa kortissa on tietokortin tapaan yläosa, jossa on kortin tärkeimmät tiedot. Kortin muu sisältö on avattavina haitareina (Accordion-komponentti).
Haitareilla on oltava selkeät otsikot, jotta asiakas ymmärtää, mitä tietoja ne sisältävät.
function CardExampleWithAccordion() {
const { isToggleOn: isOpen, flipToggle: setIsOpen } = useToggle();
return (
<Box p={0} bgColor="white">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Kortin pääotsikko
</Heading>
<Badge variant="success" className="kds-mb-3">
Tilatieto
</Badge>
<Text mb={1}>
Tärkeä päivämäärä <strong>15.2.2024</strong>
</Text>
<Text>
Määrä <strong>124,45 €</strong>
</Text>
</Box>
<Accordion id="toggleable-card-info-1" isOpen={isOpen("toggleable-card-info-1")}>
<AccordionToggle onClick={() => setIsOpen("toggleable-card-info-1")}>Avautuvan osion otsikko</AccordionToggle>
<AccordionBody>
<Text>
Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis
libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="toggleable-card-info-2" isOpen={isOpen("toggleable-card-info-2")} className="kds-border-0">
<AccordionToggle onClick={() => setIsOpen("toggleable-card-info-2")}>
Toisen avautuvan osion otsikko
</AccordionToggle>
<AccordionBody>
<Text>
Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis
libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.
</Text>
</AccordionBody>
</Accordion>
</Box>
);
}
function CardExampleWithAccordion() {
const { isToggleOn: isOpen, flipToggle: setIsOpen } = useToggle();
return (
<Box p={0} rounded bgColor="white">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Kortin pääotsikko
</Heading>
<Text color="brand-primary" mb={2}>
Asiakkaan kannalta mielenkiintoinen lisätieto.
</Text>
<Badge variant="danger" className="kds-mb-2">
Tilatieto
</Badge>
</Box>
<Accordion id="toggleable-card-info-kanta-1" isOpen={isOpen("toggleable-card-info-kanta-1")}>
<AccordionToggle onClick={() => setIsOpen("toggleable-card-info-kanta-1")}>
Avautuvan osion otsikko
</AccordionToggle>
<AccordionBody>
<Text>
Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis
libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.
</Text>
</AccordionBody>
</Accordion>
<Accordion
id="toggleable-card-info-kanta-2"
isOpen={isOpen("toggleable-card-info-kanta-2")}
className="kds-border-0"
>
<AccordionToggle onClick={() => setIsOpen("toggleable-card-info-kanta-2")}>
Toisen avautuvan osion otsikko
</AccordionToggle>
<AccordionBody>
<Text>
Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis
libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.
</Text>
</AccordionBody>
</Accordion>
</Box>
);
}
Jos kaikki kortin tiedot pitää saada avattua yhdellä kertaa, voi kortin sisältö olla avattava. Käytä tällöin kevyttä haitarielementtiä linkkipainikkeen tyylillä.
function CardExampleWithAccordion() {
const [isOpen, setIsOpen] = useState(false);
return (
<Box p={0} bgColor="white">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Lapsilisä
</Heading>
<Text>Sinulle on tulevia maksuja.</Text>
</Box>
<Spacing base={4} sm={6}>
<Accordion id="toggleable-card-info-all-1" appearance="link" isOpen={isOpen}>
<AccordionToggle onClick={() => setIsOpen(!isOpen)}>
{isOpen && <span>Piilota tiedot</span>}
{!isOpen && <span>Näytä tiedot</span>}
</AccordionToggle>
<AccordionBody className="kds-pb-0">
<Text>
Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis
libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.
</Text>
</AccordionBody>
</Accordion>
</Spacing>
</Box>
);
}
Klikattava kortti
Klikattava kortti sopii tilanteisiin, joissa asiakas etsii listauksesta ensin häntä kiinnostavan kortin, ja siirtyy sen jälkeen tarkastelemaan kyseiseen korttiin liittyviä tarkempia tietoja tai toimintoja omalle sivulle. Tällöin kortin tietoihin ei tarvita avattavia haitareita, vaan lisätiedot näkee erilliseltä sivulta.
Kortin yläosa on klikattava ja siirtää uudelle sivulle. Kortin alaosassa voi näyttää tarpeellisen määrän tietoja, jotta asiakas osaa valita listauksesta oikean kortin.
<Box p={0} bgColor="white">
<LinkBox href="#" contentAs="div" className="sm:kds-py-6">
<Heading as="h3" size={5} mt={0} mb={2}>
Kortin pääotsikko
</Heading>
<Text mb={1} color="body" className="kds-flex kds-items-center">
<IconCalendar className="kds-mr-2" /> 1.4.2023 alkaen
</Text>
<Text color="body" className="kds-flex kds-items-center">
<IconEuro className="kds-mr-2" /> 123,45 €
</Text>
</LinkBox>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Päivämäärä">1.5.2023</DescriptionListItem>
<DescriptionListItem label="Lisätieto">Donec placerat leo sit amet velit.</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
<Box p={0} rounded bgColor="white">
<LinkBox href="#" className="kds-focus-ring-inset-dark kds-rounded-t-md sm:kds-py-6" contentAs="div">
<Heading as="h3" size={5} mt={0} mb={2}>
Burana 600 mg
</Heading>
<Text color="brand-primary">Tabletti, kalvopäällysteinen</Text>
</LinkBox>
<Spacing base={4} sm={6}>
<DescriptionList labelWidth="s" spacing="xs" emphasizeValue>
<DescriptionListItem label="Määräyspäivä">14.10.2021</DescriptionListItem>
<DescriptionListItem label="Määrätty määrä">2 x 100 kpl</DescriptionListItem>
<DescriptionListItem label="Lääkettä jäljellä">0</DescriptionListItem>
<DescriptionListItem label="Reseptin viimeinen voimassaolopäivä">Ei voimassa</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
Siirtymän voi tarjota myös linkkinä kortin sisällä. Tällöin kortin yläosan ei tarvitse olla klikattava. Erillisen linkin hyvä puoli on se, että sille voi antaa kuvaavan nimen.
<Box p={0} bgColor="white">
<Box variant="primary" appearance="solid">
<Heading as="h3" size={5} mt={0} mb={2}>
Kortin pääotsikko
</Heading>
<Text mb={2}>Asiakkaan kannalta mielenkiintoinen lisätieto.</Text>
<Badge variant="primary">Tilatieto</Badge>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Päivämäärä">1.5.2024</DescriptionListItem>
<DescriptionListItem label="Lisätieto">Donec placerat leo sit amet velit.</DescriptionListItem>
</DescriptionList>
<Text>
<Link href="#" standalone>
Linkki tarkempiin tietoihin
</Link>
</Text>
</Spacing>
</Box>
Yritä välttää tilannetta, jossa sama kortti olisi sekä klikattava että avattava. Kokonaisuudesta tulee helposti sekava, eikä asiakas tiedä, mistä hänen kannattaisi klikata.
<Box p={0} m={0} className="kds-relative" bgColor="white">
<DocNotRecommended />
<LinkBox href="#" contentAs="div" className="sm:kds-py-6">
<Heading as="h3" size={5} mt={0} mb={2}>
Kortin pääotsikko
</Heading>
<Text mb={1} color="body" className="kds-flex kds-items-center">
<IconCalendar className="kds-mr-2" /> 1.4.2023 alkaen
</Text>
<Text color="body" className="kds-flex kds-items-center">
<IconEuro className="kds-mr-2" /> 123,45 €
</Text>
</LinkBox>
<Accordion id="lisatieto-1" isOpen={false}>
<AccordionToggle>Avautuvan osion otsikko</AccordionToggle>
<AccordionBody>
<Text>
Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero
nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="lisatieto-2" isOpen={false} className="kds-border-0">
<AccordionToggle>Toisen avautuvan osion otsikko</AccordionToggle>
<AccordionBody>
<Text>
Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero
nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.
</Text>
</AccordionBody>
</Accordion>
</Box>
Korttilistaus
Listana esitettävät kortit kannattaa sijoittaa lista-elementtiin, jolloin ruudunlukija ilmoittaa tiedon korttien lukumäärästä.
<List unstyled>
<ListItem>
<Box p={0} bgColor="white">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Ensimmäinen pääotsikko
</Heading>
<Text mb={1} className="kds-flex kds-items-center">
<IconCalendar className="kds-mr-2" /> 1.4.2023 alkaen
</Text>
<Text className="kds-flex kds-items-center">
<IconEuro className="kds-mr-2" /> 123,45 €
</Text>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Lorem">Donec placerat leo sit amet velit.</DescriptionListItem>
<DescriptionListItem label="Ipsum">Donec placerat leo sit amet.</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
</ListItem>
<ListItem>
<Box p={0} bgColor="white">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Toinen pääotsikko
</Heading>
<Badge variant="success" className="kds-mb-3">
Tilatieto
</Badge>
<Text mb={1} className="kds-flex kds-items-center">
<IconCalendar className="kds-mr-2" /> 1.4.2023 alkaen
</Text>
<Text className="kds-flex kds-items-center">
<IconEuro className="kds-mr-2" /> 123,45 €
</Text>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Lorem">Donec placerat leo sit amet velit.</DescriptionListItem>
<DescriptionListItem label="Ipsum">Donec placerat leo sit amet.</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
</ListItem>
<ListItem>
<Box p={0} bgColor="white">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Kolmas pääotsikko
</Heading>
<Text mb={1} className="kds-flex kds-items-center">
<IconCalendar className="kds-mr-2" /> 1.4.2023 alkaen
</Text>
<Text className="kds-flex kds-items-center">
<IconEuro className="kds-mr-2" /> 123,45 €
</Text>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Lorem">Donec placerat leo sit amet velit.</DescriptionListItem>
<DescriptionListItem label="Ipsum">Donec placerat leo sit amet.</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
</ListItem>
</List>
Taulukkomaisen datan esittäminen nostokortilla
<Box p={0} bgColor="white" rounded>
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Kortin pääotsikko
</Heading>
<Text mb={2}>Asiakkaan kannalta mielenkiintoinen lisätieto.</Text>
<Badge variant="dark">Tilatieto</Badge>
</Box>
<Spacing base={4} sm={6}>
<Row sm={8} md={6} lg={6} xl={3} gy={4} className="kds--my-2">
<Column>
<strong>Laatimispäivä</strong>
<br />
27.8.2024
</Column>
<Column>
<strong>Sosiaalipalvelu</strong>
<br />
Lorem ipsum
</Column>
<Column>
<strong>Rekisterinpitäjä</strong>
<br />
Lorem ipsum
</Column>
<Column>
<strong>Liitteet</strong>
<br />
Ei liitteitä
</Column>
</Row>
</Spacing>
</Box>