Siirry sisältöön
Kela Design System KDS

15.2.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

    Renderöitävä HTML-elementti

    Tyyppi: ElementType

    Oletusarvo: "div" as E

  • children

    Komponentin sisältö

    Tyyppi: ReactNode

  • className

    CSS-apuluokat ulkoasun muokkaamiseen.

    Tyyppi: string

  • direction

    Komponentin suunta

    Tyyppi: "vertical" | "horizontal"

    Oletusarvo: vertical

  • rounded

    Pyöristetyt reunat

    Tyyppi: boolean

  • testId

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

    Tyyppi: string

CardHeader

  • as

    Renderöitävä HTML-elementti

    Tyyppi: ElementType

    Oletusarvo: "div" as E

  • children

    Komponentin sisältö

    Tyyppi: ReactNode

  • className

    CSS-apuluokat ulkoasun muokkaamiseen.

    Tyyppi: string

  • testId

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

    Tyyppi: string

CardTitle

  • as

    Renderöitävä HTML-elementti

    Tyyppi: ElementType

    Oletusarvo: "h2" as E

  • children

    Komponentin sisältö

    Tyyppi: ReactNode

  • className

    CSS-apuluokat ulkoasun muokkaamiseen.

    Tyyppi: string

  • testId

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

    Tyyppi: string

CardImage

  • alt

    Kuvan alt-teksti

    Tyyppi: string

    Oletusarvo: ""

  • as

    Renderöitävä HTML-elementti

    Tyyppi: ElementType

    Oletusarvo: "figure" as E

  • caption

    Kuvan lisätietoteksti

    Tyyppi: string

  • children

    Komponentin sisältö

    Tyyppi: ReactNode

  • className

    CSS-apuluokat ulkoasun muokkaamiseen.

    Tyyppi: string

  • src
    Pakollinen

    Kuvan src-attribuutti

    Tyyppi: string

  • testId

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

    Tyyppi: string

CardIcon

  • as

    Renderöitävä HTML-elementti

    Tyyppi: ElementType

  • bgColor

    bgColor: Ikonille annettava taustaväri.

    Tyyppi: string

  • children

    Komponentin sisältö

    Tyyppi: ReactNode

  • className

    CSS-apuluokat ulkoasun muokkaamiseen.

    Tyyppi: string

  • testId

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

    Tyyppi: string

CardBody

  • as

    Renderöitävä HTML-elementti

    Tyyppi: ElementType

    Oletusarvo: "div" as E

  • children

    Komponentin sisältö

    Tyyppi: ReactNode

  • className

    CSS-apuluokat ulkoasun muokkaamiseen.

    Tyyppi: string

  • testId

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

    Tyyppi: string

CardFooter

  • as

    Renderöitävä HTML-elementti

    Tyyppi: ElementType

    Oletusarvo: "div" as E

  • children

    Komponentin sisältö

    Tyyppi: ReactNode

  • className

    CSS-apuluokat ulkoasun muokkaamiseen.

    Tyyppi: string

  • testId

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

    Tyyppi: string