@amsterdam/design-system-css 0.3.0 → 0.5.0

package/src/components/header/header.scss

@@ -75,9 +75,9 @@
   border: 0;
   color: var(--amsterdam-page-menu-item-color);
   font-family: var(--amsterdam-page-menu-item-font-family);
-  font-size: var(--amsterdam-page-menu-item-spacious-font-size);
+  font-size: var(--amsterdam-page-menu-item-font-size);
   font-weight: var(--amsterdam-page-menu-item-font-weight);
-  line-height: var(--amsterdam-page-menu-item-spacious-line-height);
+  line-height: var(--amsterdam-page-menu-item-line-height);
   margin-block: 0;
   padding-inline: 0 30px;
   text-align: center;

package/src/components/heading/README.md

@@ -1,22 +1,25 @@
 # Heading
 
-Een heading zegt iets over de onderstaande content. Met behulp van headings kan de gebruiker snel een overzicht krijgen van de structuur van de webpagina.
+A heading conveys information about the content below it.
+Use headings to allow the user to grasp the structure of the page quickly.
 
-## Richtlijnen
+## Guidelines
 
-- Een heading omschrijft de content eronder.
-- Gebruik een heading niet voor opmaak en styling, maar om de structuur van de pagina weer te geven.
-- Gebruik headings hierarchisch en sla geen heading niveaus over. Dus na een `h1` volgt een `h2` en dus niet een `h3`.
+- A heading describes the content beneath it.
+- Do not use a heading for formatting and styling. Use it to represent the page’s structure.
+- Use headings hierarchically, and do not skip heading levels.
+  So, an `h1` heading should be followed by an `h2`, not an `h3`.
 
