digdir · eirikbacker · Oct 1, 2024 · Sep 24, 2024 · Sep 24, 2024 · Sep 24, 2024
@@ -0,0 +1,9 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Card:
+- Allow `Card` with content placed directly inside
+- Replace `Card.Header`, `Card.Content` and `Card.Footer` with `Card.Block`
+- Replace `isLink` with anchor-in-heading + `click` handler for better accessibility
@@ -32,12 +32,10 @@ For at Team Altinn Studio skal nå sine mål om å skape et godt verktøy — m
 _"Det er viktig at det er mulig å utvide komponentene til det mer komplekse, fordi alle produkter skal løse et unikt behov i markedet, og ofte vil det forekomme situasjoner hvor mer spesialiserte komponenter er nødvendig. Hvis vi kan utvide eksisterende komponenter fra designsystemet, så vil vi kunne ivareta mye av tilgjengelighetskravene og visuell likhet med de grunnleggende komponentene uten å måtte legge inn for mye innsats."_
 
 <Card color='brand2'>
-  <CardContent>
-    David Øvrelid, Tech Lead i Altinn Studio, forklarer hvordan Altinn Studio
-    bruker Designsystemet. Artikkelen ble først publisert på Medium. [Les den
-    opprinnelige
-    artikkelen](https://davidovrelid.com/hvordan-vi-kan-ta-i-bruk-designsystemet-no-p%C3%A5-en-forusigbar-m%C3%A5te-3988980884a2)
-  </CardContent>
+  David Øvrelid, Tech Lead i Altinn Studio, forklarer hvordan Altinn Studio
+  bruker Designsystemet. Artikkelen ble først publisert på Medium. [Les den
+  opprinnelige
+  artikkelen](https://davidovrelid.com/hvordan-vi-kan-ta-i-bruk-designsystemet-no-p%C3%A5-en-forusigbar-m%C3%A5te-3988980884a2)
 </Card>
 <br />
 <br />

@@ -1,33 +1,19 @@
 .image {
-  margin: 0;
   aspect-ratio: 16/9;
 }
 
 @media screen and (min-width: 1024px) {
-  .card[data-featured='true'] .media {
-    padding-bottom: 0;
-  }
-
   .card[data-featured='true'] {
     display: grid;
     grid-template-columns: 1fr 1fr;
   }
 
-  .card[data-featured='true'] .wrapper {
+  .card[data-featured='true'] > :last-child {
     display: flex;
-    flex-wrap: wrap;
     flex-direction: column;
     justify-content: center;
     padding: var(--ds-spacing-8) var(--ds-spacing-10);
   }
-
-  .card[data-featured='true'] .heading {
-    padding-top: 0;
-  }
-
-  .card[data-featured='true'] .footer {
-    padding-bottom: 0;
-  }
 }
 
 .tag {

@@ -1,9 +1,6 @@
 import {
   Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardMedia,
+  CardBlock,
   Heading,
   Paragraph,
   Tag,
@@ -42,49 +39,38 @@ export const BlogCard = ({
 }: BlogCardProps) => {
   return (
     <Card
-      asChild
-      isLink
       data-featured={featured}
       className={cl(classes.card, className)}
       {...props}
     >
-      <Link href={href}>
-        <CardMedia className={classes.media}>
-          <img src={image} alt='' className={classes.image} />
-        </CardMedia>
-        <div className={classes.wrapper}>
-          <CardHeader className={classes.heading}>
-            {tagText && (
-              <Tag className={classes.tag} color={tagColor} size='sm'>
-                {tagText}
-              </Tag>
-            )}
-            <Heading level={level} size={featured ? 'lg' : 'sm'}>
-              {title}
-            </Heading>
-          </CardHeader>
-          <CardContent>
-            <Paragraph size={featured ? 'lg' : 'sm'}>{desc}</Paragraph>
-          </CardContent>
+      <CardBlock>
+        <img src={image} alt='' className={classes.image} />
+      </CardBlock>
+      <CardBlock>
+        {tagText && (
+          <Tag className={classes.tag} color={tagColor} size='sm'>
+            {tagText}
+          </Tag>
+        )}
+        <Heading level={level} size={featured ? 'lg' : 'sm'}>
+          <Link href={href}>{title}</Link>
+        </Heading>
+        <Paragraph size={featured ? 'lg' : 'sm'}>{desc}</Paragraph>
+        <Paragraph size={featured ? 'md' : 'xs'} className={classes.meta}>
           {author ||
             (date && (
-              <CardFooter className={classes.footer}>
-                <Paragraph
-                  size={featured ? 'md' : 'xs'}
-                  className={classes.meta}
-                >
-                  <span>{date}</span>
-                  {author && (
-                    <>
-                      <span aria-hidden className={classes.metaSquare} />
-                      <span>{author}</span>
-                    </>
-                  )}
-                </Paragraph>
-              </CardFooter>
+              <>
+                <span>{date}</span>
+                {author && (
+                  <>
+                    <span aria-hidden className={classes.metaSquare} />
+                    <span>{author}</span>
+                  </>
+                )}
+              </>
             ))}
-        </div>
-      </Link>
+        </Paragraph>
+      </CardBlock>
     </Card>
   );
 };

@@ -37,64 +37,60 @@ For å sikre god lesbarhet skal all tekst ha tilstrekkelig kontrast mot bakgrunn
 Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjenester. Web Content Accessibility Guidelines (WCAG) inneholder suksesskriterier og forslag til løsninger for å lykkes. Men det er ikke samsvar mellom dagens kontrastregler og kravet om at alle skal kunne se innholdet.
 
 <Card color='brand3'>
-  <CardContent>
-    <Heading
-      level={3}
-      size='xs'
-    >
-      Gjeldende regelverk, WCAG 2.1
-    </Heading>
-    <ListUnordered>
-      <ListItem>
-        **1.4.3 Kontrast (minimum) (Nivå AA)**: Kontrastforholdet mellom
-        teksten og bakgrunnen er minst 4,5:1. [1.4.3 Kontrast (minimum), WCAG
-        2.1
-        (w3.org)](https://www.w3.org/Translations/WCAG21-no/#contrast-minimum)
-      </ListItem>
-      <ListItem>
-        **1.4.11 Kontrast for ikke-tekstlig innhold (Nivå AA)**: Den visuelle
-        presentasjonen av det følgende har et kontrastforhold på minst 3:1 mot
-        farge(r) som ligger ved siden av. [1.4.11 Kontrast for ikke-tekstlig
-        innhold, WCAG 2.1
-        (w3.org)](https://www.w3.org/Translations/WCAG21-no/#non-text-contrast)
-      </ListItem>
-    </ListUnordered>
-  </CardContent>
+  <Heading
+    level={3}
+    size='xs'
+  >
+    Gjeldende regelverk, WCAG 2.1
+  </Heading>
+  <ListUnordered>
+    <ListItem>
+      **1.4.3 Kontrast (minimum) (Nivå AA)**: Kontrastforholdet mellom
+      teksten og bakgrunnen er minst 4,5:1. [1.4.3 Kontrast (minimum), WCAG
+      2.1
+      (w3.org)](https://www.w3.org/Translations/WCAG21-no/#contrast-minimum)
+    </ListItem>
+    <ListItem>
+      **1.4.11 Kontrast for ikke-tekstlig innhold (Nivå AA)**: Den visuelle
+      presentasjonen av det følgende har et kontrastforhold på minst 3:1 mot
+      farge(r) som ligger ved siden av. [1.4.11 Kontrast for ikke-tekstlig
+      innhold, WCAG 2.1
+      (w3.org)](https://www.w3.org/Translations/WCAG21-no/#non-text-contrast)
+    </ListItem>
+  </ListUnordered>
 </Card>
 
 <br />
 
 <Card color='brand2'>
-  <CardContent>
-    <Heading
-      level={3}
-      size='xs'
-    >
-      Fremtidig eller strengere:
-    </Heading>
-    <ListUnordered>
-      <ListItem>
-        **1.4.6 Kontrast** (forbedret) (Nivå AAA): Den visuelle presentasjonen
-        av tekst og bilder av tekst har et kontrastforhold på minst 7:1,
-        unntatt uvesentlig tekst og skriftstørrelser større enn 18px eller
-        14px fet. [ 1.4.6 Kontrast (forbedret), WCAG 2.1
-        (w3.org)](https://www.w3.org/Translations/WCAG21-no/#contrast-enhanced)
-      </ListItem>
-      <ListItem>
-        **WCAG 2.2: 2.4.13** Focus Appearance (Nivå AAA), om utseende til
-        fokusmarkering krever at fokusindikator har en kontrastverdi på 3:1
-        mellom samme piksler i fokusert og ikke-fokusert tilstand.
-        [Understanding Success Criterion 2.4.13: Focus Appearance | WAI |
-        W3C](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html)
-      </ListItem>
-      <ListItem>
-        **WCAG 3** har et krav om farge og kontrast, visuell kontrast i tekst
-        (sølv): Sørg for tilstrekkelig kontrast mellom tekst i forgrunnen og
-        bakgrunnen for teksten. Her brukes det en ny metode, med navn APCA,
-        for å regne ut kontrasten.
-      </ListItem>
-    </ListUnordered>
-  </CardContent>
+  <Heading
+    level={3}
+    size='xs'
+  >
+    Fremtidig eller strengere:
+  </Heading>
+  <ListUnordered>
+    <ListItem>
+      **1.4.6 Kontrast** (forbedret) (Nivå AAA): Den visuelle presentasjonen
+      av tekst og bilder av tekst har et kontrastforhold på minst 7:1,
+      unntatt uvesentlig tekst og skriftstørrelser større enn 18px eller
+      14px fet. [ 1.4.6 Kontrast (forbedret), WCAG 2.1
+      (w3.org)](https://www.w3.org/Translations/WCAG21-no/#contrast-enhanced)
+    </ListItem>
+    <ListItem>
+      **WCAG 2.2: 2.4.13** Focus Appearance (Nivå AAA), om utseende til
+      fokusmarkering krever at fokusindikator har en kontrastverdi på 3:1
+      mellom samme piksler i fokusert og ikke-fokusert tilstand.
+      [Understanding Success Criterion 2.4.13: Focus Appearance | WAI |
+      W3C](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html)
+    </ListItem>
+    <ListItem>
+      **WCAG 3** har et krav om farge og kontrast, visuell kontrast i tekst
+      (sølv): Sørg for tilstrekkelig kontrast mellom tekst i forgrunnen og
+      bakgrunnen for teksten. Her brukes det en ny metode, med navn APCA,
+      for å regne ut kontrasten.
+    </ListItem>
+  </ListUnordered>
 </Card>
 
 ## Mer presis metode
@@ -132,31 +128,27 @@ Vi vet at selv om en løsning oppfyller de konkrete kravene fra regelverket om u
 Hvis vi oppfyller metoden i WCAG 2, etterlever vi teknisk sett kravet til universell utforming, men det betyr ikke at innholdet er tilgjengelig eller universelt utformet. Derfor strekker vi oss langt i å også oppfylle de fremtidige WCAG-3 kravene som bruker APCA-metoden.
 
 <Card color='brand3'>
-  <CardContent>
-    **Kontrast i WCAG 2 «luminosity contrast algorithm** <br />
-    _«I WCAG 2 er kontrast en måleenhet for forskjellen i den opplevde lysintensiteten
-    mellom to farger. Denne forskjellen er beskrevet som et forhold fra 1:1 (for
-    eksempel hvit på hvit) til 21:1 (for eksempel svart på hvit).»_ – WebAIM, vår
-    oversettelse. Kontrastene regnes ut ved hjelp av fargenes RGB, HEX eller HSL
-    verdier i tillegg til transparens (alpha), om fargen er tekst, grafikk, forgrunn
-    eller bakgrunn har ingen betydning.
-  </CardContent>
+  **Kontrast i WCAG 2 «luminosity contrast algorithm** <br />
+  _«I WCAG 2 er kontrast en måleenhet for forskjellen i den opplevde lysintensiteten
+  mellom to farger. Denne forskjellen er beskrevet som et forhold fra 1:1 (for
+  eksempel hvit på hvit) til 21:1 (for eksempel svart på hvit).»_ – WebAIM, vår
+  oversettelse. Kontrastene regnes ut ved hjelp av fargenes RGB, HEX eller HSL
+  verdier i tillegg til transparens (alpha), om fargen er tekst, grafikk, forgrunn
+  eller bakgrunn har ingen betydning.
 </Card>
 
 <br />
 
 <Card color='brand2'>
-  <CardContent>
-    **Kontrast i WCAG 3 «visual contrast algorithm»** <br />I WCAG 3 benyttes en
-    visuell-kontrast algoritme som kalles for APCA, det er fremdeles
-    fargeverdiene som benyttes for å kalkulere kontrasten, men også om fargen er
-    tekst, grafikk, forgrunn eller bakgrunn, i tillegg har også valg av font,
-    font-vekt og størrelse en innvirkning på hvilke kontrastverdier som er
-    godkjent. Forskjellige farger som i WCAG 2 ville oppnådd like
-    kontrastverdier vil i APCA kunne få andre verdier fordi en i større grad
-    kalkulerer ut fra øyets evne til å oppfatte farger enn kun den tekniske
-    fargeverdien.
-  </CardContent>
+  **Kontrast i WCAG 3 «visual contrast algorithm»** <br />I WCAG 3 benyttes en
+  visuell-kontrast algoritme som kalles for APCA, det er fremdeles
+  fargeverdiene som benyttes for å kalkulere kontrasten, men også om fargen er
+  tekst, grafikk, forgrunn eller bakgrunn, i tillegg har også valg av font,
+  font-vekt og størrelse en innvirkning på hvilke kontrastverdier som er
+  godkjent. Forskjellige farger som i WCAG 2 ville oppnådd like
+  kontrastverdier vil i APCA kunne få andre verdier fordi en i større grad
+  kalkulerer ut fra øyets evne til å oppfatte farger enn kun den tekniske
+  fargeverdien.
 </Card>
 
 ## Verktøy for å teste kontrastverdier
@@ -188,11 +180,9 @@ I variant B er teksten svart, og bakgrunnen er farge #6D7879. Teksten er noe min
 <br />
 <br />
 <Card color='brand1'>
-  <CardContent>
-    **Bidra til artikkelen?** <br />
-    Vi vil gjerne ha dine innspill og tilbakemeldinger på artikkelen. Send oss en
-    e-post på: [email protected] eller [kontakt oss i Github](https://github.com/digdir/designsystemet/issues/new).
-  </CardContent>
+  **Bidra til artikkelen?** <br />
+  Vi vil gjerne ha dine innspill og tilbakemeldinger på artikkelen. Send oss en
+  e-post på: [email protected] eller [kontakt oss i Github](https://github.com/digdir/designsystemet/issues/new).
 </Card>
 
 <Contributors

@@ -155,10 +155,7 @@ Vi viser feilmeldingen under feltet med feil. Dette er det vanligste mønsteret,
 <Card
   color='brand1'
 >
-  <CardContent>
   Merk: Vi ønsker å holde oss oppdatert om andre anbefalinger om plassering, og har [pågående diskusjon om dette på Git](https://github.com/digdir/designsystemet/discussions/1684#discussioncomment-9339006).
-
-  </CardContent>
 </Card>
 
 ### Når skal vi vise en feilmelding?
@@ -244,12 +241,8 @@ Vi kan bruke disse aria-attributtene og rollene:
 - Vi setter `aria-invalid="true"` på felt med feil, for å si fra om at det er en feil der.
 - Vi bruker `aria-describedby` for å koble feilmelding til feltet.
 
-<Card
-  color='brand1'
->
-  <CardContent>
+<Card color='brand1'>
   Vi unngår inntill videre å bruke `aria-errormessage` da den ikke har full støtte av hjelpemidler per nå. Men vi kommer til å oppdatere retningslinjene om støtten blir bedre i fremtiden. [Se diskusjon på github](https://github.com/digdir/designsystemet/discussions/1684)
-  </CardContent>
 </Card>
 
 ### Gi automatiske beskjeder
@@ -274,12 +267,8 @@ For feilmeldinger som dukker opp dynamisk må vi bruke `aria-live` for at meldin
 <br />
 <br />
 
-<Card
-  color='brand3'
->
-  <CardContent>
-    Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg, Politiet, KS DIF og Oslo kommune. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/discussions/1684) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
-  </CardContent>
+<Card color='brand3'>
+  Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg, Politiet, KS DIF og Oslo kommune. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/discussions/1684) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
 </Card>
 
 <Contributors

@@ -90,7 +90,5 @@ En kombinasjon av obligatoriske og valgfrie felt er ikke ideellt! Men det vil v
 <Card
   color='brand3'
 >
-  <CardContent>
-    *Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg og Oslo Origo. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/issues/new) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
-  </CardContent>
+  *Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg og Oslo Origo. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/issues/new) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
 </Card>
@@ -18,12 +18,8 @@ export default ({ children }) => (
   />
 );
 
-<Card
-  color='brand3'
->
-  <CardContent>
-    *Retningslinjene er under arbeid fra 5. juni 2024 i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg, Politiet, KS DIF og Oslo kommune. Alle er velkommen til å påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/discussions/1801) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
-  </CardContent>
+<Card color='brand3'>
+  *Retningslinjene er under arbeid fra 5. juni 2024 i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg, Politiet, KS DIF og Oslo kommune. Alle er velkommen til å påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/discussions/1801) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
 </Card>
 
 Systemvarsler brukes for å varsle brukeren enten om feil i systemet eller holde dem informert om viktige ting de bør få med seg. Vi bruker dem til feil som ikke tilhører et skjemaelement, og som ikke validerer brukerens inndata. De bør derfor ha et annet utseende enn [brukerutløste feil](/monstre/feilmeldinger).