@amsterdam/design-system-css 0.1.7 → 0.1.8

package/src/accordion/README.md

@@ -14,7 +14,7 @@ Het accordion component is een klikbare (verticaal gestapelde) lijst van koppen
 Je kunt door een accordion navigeren met je toetsenbord:
 
 | key                  | element                                                                                                                      |
-| -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| :------------------- | :--------------------------------------------------------------------------------------------------------------------------- |
 | Enter of Space       | Open of sluit de accordionsectie die de focus heeft                                                                          |
 | Tab                  | Ga naar het volgende element dat focus kan hebben                                                                            |
 | Shift + Tab          | Ga naar het volgende element dat focus kan hebben                                                                            |

package/src/accordion/accordion.scss

@@ -30,7 +30,7 @@
   padding-inline: 1rem;
   width: 100%;
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-accordion-button-wide-font-size);
   }
 

package/src/alert/alert.scss

@@ -34,7 +34,7 @@
   font-weight: var(--amsterdam-alert-title-font-weight);
   line-height: var(--amsterdam-alert-title-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-alert-title-wide-font-size);
   }
 

package/src/aspect-ratio/README.md

@@ -4,13 +4,14 @@ Aspect Ratio (in het Nederlands: beeldverhouding) koppelt de hoogte van een elem
 
 Om de vormgeving consistent te houden gebruiken we een vaste set verhoudingen (breedte:hoogte):
 
-| _keyword_    | verhouding |
-| ------------ | ---------- |
-| `extra-wide` | 16:9       |
-| `wide`       | 5:4        |
-| `square`     | 1:1        |
-| `tall`       | 4:5        |
-| `extra-tall` | 9:16       |
+| _keyword_ | verhouding |
+| :-------- | ---------: |
+| `2x-wide` |       32:9 |
+| `x-wide`  |       16:9 |
+| `wide`    |        5:4 |
+| `square`  |        1:1 |
+| `tall`    |        4:5 |
+| `x-tall`  |       9:16 |
 
 ## Richtlijnen
 

package/src/aspect-ratio/aspect-ratio.scss

@@ -8,8 +8,8 @@
   position: relative;
 }
 
-.amsterdam-aspect-ratio--extra-tall {
-  aspect-ratio: var(--amsterdam-aspect-ratio-extra-tall);
+.amsterdam-aspect-ratio--x-tall {
+  aspect-ratio: var(--amsterdam-aspect-ratio-x-tall);
 }
 
 .amsterdam-aspect-ratio--tall {
@@ -24,6 +24,10 @@
   aspect-ratio: var(--amsterdam-aspect-ratio-wide);
 }
 
-.amsterdam-aspect-ratio--extra-wide {
-  aspect-ratio: var(--amsterdam-aspect-ratio-extra-wide);
+.amsterdam-aspect-ratio--x-wide {
+  aspect-ratio: var(--amsterdam-aspect-ratio-x-wide);
+}
+
+.amsterdam-aspect-ratio--2x-wide {
+  aspect-ratio: var(--amsterdam-aspect-ratio-2x-wide);
 }

package/src/blockquote/blockquote.scss

@@ -29,7 +29,7 @@
     content: close-quote;
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-blockquote-wide-font-size);
   }
 

package/src/breadcrumb/breadcrumb.scss

@@ -15,9 +15,10 @@
 .amsterdam-breadcrumb {
   font-family: var(--amsterdam-breadcrumb-font-family, inherit);
   font-size: var(--amsterdam-breadcrumb-narrow-font-size);
+  font-weight: var(--amsterdam-breadcrumb-font-weight);
   line-height: var(--amsterdam-breadcrumb-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-breadcrumb-wide-font-size);
   }
 }
@@ -58,9 +59,7 @@
     text-transform: capitalize;
   }
 
-  &:focus,
-  &:hover,
-  &:active {
+  &:hover {
     color: var(--amsterdam-breadcrumb-item-link-hover-color);
     text-decoration: underline;
     text-decoration-thickness: 2px;

package/src/button/button.scss

@@ -13,7 +13,7 @@
 .amsterdam-button {
   font-size: var(--amsterdam-button-narrow-font-size);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-button-wide-font-size);
   }
 
@@ -33,16 +33,7 @@
   }
 }
 
