Information Card

6.3.8

A description of this component is work in progress.

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)

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"

Installation

npm install @sj-ab/component-library.ui.information-card

Länkar

Tillgänglighet

Semantik

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)

Change log

Statistik

Importer av Information Card

Repos med Information Card

20%

Senaste installerade version av Information Card

6.3.5

Äldsta installerade version av Information Card

6.3.5