New component: Card

[mrosvik]

Related information and insight

• Material design
• W3C design system
• Card i Entur designsystem
• Card i Equinor design system
• Card i US Gov Design system

Card

The card component can be used when you need to present related information or collections of items. Each card can represent an individual item within the collection, allowing users to scan and interact with them independently. Cards provide a clear visual boundary around content, making it easier for users to perceive and comprehend the information presented.

Card specification

• The size of the card should be adaptable to different content sizes
• The card should support various types of content: ........
• Consider if the card should support brand-colors and custom alignment.
• We should consider options for truncation long text or expanding the content if it exceeds a certain length.

### Tasks
- [ ] https://github.com/digdir/designsystem/issues/572
- [ ] https://github.com/digdir/designsystem/issues/574
- [ ] https://github.com/digdir/designsystem/issues/1114
- [ ] https://github.com/digdir/designsystem/issues/631

[Camulos]

Et type kort som vi nok kan ha behov for i designsystemet er søkeresultatkort. Vi har slike som fungerer veldig bra i https://data.brreg.no/enhetsregisteret/oppslag/enheter , men der er de laget i Angular og det virker som om de hos oss som lager tjenester i React kan trenge en komponent for å hindre at det blir i dårligere kvalitet. Betyr nok at kortet burde vært definert i designsystem.

Komponenten i BR-figma: https://www.figma.com/file/TKoYr9GsXuRe3d5GsOs6w6/BR-Komponenter%3A-Kort?type=design&node-id=4%3A67&t=eWC02UfXNzmVKc8N-1

[mrosvik]

Takk for deling @Camulos ! 🙌 🤩

Noen kommentarer til komponenten i BR-figma:

• Det er veldig mange ulike varianter av card her. Det de har felles er kanskje kun skyggen?
• Card: Notification-card Blir det den samme som Alert-komponenten? 🤔
• Card: Info-box ligner mye på accordion-komponenten, kanskje den samme? 🤔

Vi bør nok se på et BaseCard som flere typer cards kan bygges oppå. Ser at flere designsystem har en NavigationCard-variant der hele kortet er klikkbart, og så gjerne en annen variant med statisk tekst/bilde + en eller flere klikkbare knapper i bunnen.

Eksempel på cards fra Digdir:

[Camulos]

@mrosvik Card: Notification-card blir samme som Alert. Card: Info-box kan nok på noe vis være liknende accordion, her er den slik den er i bruk:

[Camulos]

Er den mest grunnleggende varianten av kort da noe ala:

Card (skal som oftest være section, article e.l.) Header: overskrift og ikon Footer: metainfo, ekstra info (bør vel være mulig å velge å plassere til slutt i kortet, men semantikken krever ikke det) Content: en div eller noe som avgrenser hovedinnhold i kortet, kan bruke flexbox e.l. for å få til kolonner.

Støtte for bilde del av header eller som en div over header muligens? Header og Footer elementer forutsetter selvsagt at kortet er en type element som tillater det (feks section). Ellers må disse være noe annet.

[framitdavid]

Mange fine tanker og innspill her! 👏 🤩

Det stemmer det @Camulos sier om at ofte så ønsker man <article/> eller <section/> som semantisk element type for kortet, men ikke nødvendigvis alltid at man ønsker det. Felles Designsystem burde ikke låse kortet til å være enn av disse to elementene, men heller være mer fleksible. Her kan vi vurdere om denne komponenten er en kandidat for polymorphism component. Det betyr at vi kan fortelle komponenten hvilket element vi ønsker at Card skal rendre som native-element. Det kunne eksempelvis sett noe sånn her ut: <Card as="section"> eller <Card as="article"/> eller <Card as="div"/>. Dette vil kunne åpne for at andre enkelt kan bruke den riktige semantiske (eller ikke semantiske) elementet til sitt use-case.

Videre tenker jeg at vi må også finne ut hvordan vi skal eventuelt løse det med innholdskomponenter som heading og footer. Vi burde komme frem til en løsning som også er fleksibel som ikke begrenser komponenten mer enn nødvendig. Jeg mener at det er viktig at komponentene som vi lager i Felles Designsystem er åpne for utvidelse, med det mener jeg at det skal være lett for andre å lage sin egen interne CardComponent som bygger videre på den vi har i Felles Designsystem. Eksempelvis deg @Camulos, hvis du trenger noe mer enn basen vi kan tilby, så skal du enkelt kunne bygge videre på den vi har uten å måtte gjøre endringer hos oss internt i Felles Designsystem.

Jeg har troen på at vi i fellesskap skal kunne finne en god løsning på hvordan dette burde løses. Jeg skal ta en titt på andre biblioteker og se hvordan de har løst det. 👍

[hannekristin]

Vi i autorisasjon har behov for kort. En variant tar deg til en ny side, mens den andre åpner seg på siden man er på.

[Camulos]

(card as section, article, div) (image, tags, icons) (card-header as header, div) (image, title, sub-title, icon, expand-function) (/card-header) (card-footer (alt1) as footer, div) (card-meta date, author, tags, icon) (/card-footer) (card-content as div) (paragraphs, headers, links, columns, lists, CTA-button, buttons, links, icon, image) (/card-content) (card-footer (alt2) as footer, div) (card-meta date, author, tags, icon) (/card-footer) (image, tags icons, expand-function) (/card)

Mulighet for å

• rendre som section, article eller andre semantiske objekter
• rendre header og footer som header/footer når semantikken tillater det
• plassere footer rett etter header eller etter innhold
• tillate opp til flere kolonner inne i innholdsområdet for desktop-visning
• bilder i eller utenfor de semantiske elementene
• flere CTAer (feks 3 knapper eller flere lenker)
• ekspandere kortet for å vise mer innhold