@amsterdam/design-system-css 0.1.4 → 0.1.6

package/src/checkbox/checkbox.scss

@@ -0,0 +1,225 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-checkbox__input {
+  appearance: none;
+  margin-block: 0;
+  margin-inline: 0;
+  opacity: 0%; /* to hide native input field in older iOS */
+
+  &:focus-visible + label {
+    outline: auto;
+    outline-offset: var(--amsterdam-checkbox-outline-offset);
+  }
+}
+
+.amsterdam-checkbox__checkmark {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  height: calc(var(--amsterdam-checkbox-checkmark-narrow-size) * var(--amsterdam-checkbox-checkmark-multiplier));
+  width: 1.5rem;
+
+  &::after {
+    border-color: var(--amsterdam-checkbox-checkmark-border-color);
+    border-style: solid;
+    border-width: 2px;
+    box-sizing: border-box;
+    content: "";
+    height: 1.5rem;
+    width: 100%;
+  }
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: calc(var(--amsterdam-checkbox-checkmark-wide-size) * var(--amsterdam-checkbox-checkmark-multiplier));
+  }
+}
+
+.amsterdam-checkbox__label {
+  color: var(--amsterdam-checkbox-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--amsterdam-checkbox-font-family);
+  font-size: var(--amsterdam-checkbox-narrow-font-size);
+  font-weight: 400;
+  gap: 0.5rem;
+  line-height: var(--amsterdam-checkbox-line-height);
+
+  &:hover {
+    color: var(--amsterdam-checkbox-hover-color);
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 3px;
+
+    .amsterdam-checkbox__checkmark::after {
+      border-color: var(--amsterdam-checkbox-checkmark-hover-border-color);
+      border-width: 3px;
+    }
+  }
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-checkbox-wide-font-size);
+  }
+}
+
+// Default checked
+.amsterdam-checkbox__input:checked {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    background-color: var(--amsterdam-checkbox-checkmark-checked-background-color);
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12.216%2027.016%200%2014.168l2.91-2.77%209.346%209.837L29.129%204%2032%206.8z%22%2F%3E%3C%2Fsvg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
+    border: none;
+  }
+}
+
+// Default indeterminate
+.amsterdam-checkbox__input:indeterminate {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    background-color: var(--amsterdam-checkbox-checkmark-indeterminate-background-color);
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0id2hpdGUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMTMuNzE0aDMydjRIMHoiLz48L3N2Zz4=");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
+    border: none;
+  }
+}
+
+// Invalid unchecked
+.amsterdam-checkbox__input:invalid,
+.amsterdam-checkbox__input[aria-invalid="true"] {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    border-color: var(--amsterdam-checkbox-checkmark-invalid-border-color);
+  }
+}
+
+// Disabled unchecked
+.amsterdam-checkbox__input:disabled {
+  + .amsterdam-checkbox__label {
+    color: var(--amsterdam-checkbox-disabled-color);
+    cursor: not-allowed;
+
+    .amsterdam-checkbox__checkmark::after {
+      border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
+      border-width: 2px;
+    }
+  }
+}
+
+// Invalid checked
+.amsterdam-checkbox__input:invalid:checked,
+.amsterdam-checkbox__input[aria-invalid="true"]:checked {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    background-color: var(--amsterdam-checkbox-checkmark-invalid-checked-background-color);
+  }
+}
+
+// Invalid indeterminate
+.amsterdam-checkbox__input:invalid:indeterminate,
+.amsterdam-checkbox__input[aria-invalid="true"]:indeterminate {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    background-color: var(--amsterdam-checkbox-checkmark-invalid-indeterminate-background-color);
+  }
+}
+
+// Disabled label
+.amsterdam-checkbox__input:disabled + .amsterdam-checkbox__label:hover {
+  text-decoration: none;
+}
+
+// Disabled checked
+.amsterdam-checkbox__input:disabled:checked {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    background-color: var(--amsterdam-checkbox-checkmark-disabled-checked-background-color);
+  }
+}
+
+// Disabled indeterminate
+.amsterdam-checkbox__input:disabled:indeterminate {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    background-color: var(--amsterdam-checkbox-checkmark-disabled-indeterminate-background-color);
+  }
+}
+
+// Disabled invalid unchecked
+.amsterdam-checkbox__input:invalid:disabled,
+.amsterdam-checkbox__input[aria-invalid="true"]:disabled {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
+  }
+}
+
+// HOVER STATES
+
+// Invalid unchecked hover
+:is(.amsterdam-checkbox__input:invalid, .amsterdam-checkbox__input[aria-invalid="true"])
+  + .amsterdam-checkbox__label:hover
+  .amsterdam-checkbox__checkmark::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
+  border-color: var(--amsterdam-checkbox-checkmark-invalid-hover-border-color);
+}
+
+// Default checked hover
+.amsterdam-checkbox__input:checked + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
+  background-color: var(--amsterdam-checkbox-checkmark-checked-hover-background-color);
+}
+
+// Default indeterminate hover
+.amsterdam-checkbox__input:indeterminate + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
+  background-color: var(--amsterdam-checkbox-checkmark-indeterminate-hover-background-color);
+}
+
+// Invalid checked hover
+:is(.amsterdam-checkbox__input:invalid:checked, .amsterdam-checkbox__input[aria-invalid="true"]:checked)
+  + .amsterdam-checkbox__label:hover
+  .amsterdam-checkbox__checkmark::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
+  background-color: var(--amsterdam-checkbox-checkmark-invalid-checked-hover-background-color);
+}
+
+// Invalid indeterminate hover
+:is(.amsterdam-checkbox__input:invalid:indeterminate, .amsterdam-checkbox__input[aria-invalid="true"]:indeterminate)
+  + .amsterdam-checkbox__label:hover
+  .amsterdam-checkbox__checkmark::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
+  background-color: var(--amsterdam-checkbox-checkmark-invalid-indeterminate-hover-background-color);
+}
+
+// Disabled checked hover
+.amsterdam-checkbox__input:disabled:checked + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
+  background-color: var(--amsterdam-checkbox-checkmark-disabled-checked-hover-background-color);
+}
+
+// Disabled indeterminate hover
+.amsterdam-checkbox__input:disabled:indeterminate
+  + .amsterdam-checkbox__label:hover
+  .amsterdam-checkbox__checkmark::after {
+  background-color: var(--amsterdam-checkbox-checkmark-disabled-indeterminate-hover-background-color);
+}
+
+// Disabled invalid unchecked hover
+:is(.amsterdam-checkbox__input:invalid:disabled, .amsterdam-checkbox__input[aria-invalid="true"]:disabled)
+  + .amsterdam-checkbox__label:hover
+  .amsterdam-checkbox__checkmark::after {
+  // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+  border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
+}
+
+// DISABLED INVALID STATES
+
+// Disabled invalid checked & indeterminate
+.amsterdam-checkbox__input:invalid:disabled:checked,
+.amsterdam-checkbox__input:invalid:disabled:indeterminate,
+.amsterdam-checkbox__input[aria-invalid="true"]:disabled:checked,
+.amsterdam-checkbox__input[aria-invalid="true"]:disabled:indeterminate {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    background-color: var(--amsterdam-checkbox-checkmark-disabled-checked-background-color);
+  }
+}