-## Relevante WCAG eisen
+## Relevant WCAG Requirements
 
 - [WCAG 1.3.1](https://www.w3.org/WAI/WCAG21/quickref/#qr-content-structure-separation-programmatic):
-  Tekst die er uit ziet als een heading wordt ook door een computer herkend als een heading. Door gebruik te maken van het juiste heading niveau is voor alle gebruikers duidelijk hoe de pagina is gestructeerd.
-- [WCAG 2.4.1](https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-skip): Headings kunnen gebruikt worden om naar een volgende sectie te navigeren met het toetsenbord
-- [WCAG 2.4.6](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels): Beschrijf met headings het doel of het onderwerp van de onderliggende content
-- [WCAG 2.4.10](https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-headings): Gebruik headings om de content te structureren
+  Text that looks like a heading is also recognized as a heading by a computer.
+  Using the correct heading level makes the page structure clear for all users.
+- [WCAG 2.4.1](https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-skip): Headings can be used to navigate to the next section with the keyboard.
+- [WCAG 2.4.6](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels): Use headings to describe the purpose or subject of the underlying content.
+- [WCAG 2.4.10](https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-headings): Use headings to structure the content.
 
-## Referenties
+## References
 
 - [W3C - Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/)
 - [W3C - Headings & labels](https://www.w3.org/TR/WCAG21/#headings-and-labels)

package/src/components/heading/heading.scss

@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -16,67 +18,38 @@
   font-family: var(--amsterdam-heading-font-family);
   font-weight: var(--amsterdam-heading-font-weight);
 
+  @include hyphenation;
   @include reset;
 }
 
 .amsterdam-heading--1 {
-  font-size: var(--amsterdam-heading-spacious-level-1-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-1-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-1-font-size);
-    line-height: var(--amsterdam-heading-compact-level-1-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-1-font-size);
+  line-height: var(--amsterdam-heading-level-1-line-height);
 }
 
 .amsterdam-heading--2 {
-  font-size: var(--amsterdam-heading-spacious-level-2-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-2-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-2-font-size);
-    line-height: var(--amsterdam-heading-compact-level-2-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-2-font-size);
+  line-height: var(--amsterdam-heading-level-2-line-height);
 }
 
 .amsterdam-heading--3 {
-  font-size: var(--amsterdam-heading-spacious-level-3-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-3-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-3-font-size);
-    line-height: var(--amsterdam-heading-compact-level-3-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-3-font-size);
+  line-height: var(--amsterdam-heading-level-3-line-height);
 }
 
 .amsterdam-heading--4 {
-  font-size: var(--amsterdam-heading-spacious-level-4-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-4-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-4-font-size);
-    line-height: var(--amsterdam-heading-compact-level-4-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-4-font-size);
+  line-height: var(--amsterdam-heading-level-4-line-height);
 }
 
 .amsterdam-heading--5 {
-  font-size: var(--amsterdam-heading-spacious-level-5-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-5-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-5-font-size);
-    line-height: var(--amsterdam-heading-compact-level-5-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-5-font-size);
+  line-height: var(--amsterdam-heading-level-5-line-height);
 }
 
 .amsterdam-heading--6 {
-  font-size: var(--amsterdam-heading-spacious-level-6-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-6-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-6-font-size);
-    line-height: var(--amsterdam-heading-compact-level-6-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-6-font-size);
+  line-height: var(--amsterdam-heading-level-6-line-height);
 }
 
 .amsterdam-heading--inverse-color {

package/src/components/icon/README.md

@@ -1,19 +1,29 @@
 # Icon
 
-Iconen zijn visuele symbolen die worden gebruikt om ideeën, thema’s of acties weer te geven. Ze communiceren in één oogopslag de boodschap en vestigen de aandacht op belangrijke (interactieve) informatie. Gebruik altijd een `Icon` component om een SVG icoon heen voor de juiste vormgeving en maatvoering.
+Icons are visual symbols used to represent ideas, themes, or actions.
+They communicate the message at a glance and draw attention to important (interactive) information.
+Always use an `Icon` component to encapsulate an SVG icon for proper styling and sizing.
 
-## Interactieve elementen
+## Interactive Elements
 
-Ter ondersteuning van tekstuele interactie-elementen, zoals knoppen en links, kunnen iconen gebruikt worden. Probeer altijd een icoon te voorzien van begeleidende tekst. Iconen zonder begeleidende tekst mogen alleen gebruikt worden als ze aan internationale standaarden voldoen, zoals menu (hamburger icoon), zoek (vergrootglas), volgende, vorige, play, pauze, enz.
+Use an icon to support textual interactive elements like buttons and links.
+Always try to provide accompanying text for an icon.
+Only use icons without accompanying text if they adhere to international standards, such as menu (hamburger icon), search (magnifying glass), next, previous, play, pause, etc.
 
-## Kleur
+## Color
 
-Iconen zijn zwart of wit. Bij interactie zijn ze donkerblauw. Uitgeschakeld zijn ze grijs. En ze moeten voldoen aan dezelfde contrastverhouding voor toegankelijkheid als typografie bij een achtergrondkleur. Het icoon neemt standaard de kleur van de _container_ waar deze in zit over.
+Icons are black or white.
+When used as part of an interactive element, they are dark blue.
+When disabled, they are grey.
+They must adhere to the same contrast ratio for accessibility as typography against a background colour.
+The icon defaults to the colour of the container it is in.
 
-## Uitlijning
+## Alignment
 
-Iconen staan standaard links van de tekst en zijn verticaal in het midden van de eerste regel tekst uitgelijnd.
+Icons are aligned to the left of the text by default and vertically centred to the middle of the first line of text.
 
-## Grootte
+## Size
 
-De iconen gebruiken dezelfde tekstniveaus als alle typografische componenten om hun grootte te bepalen. Hierdoor zijn icoon en tekst makkelijk op elkaar af te stemmen. [Bekijk de documentatie over typografie voor meer informatie](/docs/docs-designrichtlijnen-typografie--docs#tekstniveaus).
+Icons use the same text levels as all typographic components to determine their size.
+This ensures easy alignment between icons and text.
+[Refer to the typography documentation for more information](/docs/docs-designrichtlijnen-typografie--docs#tekstniveaus).

package/src/components/icon/icon.scss

@@ -12,76 +12,43 @@
   fill: currentColor;
 }
 
+.amsterdam-icon--square {
+  aspect-ratio: 1 / 1;
+  justify-content: center;
+}
+
 .amsterdam-icon--size-3 {
-  height: calc(var(--amsterdam-icon-spacious-size-3-font-size) * var(--amsterdam-icon-spacious-size-3-line-height));
+  height: calc(var(--amsterdam-icon-size-3-font-size) * var(--amsterdam-icon-size-3-line-height));
 }
 
 .amsterdam-icon--size-3 svg {
-  height: var(--amsterdam-icon-spacious-size-3-font-size);
-  width: var(--amsterdam-icon-spacious-size-3-font-size);
+  height: var(--amsterdam-icon-size-3-font-size);
+  width: var(--amsterdam-icon-size-3-font-size);
 }
 
 .amsterdam-icon--size-4 {
-  height: calc(var(--amsterdam-icon-spacious-size-4-font-size) * var(--amsterdam-icon-spacious-size-4-line-height));
+  height: calc(var(--amsterdam-icon-size-4-font-size) * var(--amsterdam-icon-size-4-line-height));
 }
 
 .amsterdam-icon--size-4 svg {
-  height: var(--amsterdam-icon-spacious-size-4-font-size);
-  width: var(--amsterdam-icon-spacious-size-4-font-size);
+  height: var(--amsterdam-icon-size-4-font-size);
+  width: var(--amsterdam-icon-size-4-font-size);
 }
 
 .amsterdam-icon--size-5 {
-  height: calc(var(--amsterdam-icon-spacious-size-5-font-size) * var(--amsterdam-icon-spacious-size-5-line-height));
+  height: calc(var(--amsterdam-icon-size-5-font-size) * var(--amsterdam-icon-size-5-line-height));
 }
 
 .amsterdam-icon--size-5 svg {
-  height: var(--amsterdam-icon-spacious-size-5-font-size);
-  width: var(--amsterdam-icon-spacious-size-5-font-size);
+  height: var(--amsterdam-icon-size-5-font-size);
+  width: var(--amsterdam-icon-size-5-font-size);
 }
 
 .amsterdam-icon--size-6 {
-  height: calc(var(--amsterdam-icon-spacious-size-6-font-size) * var(--amsterdam-icon-spacious-size-6-line-height));
+  height: calc(var(--amsterdam-icon-size-6-font-size) * var(--amsterdam-icon-size-6-line-height));
 }
 
 .amsterdam-icon--size-6 svg {
-  height: var(--amsterdam-icon-spacious-size-6-font-size);
-  width: var(--amsterdam-icon-spacious-size-6-font-size);
-}
-
-.amsterdam-theme--compact {
-  .amsterdam-icon--size-3 {
-    height: calc(var(--amsterdam-icon-compact-size-3-font-size) * var(--amsterdam-icon-compact-size-3-line-height));
-  }
-
-  .amsterdam-icon--size-3 svg {
-    height: var(--amsterdam-icon-compact-size-3-font-size);
-    width: var(--amsterdam-icon-compact-size-3-font-size);
-  }
-
-  .amsterdam-icon--size-4 {
-    height: calc(var(--amsterdam-icon-compact-size-4-font-size) * var(--amsterdam-icon-compact-size-4-line-height));
-  }
-
-  .amsterdam-icon--size-4 svg {
-    height: var(--amsterdam-icon-compact-size-4-font-size);
-    width: var(--amsterdam-icon-compact-size-4-font-size);
-  }
-
-  .amsterdam-icon--size-5 {
-    height: calc(var(--amsterdam-icon-compact-size-5-font-size) * var(--amsterdam-icon-compact-size-5-line-height));
-  }
-
-  .amsterdam-icon--size-5 svg {
-    height: var(--amsterdam-icon-compact-size-5-font-size);
-    width: var(--amsterdam-icon-compact-size-5-font-size);
-  }
-
-  .amsterdam-icon--size-6 {
-    height: calc(var(--amsterdam-icon-compact-size-6-font-size) * var(--amsterdam-icon-compact-size-6-line-height));
-  }
-
-  .amsterdam-icon--size-6 svg {
-    height: var(--amsterdam-icon-compact-size-6-font-size);
-    width: var(--amsterdam-icon-compact-size-6-font-size);
-  }
+  height: var(--amsterdam-icon-size-6-font-size);
+  width: var(--amsterdam-icon-size-6-font-size);
 }

package/src/components/icon-button/README.md

@@ -0,0 +1,14 @@
+# Icon Button
+
+A button containing only an icon.
+
+## Guidelines
+
+- Use this button only if the icon is entirely clear and understandable.
+  Many icons are interpreted differently by different users.
+  Only use universally recognized icons, such as a close icon or a play icon.
+- Provide a label text that describes what the button does for screen reader users.
+
+## Relevant WCAG Requirements
+
+The Icon Button follows [the same requirements and guidelines as a regular button](https://amsterdam.github.io/design-system/?path=/docs/react_buttons-button--docs).

package/src/components/icon-button/icon-button.scss

@@ -0,0 +1,60 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@mixin reset {
+  border: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.amsterdam-icon-button {
+  background-color: transparent;
+  color: var(--amsterdam-icon-button-color);
+  cursor: pointer;
+  outline-offset: var(--amsterdam-icon-button-outline-offset);
+  touch-action: manipulation;
+
+  &:hover {
+    background-color: var(--amsterdam-icon-button-hover-background-color);
+    color: var(--amsterdam-icon-button-hover-color);
+  }
+
+  &:disabled {
+    background-color: transparent;
+    color: var(--amsterdam-icon-button-disabled-color);
+    cursor: not-allowed;
+  }
+
+  @include reset;
+}
+
+.amsterdam-icon-button--on-background-light {
+  color: var(--amsterdam-icon-button-on-background-light-color);
+
+  &:hover {
+    background-color: var(--amsterdam-icon-button-on-background-light-hover-background-color);
+    color: var(--amsterdam-icon-button-on-background-light-hover-color);
+  }
+
+  &:disabled {
+    background-color: transparent;
+    color: var(--amsterdam-icon-button-on-background-light-disabled-color);
+  }
+}
+
+.amsterdam-icon-button--on-background-dark {
+  background-color: var(--amsterdam-icon-button-on-background-dark-background-color);
+  color: var(--amsterdam-icon-button-on-background-dark-color);
+
+  &:hover {
+    background-color: var(--amsterdam-icon-button-on-background-dark-hover-background-color);
+    color: var(--amsterdam-icon-button-on-background-dark-hover-color);
+  }
+
+  &:disabled {
+    background-color: var(--amsterdam-icon-button-on-background-dark-disabled-background-color);
+    color: var(--amsterdam-icon-button-on-background-dark-disabled-color);
+  }
+}

package/src/components/image/README.md

@@ -1,23 +1,22 @@
 # Image
 
-Toont een afbeelding.
+Displays an image.
 
-## Richtlijnen
+## Guidelines
 
-- 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/)).
-- Specificeer eventueel meerdere kandidaten voor de afbeelding via het `srcSet`-attribuut.
-  Bijvoorbeeld een kleine, middelgrote en grote variant voor de diverse schermformaten.
-  Zo voorkom je het onnodige downloaden van grote bestanden.
-  Doe dit vooral voor de hoofdafbeelding van een pagina,
-  daar is het verschil tussen de formaten op een smal en breed scherm het grootst.
-- Zorg ervoor dat de afbeelding een beeldverhouding heeft die ondersteund wordt door het [Aspect Ratio](?path=/docs/layout-aspect-ratio--docs) component.
+- Do not forget to include a description of the image in the `alt` attribute.
+  This ensures that screen reader users can also access this information.
+  Additionally, it can aid in search engine optimization.
+- A description is unnecessary for decorative images; use `alt=""` for these.
+  Examples are images that add little to the nearby text or pictures that purely contribute to the design or atmosphere of the page (source: [W3C Web Accessibility Initiative](https://www.w3.org/WAI/tutorials/images/decorative/)).
+- Optionally specify multiple candidates for the image through the `srcSet` attribute.
+  For example, provide small, medium, and large variants for various screen sizes.
+  This prevents unnecessary downloading of large files.
+  Do this especially for the main image of a page, where the difference between sizes on a narrow and wide screen is most significant.
+- Ensure that the aspect ratio of the image is supported by the [Aspect Ratio](?path=/docs/layout-aspect-ratio--docs) component.
 
-## Relevante WCAG-eisen
+## Relevant WCAG Requirements
 
-- [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
+- [WCAG 1.1.1](https://www.w3.org/TR/WCAG22/#non-text-content): Non-text content must have a text alternative.
+- [WCAG 1.4.5](https://www.w3.org/TR/WCAG22/#images-of-text): Use text instead of images of text.
+- [WCAG 1.4.9](https://www.w3.org/TR/WCAG22/#images-of-text-no-exception): Use images of text only when there is no alternative.

package/src/components/index.scss

@@ -4,6 +4,11 @@
  */
 
 /* Append here */
+@import "./link-list/link-list";
+@import "./badge/badge";
+@import "./table/table";
+@import "./mega-menu/mega-menu";
+@import "./icon-button/icon-button";
 @import "./skip-link/skip-link";
 @import "./overlap/overlap";
 @import "./header/header";

package/src/components/link/README.md

@@ -1,42 +1,44 @@
 # Link
 
-Een link (in het Nederlands: koppeling) wordt gebruikt als navigatie-element en kan op zichzelf of inline met tekst worden gebruikt. Het is de lichtgewicht variant voor navigatie.
+A link is a navigation element and can be used independently or inline with text.
+It is the lightweight variant for navigation.
 
-## Richtlijnen
+## Guidelines
 
-Gebruik een link in de volgende gevallen:
+Use a link in the following cases:
 
-- Navigatie naar een andere pagina binnen de website of applicatie
-- Navigatie naar een andere website (zie [Externe links](#externe-links))
-- Navigatie naar een element op dezelfde pagina
-- Koppeling naar e-mails of telefoonnummers (begin de link met `mailto:` of `tel:`)
+- To navigate to another page within the website or application
+- To navigate to another website (see [External links](#external-links))
+- To navigate to an element on the same page
+- To link to emails or phone numbers (start the link with `mailto:` or `tel:`)
 
-Een link is een navigatie component. Gebruik een knop in plaats van een link als er een actie gewenst is.
+A link is a navigation component.
+Use a button instead of a link when an action is desired.
 
-<!--
-  TODO: According to the spec, you should use a link for downloads as well. Last time I checked, different browsers handled this differently,
-  which led to unexpected results. Maybe that changed in the meantime. Do we want to figure this out and describe this in the docs as well?
--->
+### External links
 
-### Externe links
+Always include `rel="external"` for an external link.
+Avoid `target="_blank"`, but use `rel="external noopener"` if necessary.
+For more information: [Links to cross-origin destinations are unsafe](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/)
 
-Geef een externe link altijd `rel="external"` mee. Vermijd `target="_blank"`, maar gebruik in ieder geval `rel="external noopener"` als het moet. Voor meer informatie: [Links to cross-origin destinations are unsafe](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/)
+### Visited style
 
-### Bezochte stijl
+Visited links indicate that a user has already opened the link.
+We discourage using styles for visited links because they often make the page less clear and navigation more challenging.
+The inline link does have a visited style.
+It is not part of navigation elements that are frequently scanned.
 
-Bezochte koppelingen geven aan dat een gebruiker de koppeling al heeft geopend. Gebruikte stijlen raden we af bij koppelingen, omdat ze de pagina vaak onoverzichtelijk maken. Het maakt navigeren door een pagina moeilijker. De inline koppeling heeft wel een bezochte stijl. Het vormt geen onderdeel van navigatie elementen die veel gescand worden.
-
-## Relevante WCAG eisen
+## Relevant WCAG Requirements
 
 - [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum)
 - [WCAG 2.4.4](https://www.w3.org/TR/WCAG21/#link-purpose-in-context)
 - [WCAG 2.5.3](https://www.w3.org/TR/WCAG21/#label-in-name)
 - [WCAG 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts)
 
-## Referenties
+## References
 
-- [Links to cross-origin destinations are unsafe](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/): Vermijd `target="_blank"` of gebruik `rel="external noopener"` als het moet.
-- [_A comprehensive guide to designing perfect links in UX_, op Prototypr](https://blog.prototypr.io/a-guide-to-designing-perfect-links-in-ux-414558f35730): best practices rondom links.
-- [_Writing Hyperlinks: Salient, Descriptive, Start with Keyword_ door Norman Nielsen Group](https://www.nngroup.com/articles/writing-links/): hoe schrijf je goede links? Een uitgebreid artikel over links.
-- [_Hover, focus, active_, door Wunder](https://wunder.io/wunderpedia/accessibility/accessible-uis/hover-focus-active/): goede uitleg over de states die elementen zoals de link en button hebben in browsers.
-- [MDN: `<a>`: The Anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a): uitgebreid overzicht van alle mogelijkheden van links in HTML.
+- [Links to cross-origin destinations are unsafe](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/): Avoid `target="_blank"` or use `rel="external noopener"` if necessary.
+- [_A comprehensive guide to designing perfect links in UX_, on Prototypr](https://blog.prototypr.io/a-guide-to-designing-perfect-links-in-ux-414558f35730): Best practices for links.
+- [_Writing Hyperlinks: Salient, Descriptive, Start with Keyword_ by Norman Nielsen Group](https://www.nngroup.com/articles/writing-links/): How to write good links? An extensive article on links.
+- [_Hover, focus, active_, by Wunder](https://wunder.io/wunderpedia/accessibility/accessible-uis/hover-focus-active/): A good explanation of the states that elements like links and buttons have in browsers.
+- [MDN: `<a>`: The Anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a): Comprehensive overview of all possibilities of links in HTML.

package/src/components/link/link.scss

@@ -22,8 +22,8 @@
 
 .amsterdam-link--standalone {
   display: inline-block;
-  font-size: var(--amsterdam-link-standalone-spacious-font-size);
-  line-height: var(--amsterdam-link-standalone-spacious-line-height);
+  font-size: var(--amsterdam-link-standalone-font-size);
+  line-height: var(--amsterdam-link-standalone-line-height);
   text-decoration-line: var(--amsterdam-link-standalone-text-decoration-line);
   text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset);
@@ -32,11 +32,6 @@
     text-decoration-thickness: var(--amsterdam-link-standalone-hover-text-decoration-thickness);
     text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
   }
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-standalone-compact-font-size);
-    line-height: var(--amsterdam-link-standalone-compact-line-height);
-  }
 }
 
 .amsterdam-link--inline {
@@ -57,34 +52,6 @@
   }
 }
 
-.amsterdam-link--in-list {
-  align-items: flex-start;
-  display: inline-flex;
-  font-size: var(--amsterdam-link-in-list-spacious-font-size);
-  gap: var(--amsterdam-link-in-list-gap);
-  line-height: var(--amsterdam-link-in-list-spacious-line-height);
-  text-decoration-line: var(--amsterdam-link-in-list-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-link-in-list-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-link-in-list-text-underline-offset);
-
-  &:hover {
-    text-decoration-line: var(--amsterdam-link-in-list-hover-text-decoration-line);
-  }
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-in-list-compact-font-size);
-    line-height: var(--amsterdam-link-in-list-compact-line-height);
-  }
-}
-
-// Override for icon size
-.amsterdam-link--in-list__chevron {
-  span.amsterdam-icon svg {
-    height: 1rem;
-    width: 1rem;
-  }
-}
-
 .amsterdam-link--on-background-dark {
   color: var(--amsterdam-link-on-background-dark-color);
 

package/src/components/link-list/README.md

@@ -0,0 +1,16 @@
+# Link List
+
+A collection of related links.
+
+## Design
+
+Every list item starts with a chevron.
+It emphasizes the list structure and thematic coherence.
+The chevron is part of the link.
+Therefore, it is blue and clickable.
+
+## Guidelines
+
+Use a Link List to present multiple links within a theme.
+
+For additional guidelines, refer to the [Link](?path=/docs/navigation-link--docs) component.

package/src/components/link-list/link-list.scss

@@ -0,0 +1,69 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2024 Gemeente Amsterdam
+ */
+
+@import "../../common/hyphenation";
+
+@mixin reset-list {
+  box-sizing: border-box;
+  list-style: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-link-list {
+  @include reset-list;
+
+  display: grid;
+  gap: var(--amsterdam-link-list-gap);
+}
+
+.amsterdam-link-list__link {
+  align-items: flex-start;
+  color: var(--amsterdam-link-list-link-color);
+  display: inline-flex;
+  font-family: var(--amsterdam-link-list-link-font-family);
+  font-size: var(--amsterdam-link-list-link-medium-font-size);
+  font-weight: var(--amsterdam-link-list-link-font-weight);
+  gap: var(--amsterdam-link-list-link-gap);
+  line-height: var(--amsterdam-link-list-link-medium-line-height);
+  outline-offset: var(--amsterdam-link-list-link-outline-offset);
+  text-decoration-line: var(--amsterdam-link-list-link-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-link-list-link-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-link-list-link-text-underline-offset);
+
+  &:hover {
+    color: var(--amsterdam-link-list-link-hover-color);
+    text-decoration-line: var(--amsterdam-link-list-link-hover-text-decoration-line);
+  }
+}
+
+.amsterdam-link-list__link--small {
+  font-size: var(--amsterdam-link-list-link-small-font-size);
+  line-height: var(--amsterdam-link-list-link-small-line-height);
+}
+
+.amsterdam-link-list__link--large {
+  font-size: var(--amsterdam-link-list-link-large-font-size);
+  line-height: var(--amsterdam-link-list-link-large-line-height);
+
+  @include hyphenation;
+}
+
+.amsterdam-link-list__link--on-background-dark {
+  color: var(--amsterdam-link-list-link-on-background-dark-color);
+
+  &:hover {
+    color: var(--amsterdam-link-list-link-on-background-dark-hover-color);
+  }
+}
+
+.amsterdam-link-list__link--on-background-light {
+  color: var(--amsterdam-link-list-link-on-background-light-color);
+
+  &:hover {
+    color: var(--amsterdam-link-list-link-on-background-light-hover-color);
+  }
+}