Yleistä
Esimerkit sopivat tilanteisiin, joissa on tarpeen näyttää käyttäjän 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 käyttäjän kannalta tärkeitä tietoja, jotka auttavat käyttäjää 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="background">
<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="background">
<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="sm" 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 käyttäjän kannalta olennaisia lisätietoja. Älä kuitenkaan laita lisätietoja liikaa, vaan valitse käyttäjän kannalta tärkeimmät.
Tekstimuotoinen lisätieto
<Box p={0} rounded bgColor="background">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Burana 600 mg
</Heading>
<Text color="brand-primary" darkColor="body">
Tabletti, kalvopäällysteinen
</Text>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList labelWidth="sm" 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="background">
<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">
<IconUiCalendar className="kds-mr-2" /> 1.4.2023 alkaen
</Text>
<Text className="kds-flex kds-items-center">
<IconUiEuro 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="background">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Kortin pääotsikko
</Heading>
<Text mb={2}>Käyttäjän 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="background">
<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 käyttäjä ymmärtää, mitä tietoja ne sisältävät.
function CardExampleWithAccordion() {
const { isToggleOn: isOpen, flipToggle: setIsOpen } = useToggle();
return (
<Box p={0} bgColor="background">
<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="background">
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Kortin pääotsikko
</Heading>
<Text color="brand-primary" darkColor="body" mb={2}>
Käyttäjän 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="background">
<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 käyttäjä 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 käyttäjä osaa valita listauksesta oikean kortin.
<Box p={0} bgColor="background">
<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">
<IconUiCalendar className="kds-mr-2" /> 1.4.2023 alkaen
</Text>
<Text color="body" className="kds-flex kds-items-center">
<IconUiEuro 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="background">
<LinkBox href="#" className="kds-focus-ring-inset 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" darkColor="body">
Tabletti, kalvopäällysteinen
</Text>
</LinkBox>
<Spacing base={4} sm={6}>
<DescriptionList labelWidth="sm" 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="background">
<Box variant="primary" appearance="solid">
<Heading as="h3" size={5} mt={0} mb={2}>
Kortin pääotsikko
</Heading>
<Text mb={2}>Käyttäjän 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ä käyttäjä tiedä, mistä hänen kannattaisi klikata.
<Box p={0} m={0} className="kds-relative" bgColor="background">
<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">
<IconUiCalendar className="kds-mr-2" /> 1.4.2023 alkaen
</Text>
<Text color="body" className="kds-flex kds-items-center">
<IconUiEuro 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>
Koko kortin kokoinen klikattava alue
Esimerkkejä koko kortin klikattavasta alueesta erilaisten komponenttien kanssa. Toteuttamiseen käytetään Clickable-komponenttia.
<Clickable
render={({ getProps, getActionProps }) => (
<Box p={4} rounded bgColor="background" {...getProps<BoxProps<"div">>({ className: "kds-flex kds-items-center" })}>
<div>
<Heading as="h3" size={5} mt={0} mb={2}>
<Link
href="#"
underline={false}
{...getActionProps<LinkProps<"a">>({ className: "kds-text-brand-primary dark:kds-text-light" })}
>
Iäkkäiden palvelut
</Link>
</Heading>
<Text mb={2}>Ei voimassa olevia luovutuskieltoja.</Text>
<Badge variant="primary">Asiakkuus</Badge>
</div>
<div className="kds-ml-auto">
<IconUiCaretRight size="m" className="kds-text-brand-primary dark:kds-text-light" />
</div>
</Box>
)}
/>
<Clickable
render={({ getProps, getActionProps }) => (
<Box p={0} bgColor="background" rounded {...getProps<BoxProps<"div">>()}>
<Box className="kds-flex kds-items-center" variant="primary" appearance="solid" m={0}>
<div>
<Heading as="h3" size={5} mt={0} mb={2}>
<Link
href="#"
underline={false}
{...getActionProps<LinkProps<"a">>({ className: "kds-text-brand-primary dark:kds-text-light" })}
>
Sumatriptan Sandoz 50 mg
</Link>
</Heading>
<Text mb={0}>Tabletti, kalvopäällysteinen</Text>
</div>
<div className="kds-ml-auto">
<IconUiCaretRight size="m" className="kds-text-brand-primary dark:kds-text-light" />
</div>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList sm={8} md={6} lg={6} xl={3} gy={4} stack>
<DescriptionListItem label="Määräyspäivä">27.8.2024</DescriptionListItem>
<DescriptionListItem label="Määrätty määrä">1 x 12 fol</DescriptionListItem>
<DescriptionListItem label="Lääkettä jäljellä">0</DescriptionListItem>
<DescriptionListItem label="Resepti voimassa saakka">25.11.2026</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
)}
/>
<Clickable
render={({ getProps, getActionProps }) => {
const id = useId();
return (
<Box p={0} bgColor="background" rounded {...getProps<BoxProps<"div">>()}>
<Box className="kds-flex" variant="primary" appearance="solid" m={0}>
<div>
<Checkbox className="kds-mr-4 kds-mt-1" id={id} />
</div>
<div>
<Heading
as="label"
htmlFor={id}
size={5}
mt={0}
mb={1}
{...getActionProps<HeadingProps<"label">>(
{ className: "kds-text-brand-primary dark:kds-text-light" },
{ type: "checkbox" }
)}
>
Sumatriptan Sandoz 50 mg
</Heading>
<Text mb={0}>Tabletti, kalvopäällysteinen</Text>
</div>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList sm={8} md={6} lg={6} xl={3} gy={4} stack>
<DescriptionListItem label="Määräyspäivä">27.8.2024</DescriptionListItem>
<DescriptionListItem label="Määrätty määrä">1 x 12 fol</DescriptionListItem>
<DescriptionListItem label="Lääkettä jäljellä">0</DescriptionListItem>
<DescriptionListItem label="Resepti voimassa saakka">25.11.2026</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
);
}}
/>
<Clickable
render={({ getProps, getActionProps, getSecondaryActionProps }) => (
<Box p={0} bgColor="background" rounded {...getProps<BoxProps<"div">>()}>
<Box className="kds-flex kds-items-center" variant="primary" appearance="solid" m={0}>
<div>
<Heading as="h3" size={5} mt={0} mb={2}>
<Link
href="#"
underline={false}
{...getActionProps<LinkProps<"a">>({ className: "kds-text-brand-primary dark:kds-text-light" })}
>
fs-kolesteroli, high density lipoproteiinit
</Link>
</Heading>
<Text mb={0}>Valmistunut 24.9.2024 13:41</Text>
</div>
<div className="kds-ml-auto">
<IconUiCaretRight size="m" className="kds-text-brand-primary dark:kds-text-light" />
</div>
</Box>
<Alert flush size="sm" variant="danger">
Alle viitearvon ylärajan
</Alert>
<Spacing base={4} sm={6}>
<Row cols={12} sm={6}>
<Column>
<DescriptionList className="kds-mb-0" columns={2} stack>
<DescriptionListItem label="Määräyspäivä">27.8.2024</DescriptionListItem>
<DescriptionListItem label="Viitearvot">Yli 1 mmol/l</DescriptionListItem>
</DescriptionList>
</Column>
<Column className="kds-justify-end sm:kds-flex kds-items-center kds-py-4 sm:kds-py-0">
<Link href="#" standalone {...getSecondaryActionProps<LinkProps<"a">>({ className: "kds-p-2 kds--m-2" })}>
Näytä tutkimushistoria
</Link>
</Column>
</Row>
</Spacing>
</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="background">
<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">
<IconUiCalendar className="kds-mr-2" /> 1.4.2023 alkaen
</Text>
<Text className="kds-flex kds-items-center">
<IconUiEuro 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="background">
<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">
<IconUiCalendar className="kds-mr-2" /> 1.4.2023 alkaen
</Text>
<Text className="kds-flex kds-items-center">
<IconUiEuro 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="background">
<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">
<IconUiCalendar className="kds-mr-2" /> 1.4.2023 alkaen
</Text>
<Text className="kds-flex kds-items-center">
<IconUiEuro 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="background" rounded>
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h3" size={5} mt={0} mb={2}>
Kortin pääotsikko
</Heading>
<Text mb={2}>Käyttäjän kannalta mielenkiintoinen lisätieto.</Text>
<Badge variant="dark">Tilatieto</Badge>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList sm={8} md={6} lg={6} xl={3} gy={4} stack>
<DescriptionListItem label="Laatimispäivä">27.8.2024</DescriptionListItem>
<DescriptionListItem label="Sosiaalipalvelu">Lorem ipsum</DescriptionListItem>
<DescriptionListItem label="Rekisterinpitäjä">Lorem ipsum</DescriptionListItem>
<DescriptionListItem label="Liitteet">Ei liitteitä</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>