Product Card
3.1.16
A description of this component is work in progress.
| Namn | Typ | Beskrivning |
|---|---|---|
ariaLabel * | string | Screen reader version for the whole card, please include all visual information |
availability | "available" |
ProductCardUnavailableReasons | Product availability, defaults to "available" |
cardVariants * | ProductCardVariant[] | Which card images to display |
children | ReactNode | |
customAttribute | { attribute: string; value: string |
number } | Used for testing, attribute is passed to the button element |
disabled | boolean | If true, the component is disabled. |
id * | string | A unique identifier for the product |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
name * | string | Title of the product |
onClick * | (id: string) => void | Callback fired when card is clicked. |
priceText | string | Text shown under the price |
priceTextType | "secondary" |
"standard" |
"lowPrice" | Type of price text, changes the color of the price text. |
secondaryPriceText | string | Text shown under the price. |
secondaryPriceTextType | "secondary" |
"standard" |
"lowPrice" | Type of secondary price text, changes the color of the secondary price text. |
translation | Partial | Optional custom translations |
npm install @sj-ab/component-library.ui.product-cardSemantik
Product Card presenteras för användaren som en knapp (<button type="button">).
Användare med tangentbord får ett enda tabbsteg per Product Card.
Användare med touchbaserade skärmläsare, som till exempel VoiceOver på iOS, kan navigera mellan Product Cards med ett enda "swipe" framåt eller bakåt.
Tillgängligt namn
Product Card får sin uppläsning för skärmläsare från den obligatoriska proppen ariaLabel.
Se till att all synlig information också finns med i ariaLabel så att ingen information går förlorad!
I framtiden bör vi ändra så att komponentens namn kommer från den synliga texten istället.
200% textförstoring
Product Card har inbyggt stöd för textförstoring upp till 200% på alla skärmstorlekar. När det blir ont om plats kommer priset automatiskt att flytta ner och visas underst i kortet.
Importer av Product Card
Repos med Product Card
Senaste installerade version av Product Card
Äldsta installerade version av Product Card