package/src/footer/README.md

@@ -0,0 +1,11 @@
+# Footer
+
+De footer (in het Nederlands: voettekst) sluit iedere webpagina af. De inhoud is service-informatie. Een gedeelte is voorgeschreven en een deel wordt ingevuld vanuit de doelstelling van de website.
+
+## Richtlijnen
+
+- De voettekst is verplicht, er staat er 1 op elke pagina.
+- De eerste kolom richt zich op contactinformatie. De informatie is zo specifiek mogelijk gebonden aan de betreffende website of pagina (bijvoorbeeld een chatmogelijkheid indien aanwezig).
+- De tweede kolom bevat links naar relevante (online) sites of bronnen.
+- De derde kolom verwijst naar nieuwsbrieven, socials enz.
+- Het laatste deel van de voettekst is bedoeld voor koppelingen naar privacy, cookieverklaring, uitleg over de website e.d. Het is niet bedoeld voor koppelingen naar bijvoorbeeld contactinformatie.

package/src/footer/footer-css.md

@@ -0,0 +1,11 @@
+# CSS Footer
+
+Gebruik het `footer` element als buitenste container van de footer.
+
+De voettekst is blauw met witte tekst en iconen, met onderaan een witte balk. Op desktop heeft het blauwe deel van de voettekst 3 kolommen. Op mobiel heeft het blauwe deel van de voettekst 1 kolom. Kolom 1, 2 en 3 van de desktop staan dan onder elkaar.
+
+De functionaliteit op desktop en mobiel is gelijk.
+
+De hoogte wordt bepaald door de content. De breedte van de voettekst op desktop is niet schermvullend.
+
+De voettekst wordt nooit ingeklapt. Ook niet in mobiele weergave.