-// Specificity hack to be able to style secondary button focus state
-// This isn't currently possible with the Utrecht component
-// We should really pull this component in our own repo...
-.amsterdam-button--secondary.amsterdam-button--secondary {
-  &:focus {
-    color: var(--amsterdam-button-secondary-focus-color);
-  }
-}
-
-.amsterdam-button--secondary:focus:not(:disabled, [aria-disabled="true"]) {
+.amsterdam-button--secondary:focus:not(:hover, [aria-disabled="true"]) {
   box-shadow: var(--amsterdam-button-secondary-focus-box-shadow);
 }
 
@@ -52,6 +43,6 @@
   }
 }
 
-.amsterdam-button--tertiary:focus:not(:disabled, [aria-disabled="true"]) {
-  box-shadow: var(--amsterdam-button-tertiary-focus-box-shadow);
+.amsterdam-button--tertiary:focus:not(:hover, [aria-disabled="true"]) {
+  box-shadow: none;
 }

package/src/card/README.md

@@ -0,0 +1,12 @@
+# Card
+
+Gebruik een card op een overzichtspagina om te verwijzen naar een detailpagina, zoals een nieuwsbericht, een vacature of een zoekresultaat. De card bevat meestal de titel, introductie en afbeelding van de content. De link is verplicht.
+
+## Schermlezers
+
+Met een schermlezer kun je onder andere navigeren via headings en links in een document. De titel van een card is een link in een heading, zodat je van beide navigatiemanieren gebruik kunt maken. Een schermlezer leest eerst de titel op, daarna de rest van de inhoud.
+
+## Richtlijnen
+
+- De titel van een card is een link in een heading. Hier gelden dezelfde richtlijnen voor als voor reguliere [links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs) en [headings](https://amsterdam.github.io/design-system/?path=/docs/react_text-heading--docs).
+- Een card heeft meer inhoud nodig dan alleen een titel. Vul dit aan met tekstuele en/of visuele inhoud. Als dit lastig is, kijk dan of een [top task link](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-top-task-link--docs) of [reguliere link](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs) beter past.

package/src/card/card.scss

@@ -0,0 +1,56 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-card {
+  display: grid;
+  gap: 0.5rem;
+  outline-offset: var(--amsterdam-card-outline-offset);
+  position: relative;
+  touch-action: manipulation;
+
+  /* Set native outline on card if card has focus visible within */
+  &:has(:focus-visible) {
+    outline-color: -webkit-focus-ring-color;
+    outline-style: auto;
+    outline-width: 1px;
+  }
+
+  /*
+    Remove link focus outline only if :has is supported,
+    which means the outline on the whole card is set
+  */
+  &:has(:focus-visible) a:focus {
+    outline: none;
+  }
+
+  /*
+    This trick, together with position: relative on the outer wrapper, makes the whole card clickable.
+    Taken from https://inclusive-components.design/cards/
+  */
+  a::after {
+    content: "";
+    display: block;
+    inset: 0;
+    position: absolute;
+  }
+}
+
+.amsterdam-card__heading-group {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+}
+
+.amsterdam-card__link {
+  color: var(--amsterdam-card-link-color);
+  text-decoration: none;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+
+  &:hover {
+    color: var(--amsterdam-card-link-hover-color);
+    text-decoration: underline;
+  }
+}

package/src/checkbox/README.md

@@ -24,4 +24,4 @@ Een label:
 
 - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): het is zowel voor een gebruiker als programmatisch duidelijk wat het doel van een formulierveld is.
 
-<!-- TODO: Checkbox is an interactive element, reference the general interactive elements docs when they're merged -->
+Checkbox is een interactief element, hier gelden [de algemene eisen en richtlijnen voor interactieve elementen](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) voor.

package/src/checkbox/checkbox.scss

@@ -34,7 +34,7 @@
     width: 100%;
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-checkbox-checkmark-wide-size) * var(--amsterdam-checkbox-checkmark-multiplier));
   }
 }
@@ -65,7 +65,7 @@
     }
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-checkbox-wide-font-size);
   }
 

package/src/footer/footer.scss

