Card
6.1.1
The Card component is a helpful wrapper for various types of content. The container itself has no touch target.
| Namn | Typ | Beskrivning |
|---|---|---|
CardActionAreaRef | Ref | Reference to the CardActionArea component |
cardRef | Ref | Reference to the card div element |
ImageProps | ImageProps | Props for the Image component |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
LinkComponent | ElementType | The component used to render a link when the href prop is provided. |
listItems | Item[] | Array of items to be displayed in the list |
listItemTypographyProps | TypographyProps | Props for the Typography component used in list items |
negativeMargins | boolean | If true, applies negative horizontal margins. |
onClick | () => void | Click handler for the card |
secondaryMeta | string | Secondary text displayed inside the information card |
type | "elevated" |
"filled" | Variant of the InformationCard, defaults to "outlined" |
cardName * | string | The display name of the card. |
cardNameComponent | unknown | Defines the semantic HTML element to be used for the cardName typography of the card. Default is H3 |
clickableCardScreenReaderPrefix | string | Visually hidden prefix text for screen readers. Used only when card is clickable. Should clarify the action, e.g. "Show QR code for". |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
customTranslation | DeepPartial | Translation object used for screen reader texts. |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
lang | "sv" |
"en" | Language used for internal translations. |
layout | "small" |
"medium" | Fixed size of the card, takes precedence over breakpoints. |
onClick | () => void | Callback when card is clicked, also adds clickable card styling. |
resplusLogo | boolean | Indicates if the ResPlus logo should be displayed. Only applicable for yearCardSilver or yearCardGold variants. |
showQrCode | boolean | Indicates whether a QR code logo should be displayed on the card, suggesting the presence of a scannable QR code. |
showValidityDates | boolean | Determines whether the card's validity period (validityFrom and validityTo) is displayed. Defaults to true. |
status | "CANCELLED" |
"EXHAUSTED" |
"EXPIRED" |
"PARTIALLY_CREDITED" | Status of the card: CANCELLED, EXHAUSTED, EXPIRED, or PARTIALLY_CREDITED |
npm install @sj-ab/component-library.ui.cardCard är en av våra vanligaste komponenter som används i många olika situationer och i många konfigurationer. Den används ofta som en byggsten i andra komponenter.
Semantik
En Card renderas som en enkel <div>-behållare.
Card eller ClickableCard?
När ett kort ska ha interaktivitet och fungera som en länk eller knapp så måste alltid ClickableCard användas istället för vanliga Card.
ClickableCard har inbyggt stöd för fokusmarkering och har rätt semantik för hjälpmedel för att kommunicera att den är interaktiv.
Importer av Card
Repos med Card
Senaste installerade version av Card
Äldsta installerade version av Card