Siirry sisältöön
Kela Design System KDS

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

  • appearance

    Määrittää täytetäänkö kortti yhdellä värillä vai käytetäänkö reunaviivaa

    Tyyppi: "solid" | "outline"

    Oletusarvo: outline

  • as

    Renderöitävä HTML-elementti

    Tyyppi: ElementType

  • 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

  • variant

    Kortin väri (danger ja warning ovat käytössä vain Kela-teemassa)

    Tyyppi: "primary" | "danger" | "warning" | "success"

CardHeader

  • as

    Renderöitävä HTML-elementti

    Tyyppi: ElementType

  • 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

  • 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

  • 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

  • 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

  • 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