@@ -7,23 +7,4 @@
 
 .amsterdam-footer__top {
   background-color: var(--amsterdam-footer-top-background-color);
-  padding-block: 2.5rem;
-  padding-inline: 2rem; /* TODO: For now I've set a padding here, this should eventually be handled by PageGrid */
-}
-
-@media screen and (width > $amsterdam-breakpoint) {
-  .amsterdam-footer__top {
-    grid-template-columns: repeat(var(--amsterdam-page-grid-column-count-wide), 1fr);
-  }
-}
-
-.amsterdam-footer__column {
-  display: flex;
-  flex-direction: column;
-  gap: 2.5rem;
-}
-
-.amsterdam-footer__bottom {
-  padding-block: 0.5rem;
-  padding-inline: 2rem; /* TODO: For now I've set a padding here, this should eventually be handled by PageGrid */
 }

package/src/form-label/form-label.scss

@@ -16,7 +16,7 @@
   font-weight: var(--amsterdam-form-label-font-weight);
   line-height: var(--amsterdam-form-label-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-form-label-wide-font-size);
   }
 

package/src/grid/README.grid-cell.md

@@ -0,0 +1,14 @@
+# Grid cell
+
+Beslaat een aantal kolommen in een [Grid](?path=/docs/react_layout-grid--docs).
+
+## Gebruik
+
+Verdeel hiermee een grid in cellen.
+Geef aan hoeveel kolommen van het grid de cel beslaat.
+Dat aantal kan variëren voor smalle, middelbrede of brede schermen.
+In elke cel plaats je vervolgens de gewenste inhoud.
+
+## Ontwerp
+
+De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

package/src/grid/README.grid.md

@@ -0,0 +1,17 @@
+# Grid
+
+Levert een tweedimensionaal raster waarop alle elementen van een pagina uitgelijnd worden.
+
+## Gebruik
+
+Elke pagina moet het grid gebruiken als basis voor de layout, dus direct binnen [Screen](?path=/docs/layout-screen--docs).
+
+Een [Footer](?path=/docs/react_containers-footer--docs) en een [Highlight](?path=/docs/react_containers-highlight--docs) zijn iets breder dan het grid.
+Daarom wordt in HTML vóór deze componenten een instantie van Grid afgesloten en erbinnen een nieuwe geopend.
+
+Meerdere instanties van dit component zijn dus mogelijk op een pagina.
+Visueel moeten ze wel allemaal op elkaar aansluiten.
+
+## Ontwerp
+
+De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

package/src/grid/grid-cell.scss

@@ -5,14 +5,42 @@
 
 @import "../../utils/breakpoint";
 
-@media screen and (width > $amsterdam-breakpoint) {
+.amsterdam-grid-cell--full-width {
+  grid-column: 1 / -1;
+}
+
+// The order of the following declaration blocks ensures the intended specificity.
+
+@for $i from 1 through 12 {
+  .amsterdam-grid-cell--span-#{$i} {
+    grid-column-end: span $i;
+  }
+
+  .amsterdam-grid-cell--start-#{$i} {
+    grid-column-start: $i;
+  }
+}
+
+@media screen and (min-width: $amsterdam-breakpoint-medium) {
   @for $i from 1 through 12 {
-    .amsterdam-grid-column-start-#{$i} {
+    .amsterdam-grid-cell--span-#{$i}-medium {
+      grid-column-end: span $i;
+    }
+
+    .amsterdam-grid-cell--start-#{$i}-medium {
       grid-column-start: $i;
     }
+  }
+}
 
-    .amsterdam-grid-column-span-#{$i} {
+@media screen and (min-width: $amsterdam-breakpoint-wide) {
+  @for $i from 1 through 12 {
+    .amsterdam-grid-cell--span-#{$i}-wide {
       grid-column-end: span $i;
     }
+
+    .amsterdam-grid-cell--start-#{$i}-wide {
+      grid-column-start: $i;
+    }
   }
 }

package/src/grid/grid.scss