package/src/footer/footer.scss

@@ -0,0 +1,29 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.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

@@ -8,11 +8,11 @@
 .amsterdam-form-label {
   color: var(--amsterdam-form-label-color);
   font-family: var(--amsterdam-form-label-font-family);
-  font-size: var(--amsterdam-form-label-font-size-narrow);
+  font-size: var(--amsterdam-form-label-narrow-font-size);
   font-weight: var(--amsterdam-form-label-font-weight);
   line-height: var(--amsterdam-form-label-line-height);
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-form-label-font-size-wide);
+    font-size: var(--amsterdam-form-label-wide-font-size);
   }
 }

package/src/grid/README.md

@@ -0,0 +1,11 @@
+# Page grid
+
+Onder alle pagina’s en schermen ligt hetzelfde grid. Het grid is responsive, dus de precieze breedte van een kolom is afhankelijk van de schermbreedte.
+
+De maximale breedte van het grid is 1440 pixels. In een later stadium bieden we een grid van 1920 aan.
+
+Op schermen tot 854 pixels breed bestaat het grid uit 4 kolommen, op bredere schermen worden dat er 12. Het grid staat horizontaal gecentreerd op de pagina.
+
+De witruimte tussen de kolommen is ook flexibel: die groeit lineair van 8 pixels bij een breedte van 320 naar 24 pixels bij een breedte van 1440.
+
+Pagina-elementen worden op het grid geplaatst en beslaan een bepaald aantal kolommen.

package/src/grid/grid-cell.scss

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+@media screen and (width > $amsterdam-breakpoint) {
+  @for $i from 1 through 12 {
+    .amsterdam-grid-column-start-#{$i} {
+      grid-column-start: $i;
+    }
+
+    .amsterdam-grid-column-span-#{$i} {
+      grid-column-end: span $i;
+    }
+  }
+}

package/src/grid/page-grid.scss

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-page-grid {
+  column-gap: var(--amsterdam-page-grid-column-gap);
+  display: grid;
+  grid-template-columns: repeat(var(--amsterdam-page-grid-column-count-narrow), 1fr);
+  max-width: var(--amsterdam-page-grid-max-width);
+}
+
+@media screen and (width > $amsterdam-breakpoint) {
+  .amsterdam-page-grid {
+    grid-template-columns: repeat(var(--amsterdam-page-grid-column-count-wide), 1fr);
+  }
+}

package/src/heading/heading.scss

@@ -7,13 +7,12 @@
 
 @mixin reset {
   box-sizing: border-box;
-  break-after: avoid;
-  break-inside: avoid;
   margin-block: 0;
-  margin-inline: 0;
 }
 
 .amsterdam-heading {
+  break-after: avoid;
+  break-inside: avoid;
   color: var(--amsterdam-heading-color);
   font-family: var(--amsterdam-heading-font-family);
   font-weight: var(--amsterdam-heading-font-weight);
@@ -21,38 +20,42 @@
   @include reset;
 }
 
-.amsterdam-heading-1 {
-  font-size: var(--amsterdam-heading-1-font-size-narrow);
+.amsterdam-heading--1 {
+  font-size: var(--amsterdam-heading-1-narrow-font-size);
   line-height: var(--amsterdam-heading-1-line-height);
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-heading-1-font-size-wide);
+    font-size: var(--amsterdam-heading-1-wide-font-size);
   }
 }
 
-.amsterdam-heading-2 {
-  font-size: var(--amsterdam-heading-2-font-size-narrow);
+.amsterdam-heading--2 {
+  font-size: var(--amsterdam-heading-2-narrow-font-size);
   line-height: var(--amsterdam-heading-2-line-height);
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-heading-2-font-size-wide);
+    font-size: var(--amsterdam-heading-2-wide-font-size);
   }
 }
 
