Siirry sisältöön
Kela Design System KDS

15.1.0

Card

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.

Julkaistu versiossa 0.15.3

React API

Card

  • as

    Tyyppi: ElementType

    Oletusarvo: "div" as E

    Renderöitävä HTML-elementti

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    CSS-apuluokat ulkoasun muokkaamiseen.

  • direction

    Tyyppi: "vertical" | "horizontal"

    Oletusarvo: vertical

    Komponentin suunta

  • rounded

    Tyyppi: boolean

    Pyöristetyt reunat

  • testId

    Tyyppi: string

    Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

CardHeader

  • as

    Tyyppi: ElementType

    Oletusarvo: "div" as E

    Renderöitävä HTML-elementti

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    CSS-apuluokat ulkoasun muokkaamiseen.

  • testId

    Tyyppi: string

    Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

CardTitle

  • as

    Tyyppi: ElementType

    Oletusarvo: "h2" as E

    Renderöitävä HTML-elementti

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    CSS-apuluokat ulkoasun muokkaamiseen.

  • testId

    Tyyppi: string

    Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

CardImage

  • alt

    Tyyppi: string

    Oletusarvo: ""

    Kuvan alt-teksti

  • as

    Tyyppi: ElementType

    Oletusarvo: "figure" as E

    Renderöitävä HTML-elementti

  • caption

    Tyyppi: string

    Kuvan lisätietoteksti

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    CSS-apuluokat ulkoasun muokkaamiseen.

  • src

    Pakollinen

    Tyyppi: string

    Kuvan src-attribuutti

  • testId

    Tyyppi: string

    Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

CardIcon

  • as

    Tyyppi: ElementType

    Renderöitävä HTML-elementti

  • bgColor

    Tyyppi: string

    bgColor: Ikonille annettava taustaväri.

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    CSS-apuluokat ulkoasun muokkaamiseen.

  • testId

    Tyyppi: string

    Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

CardBody

  • as

    Tyyppi: ElementType

    Oletusarvo: "div" as E

    Renderöitävä HTML-elementti

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    CSS-apuluokat ulkoasun muokkaamiseen.

  • testId

    Tyyppi: string

    Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

CardFooter

  • as

    Tyyppi: ElementType

    Oletusarvo: "div" as E

    Renderöitävä HTML-elementti

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    CSS-apuluokat ulkoasun muokkaamiseen.

  • testId

    Tyyppi: string

    Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.