@@ -0,0 +1,65 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-grid {
+  --amsterdam-grid-gap: var(--amsterdam-grid-density-low-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-low-padding-inline);
+
+  display: grid;
+  gap: var(--amsterdam-grid-gap);
+  grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
+  padding-inline: var(--amsterdam-grid-padding-inline);
+
+  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+    grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
+  }
+
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+    grid-template-columns: repeat(var(--amsterdam-grid-wide-column-count), 1fr);
+  }
+}
+
+.amsterdam-grid--density-high {
+  --amsterdam-grid-gap: var(--amsterdam-grid-density-high-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-high-padding-inline);
+}
+
+.amsterdam-grid--padding-bottom--small {
+  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--padding-bottom--medium {
+  padding-block-end: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-grid--padding-bottom--large {
+  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
+}
+
+.amsterdam-grid--padding-top--small {
+  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--padding-top--medium {
+  padding-block-start: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-grid--padding-top--large {
+  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
+}
+
+.amsterdam-grid--padding-vertical--small {
+  padding-block: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--padding-vertical--medium {
+  padding-block: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-grid--padding-vertical--large {
+  padding-block: calc(var(--amsterdam-grid-gap) * 2);
+}

package/src/heading/heading.scss

@@ -25,7 +25,7 @@
   font-size: var(--amsterdam-heading-1-narrow-font-size);
   line-height: var(--amsterdam-heading-1-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-1-wide-font-size);
   }
 }
@@ -34,7 +34,7 @@
   font-size: var(--amsterdam-heading-2-narrow-font-size);
   line-height: var(--amsterdam-heading-2-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-2-wide-font-size);
   }
 }
@@ -43,7 +43,7 @@
   font-size: var(--amsterdam-heading-3-narrow-font-size);
   line-height: var(--amsterdam-heading-3-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-3-wide-font-size);
   }
 }
@@ -52,7 +52,7 @@
   font-size: var(--amsterdam-heading-4-narrow-font-size);
   line-height: var(--amsterdam-heading-4-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-4-wide-font-size);
   }
 }

package/src/highlight/README.md

@@ -0,0 +1,15 @@
+# Highlight
+
+Benadrukt een sectie op een pagina middels een opvallende achtergrondkleur.
+
+## Richtlijnen
+
+Raadpleeg [dit overzicht op Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) om na te gaan of je zwarte of witte tekst kunt gebruiken op de achtergrondkleur van je keuze.
+
+## Relevante WCAG eisen
+
+- [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
+
+## Referenties
+
+- [Color and contrast accessibility](https://web.dev/articles/color-and-contrast-accessibility)

package/src/highlight/highlight.scss

@@ -0,0 +1,36 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-highlight--blue {
+  background-color: var(--amsterdam-highlight-blue-background-color);
+}
+
+.amsterdam-highlight--dark-green {
+  background-color: var(--amsterdam-highlight-dark-green-background-color);
+}
+
+.amsterdam-highlight--green {
+  background-color: var(--amsterdam-highlight-green-background-color);
+}
+
+.amsterdam-highlight--light-blue {
+  background-color: var(--amsterdam-highlight-light-blue-background-color);
+}
+
+.amsterdam-highlight--magenta {
+  background-color: var(--amsterdam-highlight-magenta-background-color);
+}
+
+.amsterdam-highlight--orange {
+  background-color: var(--amsterdam-highlight-orange-background-color);
+}
+
+.amsterdam-highlight--purple {
+  background-color: var(--amsterdam-highlight-purple-background-color);
+}
+
+.amsterdam-highlight--yellow {
+  background-color: var(--amsterdam-highlight-yellow-background-color);
+}

package/src/icon/icon.scss

@@ -17,7 +17,7 @@
 .amsterdam-icon--size-3 {
   height: calc(var(--amsterdam-icon-size-3-icon-size-narrow) * var(--amsterdam-icon-size-3-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-3-icon-size-wide) * var(--amsterdam-icon-size-3-container-multiplier));
   }
 }
@@ -26,7 +26,7 @@
   height: var(--amsterdam-icon-size-3-icon-size-narrow);
   width: var(--amsterdam-icon-size-3-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-3-icon-size-wide);
     width: var(--amsterdam-icon-size-3-icon-size-wide);
   }
@@ -34,7 +34,7 @@
 .amsterdam-icon--size-4 {
   height: calc(var(--amsterdam-icon-size-4-icon-size-narrow) * var(--amsterdam-icon-size-4-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-4-icon-size-wide) * var(--amsterdam-icon-size-4-container-multiplier));
   }
 }
