Information Card
6.0.36
A description of this component is work in progress.
| 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" |
npm install @sj-ab/component-library.ui.information-cardSemantik
Information Card kan visas i tre varianter med olika semantik.
1. Enbart text
Presenteras som en vanlig <div> med en eventuell rubrik inuti.
2. Klickbart eller länkat kort
Hela kortet presenteras som en knapp eller länk (<a href> eller <button type="button">).
3. Ej klickbart kort med listade länkar
Presenteras som en vanlig <div> med en eventuell rubrik inuti, följt av en lista (<ul> + <li>) med individuella länkar <a href>
Rubriknivåer
Använt propen titleElementType för att anpassa kortets rubriknivå så att den passar in i sidans övergripande rubrikhierarki.
Minskad rörelse
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)
Adds ErrorSummaryCard component and stories.
6.0.32TimePicker component
6.0.22Fixes positioning of chevron icon in ListItems and ListItemButtons so that margin doesn't break out of the grid.
6.0.18Fixes positioning of chevron icon in ListItems and ListItemButtons so that margin doesn't break out of the grid.
6.0.17
Importer av Information Card
Repos med Information Card
Senaste installerade version av Information Card
Äldsta installerade version av Information Card