• Start
  • Blogg
  • Kom igång
  • Riktlinjer
  • Komponenter
  • Changelog
  • Tillgänglighet
  • Inställningar

Komponenter

Komponenter

​
​

Inga resultat hittade, prova med andra sökvillkor.

Product Card

Product Card

4.0.33

A description of this component is work in progress.

Demo
Installation
Länkar
Tillgänglighet
Change log
Statistik

Demo

Installation

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

Länkar

  • Storybook

  • Figma

  • Bit.cloud

Tillgänglighet

Semantik

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.

Change log

  • Security updates and bit automatic vulnerabilites workflow fix

    4.0.23
  • Add .js extensions to internal imports

    4.0.15
  • Add .vscode/tasks.json for task automation

    4.0.9

Statistik

  • Importer av Product Card

    4
  • Repos med Product Card

    6%
  • Senaste installerade version av Product Card

    3.3.4
  • Äldsta installerade version av Product Card

    3.3.4