@@ -43,7 +43,7 @@
   height: var(--amsterdam-icon-size-4-icon-size-narrow);
   width: var(--amsterdam-icon-size-4-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-4-icon-size-wide);
     width: var(--amsterdam-icon-size-4-icon-size-wide);
   }
@@ -52,7 +52,7 @@
 .amsterdam-icon--size-5 {
   height: calc(var(--amsterdam-icon-size-5-icon-size-narrow) * var(--amsterdam-icon-size-5-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-5-icon-size-wide) * var(--amsterdam-icon-size-5-container-multiplier));
   }
 }
@@ -61,7 +61,7 @@
   height: var(--amsterdam-icon-size-5-icon-size-narrow);
   width: var(--amsterdam-icon-size-5-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-5-icon-size-wide);
     width: var(--amsterdam-icon-size-5-icon-size-wide);
   }
@@ -70,7 +70,7 @@
 .amsterdam-icon--size-6 {
   height: calc(var(--amsterdam-icon-size-6-icon-size-narrow) * var(--amsterdam-icon-size-6-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-6-icon-size-wide) * var(--amsterdam-icon-size-6-container-multiplier));
   }
 }
@@ -79,7 +79,7 @@
   height: var(--amsterdam-icon-size-6-icon-size-narrow);
   width: var(--amsterdam-icon-size-6-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-6-icon-size-wide);
     width: var(--amsterdam-icon-size-6-icon-size-wide);
   }
@@ -88,7 +88,7 @@
 .amsterdam-icon--size-7 {
   height: calc(var(--amsterdam-icon-size-7-icon-size-narrow) * var(--amsterdam-icon-size-7-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-7-icon-size-wide) * var(--amsterdam-icon-size-7-container-multiplier));
   }
 }
@@ -97,7 +97,7 @@
   height: var(--amsterdam-icon-size-7-icon-size-narrow);
   width: var(--amsterdam-icon-size-7-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-7-icon-size-wide);
     width: var(--amsterdam-icon-size-7-icon-size-wide);
   }

package/src/image/README.md

@@ -0,0 +1,18 @@
+# Image
+
+Toont een afbeelding.
+
+## Richtlijnen
+
+- Vergeet niet om een beschrijving van de afbeelding op te nemen in het `alt`-attribuut.
+  Dit zorgt ervoor dat gebruikers van schermlezers deze informatie ook tot zich kunnen nemen.
+  Daarnaast kan het helpen bij zoekmachineoptimalisatie.
+- Alleen voor decoratieve afbeeldingen is zo’n beschrijving niet nodig. Gebruik in dit geval `alt=""`.
+  Denk aan afbeeldingen die weinig toevoegen aan de nabije tekst of afbeeldingen die louter bijdragen aan het ontwerp of de sfeer van de pagina (bron: [W3C Web Accessibility Initiative](https://www.w3.org/WAI/tutorials/images/decorative/)).
+- Zorg ervoor dat de afbeelding een beeldverhouding heeft die ondersteund wordt door het [Aspect Ratio](?path=/docs/layout-aspect-ratio--docs) component.
+
+## Relevante WCAG-eisen
+
+- [WCAG 1.1.1](https://www.w3.org/TR/WCAG22/#non-text-content): niet-tekstuele content heeft een tekstueel alternatief
+- [WCAG 1.4.5](https://www.w3.org/TR/WCAG22/#images-of-text): gebruik tekst in plaats van afbeeldingen van tekst
+- [WCAG 1.4.9](https://www.w3.org/TR/WCAG22/#images-of-text-no-exception): gebruik afbeeldingen van tekst alleen als er geen alternatief is

package/src/image/image.scss

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-image {
+  font-style: italic; /* [3] */
+  height: auto; /* [1] */
+  max-width: 100%; /* [1] */
+  vertical-align: middle; /* [2] */
+}
+
+// [1] Allow for fluid image sizing while maintaining aspect ratio governed by width/height attributes
+// [2] Remove ‘phantom’ whitespace
+// [3] Italicise alt text to visually offset it from surrounding copy
+// Source: https://x.com/csswizardry/status/1717841334462005661