docs: update card guidelines (#2499)

Resolves #573 --------- Co-authored-by: Tobias Barsnes <[email protected]>
digdir · Sep 26, 2024 · 2d9fe0e · 2d9fe0e
1 parent 221f379
commit 2d9fe0e
Showing 1 changed file with 12 additions and 19 deletions.
diff --git a/packages/react/src/components/Card/Card.mdx b/packages/react/src/components/Card/Card.mdx
@@ -5,7 +5,7 @@ import * as CardStories from './Card.stories';
 
 # Card
 
-Med `Card` kan vi fremheve informasjon eller oppgaver som hører sammen. Kortene finnes i flere varianter og kan inneholde overskrift, underoverskrift, et område for annen tekst og knapper og eller lenker
+Med `Card` kan vi fremheve informasjon eller oppgaver som hører sammen. Kortene finnes i flere varianter og kan inneholde tekst, bilde, tekstfelt, knapper og/eller lenker. 
 
 <br />
 <Primary />
@@ -22,9 +22,6 @@ import { Card } from '@digdir/designsystemet-react';
 </Card>;
 ```
 
-
-
-
 ## Eksempler
 
 `Card.Media`
@@ -38,11 +35,10 @@ Bruk`Card.Media` hvis du vi ha bilder eller video i kortene.
 <Canvas of={CardStories.Video} />
 
 ### Link Card
+`Card` kan brukes som navigasjonskort for å ta brukerne videre til en annen side i tjenesten. Hele kortet blir da en lenke, og kortet skal derfor ikke ha andre interaktive elementer, som for eksempel knapper.
 
-Bruk `as` til å endre kortet til en lenke. Vær oppmerksom på gyldig html
-[innhold](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#technical_summary)
-og innholdet, fordi skjermlesere leser opp alt samlet. Hover og aktivt styling
-blir kun aktivert dersom du har definert `href`. Dette er for å støtte "Link"
+Bruk `asChild` til å endre kortet til en lenke. Vær oppmerksom på [gyldig innhold](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#technical_summary), fordi skjermlesere leser opp alt samlet. `Hover` og `active` styling
+blir kun aktivert dersom du setter `isLink={true}`. 
 komponenter fra tredjeparts bibliotek som [NextJS
 Link](https://nextjs.org/docs/pages/api-reference/components/link) og [React
 Router Link](https://reactrouter.com/en/main/components/link)
@@ -63,26 +59,23 @@ Eksempler på hvordan andre komponenter kan brukes til å komponere sammen i et
 
 ## Retningslinjer for `Card`
 
-Vi bruker kort når vi vil trekke oppmerksomheten til brukeren mot en funksjon.
-Dersom kortet er en link med bilde, så skal **ikke** bildet være informativt, og `alt` attributtet skal være tomt.
+`Card` passer til å gruppere innhold eller funksjonalitet som du vil skille ut fra
+resten av innholdet.
 
+Dersom kortet er en link med bilde, så skal **ikke** bildet være informativt, og `alt` attributtet skal være tomt.
 
-Passer til å gruppere innhold eller funksjonalitet som du vil skille ut fra
-resten av innholdet.
+Et kort skal oppfattes som en selvstendig, avgrenset enhet. Innholdet i kortet skal være helhetlig og relatert til et enkelt emne eller en destinasjon.
 
+Kortet skal kunne stå alene uten å være avhengig av omkringliggende elementer for kontekst. Det skal gi tilstrekkelig informasjon til å forstå det presenterte innholdet uten eksterne referanser.
 
 
 ### Unngå
 
 - å bruke for mange kort på en side, det kan skape forvirring
 - å blande for mange forskjellige typer innhold i et enkelt kort
 
-## Tekst i komponenten{' '}
-
-Unngå lange tekster på kortene. Tenk nøye gjennom hva du trenger å si og skriv en kort og presis overskrift, underoverskrift og eventuell
-brødtekst.
-
-## Tilgjengelighet
+<br/>
 
-[Ikke funnet noe her]
+## Tekst i komponenten
 
+Unngå lange tekster på kortene. Tenk nøye gjennom hva du trenger å si og skriv en kort og presis overskrift, underoverskrift og eventuell brødtekst.