Information Card
8.0.17
A description of this component is work in progress.
| Namn | Typ | Beskrivning |
|---|---|---|
CardActionAreaRef | ClickableCardProps["CardActionAreaRef"] | Reference to the CardActionArea component |
ImageProps | ImageProps | Props for the Image component |
LinkComponent | ClickableCardProps["LinkComponent"] | The component used to render a link when the href prop is provided. |
cardRef | React.Ref<HTMLDivElement> | Reference to the card div element |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
listItemTypographyProps | TypographyProps | Props for the Typography component used in list items |
listItems | Item[] | Array of items to be displayed in the list |
negativeMargins | boolean | If true, applies negative horizontal margins. |
onClick | ClickableCardProps["onClick"] | Click handler for the card |
secondaryMeta | string | Secondary text displayed inside the information card |
type | "filled" | "elevated" | Variant of the InformationCard, defaults to "outlined" |
title | string | undefined | Title of the card. |
titleElementType | React.ElementType | never | Element type for the title text |
titleId | string | never | ID for the title element. |
titleTypographyProps | TypographyProps | never | Props for the Typography component used for the title |
titleVariant | "h2" | "h3" | never | Variant of the title font |
npm install @sj-ab/component-library.ui.information-cardInformation Card kan visas i tre varianter med olika semantik.
Presenteras som en vanlig <div> med en eventuell rubrik inuti.
Hela kortet presenteras som en knapp eller länk (<a href> eller <button type="button">).
Presenteras som en vanlig <div> med en eventuell rubrik inuti, följt av en lista (<ul> + <li>) med individuella länkar <a href>
Använt propen titleElementType för att anpassa kortets rubriknivå så att den passar in i sidans övergripande rubrikhierarki.
Kortets inzoomningseffekt på hover visas inte för de användare som har angett i sina systeminställningar att de vill ha mindre rörelse (prefers-reduced-motion: reduce)
Importer av Information Card
Repos med Information Card
Senaste installerade version av Information Card
Äldsta installerade version av Information Card