-.amsterdam-heading-3 {
-  font-size: var(--amsterdam-heading-3-font-size-narrow);
+.amsterdam-heading--3 {
+  font-size: var(--amsterdam-heading-3-narrow-font-size);
   line-height: var(--amsterdam-heading-3-line-height);
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-heading-3-font-size-wide);
+    font-size: var(--amsterdam-heading-3-wide-font-size);
   }
 }
 
-.amsterdam-heading-4 {
-  font-size: var(--amsterdam-heading-4-font-size-narrow);
+.amsterdam-heading--4 {
+  font-size: var(--amsterdam-heading-4-narrow-font-size);
   line-height: var(--amsterdam-heading-4-line-height);
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-heading-4-font-size-wide);
+    font-size: var(--amsterdam-heading-4-wide-font-size);
   }
 }
+
+.amsterdam-heading--inverse-color {
+  color: var(--amsterdam-heading-inverse-color);
+}

package/src/icon/icon.scss

@@ -14,7 +14,7 @@
   fill: currentColor;
 }
 
-.amsterdam-icon-size-3 {
+.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) {
@@ -22,7 +22,7 @@
   }
 }
 
-.amsterdam-icon-size-3 svg {
+.amsterdam-icon--size-3 svg {
   height: var(--amsterdam-icon-size-3-icon-size-narrow);
   width: var(--amsterdam-icon-size-3-icon-size-narrow);
 
@@ -31,7 +31,7 @@
     width: var(--amsterdam-icon-size-3-icon-size-wide);
   }
 }
-.amsterdam-icon-size-4 {
+.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) {
@@ -39,7 +39,7 @@
   }
 }
 
-.amsterdam-icon-size-4 svg {
+.amsterdam-icon--size-4 svg {
   height: var(--amsterdam-icon-size-4-icon-size-narrow);
   width: var(--amsterdam-icon-size-4-icon-size-narrow);
 
@@ -49,7 +49,7 @@
   }
 }
 
-.amsterdam-icon-size-5 {
+.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) {
@@ -57,7 +57,7 @@
   }
 }
 
-.amsterdam-icon-size-5 svg {
+.amsterdam-icon--size-5 svg {
   height: var(--amsterdam-icon-size-5-icon-size-narrow);
   width: var(--amsterdam-icon-size-5-icon-size-narrow);
 
@@ -67,7 +67,7 @@
   }
 }
 
-.amsterdam-icon-size-6 {
+.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) {
@@ -75,7 +75,7 @@
   }
 }
 
-.amsterdam-icon-size-6 svg {
+.amsterdam-icon--size-6 svg {
   height: var(--amsterdam-icon-size-6-icon-size-narrow);
   width: var(--amsterdam-icon-size-6-icon-size-narrow);
 
@@ -85,7 +85,7 @@
   }
 }
 
-.amsterdam-icon-size-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) {
@@ -93,7 +93,7 @@
   }
 }
 
-.amsterdam-icon-size-7 svg {
+.amsterdam-icon--size-7 svg {
   height: var(--amsterdam-icon-size-7-icon-size-narrow);
   width: var(--amsterdam-icon-size-7-icon-size-narrow);
 

package/src/index.scss

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+/* Append here */
+@import "./page-menu/page-menu";
+@import "./accordion/accordion";
+@import "./breadcrumb/breadcrumb";
+@import "./button/button";
+@import "./form-label/form-label";
+@import "./heading/heading";
+@import "./icon/icon";
+@import "./link/link";
+@import "./paragraph/paragraph";
+@import "./unordered-list/unordered-list";
+@import "./ordered-list/ordered-list";
+@import "./grid/grid-cell";
+@import "./grid/page-grid";

package/src/link/README.md

@@ -1,26 +1,42 @@
 # Link
 
-## Introductie
+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.
 
-Nederlandse term: koppeling
+## Richtlijnen
 
-Links worden gebruikt als navigatie-elementen en kunnen op zichzelf of inline met tekst worden gebruikt. Het is de lichtgewicht variant voor navigatie.
+Gebruik een link in de volgende gevallen:
 
-## Bezochte stijl
+- 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:`)
 
-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.
+Een link is een navigatie component. Gebruik een knop in plaats van een link als er een actie gewenst is.
 
-## Referenties
+<!--
+  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?
+-->
 
-- [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="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.
+### Externe links
+
+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/)
 
-### Relevante WCAG-regels
+### Bezochte stijl
+
+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
 
 - [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
+
+- [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.