@amsterdam/design-system-css 0.1.4 → 0.1.5

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.

package/src/link/link.scss

@@ -6,45 +6,50 @@
 @import "../../utils/breakpoint";
 
 .amsterdam-link {
-  color: var(--amsterdam-link-color, blue);
-  font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-link-font-size-narrow);
-  line-height: var(--amsterdam-link-line-height);
+  color: var(--amsterdam-link-color);
+  font-family: var(--amsterdam-link-font-family);
+  font-weight: var(--amsterdam-link-font-weight);
   outline-offset: var(--amsterdam-link-outline-offset);
-  text-decoration: var(--amsterdam-link-text-decoration, underline);
-  text-decoration-color: var(--amsterdam-link-text-decoration-color, currentColor);
-  text-decoration-thickness: var(--amsterdam-link-text-decoration-thickness, 1px);
-  text-underline-offset: var(--amsterdam-link-text-underline-offset);
 
   &:hover,
-  &:active {
-    color: var(--amsterdam-link-hover-color);
-    text-decoration: var(--amsterdam-link-hover-text-decoration);
-    text-decoration-thickness: var(--amsterdam-link-hover-text-decoration-thickness, 1px);
-  }
-
+  &:active,
   &:focus {
     color: var(--amsterdam-link-focus-color);
-    text-decoration: var(--amsterdam-link-focus-text-decoration);
   }
+}
 
-  &:visited {
-    color: var(--amsterdam-link-visited-color);
+.amsterdam-link--standalone {
+  display: inline-block;
+  font-size: var(--amsterdam-link-standalone-narrow-font-size);
+  line-height: var(--amsterdam-link-standalone-line-height);
+  text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset);
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration-thickness: var(--amsterdam-link-standalone-focus-text-decoration-thickness);
+    text-underline-offset: var(--amsterdam-link-standalone-focus-text-underline-offset);
   }
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-link-font-size-wide);
+    font-size: var(--amsterdam-link-standalone-wide-font-size);
   }
 }
 
-.amsterdam-link--standalone-bold {
-  font-weight: var(--amsterdam-link-standalone-bold-font-weight);
-}
-
 .amsterdam-link--inline {
   font-family: var(--amsterdam-link-inline-font-family);
   font-size: var(--amsterdam-link-inline-font-size);
-  text-underline-offset: var(--amsterdam-link-inline-text-underline-offset);
+  line-height: var(--amsterdam-link-inline-line-height);
+  text-decoration: var(--amsterdam-link-inline-text-decoration);
+  text-decoration-thickness: var(--amsterdam-link-text-decoration-thickness);
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: var(--amsterdam-link-inline-focus-text-decoration);
+    text-underline-offset: var(--amsterdam-link-inline-focus-text-underline-offset);
+  }
 
   &:visited {
     color: var(--amsterdam-link-inline-visited-color);
@@ -54,30 +59,39 @@
 .amsterdam-link--in-list {
   align-items: flex-start;
   display: inline-flex;
-  font-size: var(--amsterdam-link-in-list-font-size-narrow);
+  font-size: var(--amsterdam-link-in-list-narrow-font-size);
   gap: var(--amsterdam-link-in-list-gap);
   line-height: var(--amsterdam-link-in-list-line-height);
-  text-underline-offset: var(--amsterdam-link-in-list-text-underline-offset);
+  text-decoration: var(--amsterdam-link-in-list-text-decoration);
 
-  // Override for icon size
-  span.amsterdam-icon svg {
-    height: 16px;
-    width: 16px;
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: var(--amsterdam-link-in-list-focus-text-decoration);
+    text-decoration-thickness: var(--amsterdam-link-in-list-focus-text-decoration-thickness);
+    text-underline-offset: var(--amsterdam-link-in-list-focus-text-underline-offset);
   }
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-link-in-list-font-size-wide);
+    font-size: var(--amsterdam-link-in-list-wide-font-size);
+  }
+}
+
+// Override for icon size
+.amsterdam-link--in-list__chevron {
+  span.amsterdam-icon svg {
+    height: 16px;
+    width: 16px;
   }
 }
 
 .amsterdam-link--on-background-dark {
   color: var(--amsterdam-link-on-background-dark-color);
-  text-decoration: var(--amsterdam-link-on-background-dark-text-decoration);
 
   &:hover,
-  &:active {
+  &:active,
+  &:focus {
     color: var(--amsterdam-link-on-background-dark-hover-color);
-    text-decoration: var(--amsterdam-link-on-background-dark-hover-text-decoration);
   }
 
   &:visited {
@@ -87,15 +101,26 @@
 
 .amsterdam-link--on-background-light {
   color: var(--amsterdam-link-on-background-light-color);
-  text-decoration: var(--amsterdam-link-on-background-light-text-decoration);
 
   &:hover,
-  &:active {
+  &:active,
+  &:focus {
     color: var(--amsterdam-link-on-background-light-hover-color);
-    text-decoration: var(--amsterdam-link-on-background-light-hover-text-decoration);
   }
 
   &:visited {
     color: var(--amsterdam-link-on-background-light-visited-color);
   }
 }
+
+.amsterdam-link--inline.amsterdam-link--on-background-dark,
+.amsterdam-link--inline.amsterdam-link--on-background-light {
+  text-decoration: var(--amsterdam-link-inline-focus-text-decoration);
+  text-underline-offset: var(--amsterdam-link-inline-focus-text-underline-offset);
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: var(--amsterdam-link-inline-text-decoration);
+  }
+}

package/src/ordered-list/README.md

@@ -0,0 +1,7 @@
+# Ordered list
+
+Een geordende lijst is een verticale groep gerelateerde inhoud met een volgorde.
+Deze lijst kan 2 niveaus hebben.
+Het eerste niveau is genummerd.
+Het tweede niveau gebruikt letters in alfabetische volgorde.
+Tekst in de lijstitems springt een vaste afstand in.

package/src/ordered-list/ordered-list.scss

@@ -0,0 +1,53 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+/** Apply border box sizing, reset whitespace and list styles. */
+@mixin reset {
+  box-sizing: border-box;
+  list-style-type: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+/** A list is a grid column with a gap between items. */
+.amsterdam-ordered-list {
+  @include reset;
+
+  display: grid;
+  gap: var(--amsterdam-ordered-list-gap);
+}
+
+/** A list with markers sets typography for its text content. */
+.amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) {
+  color: var(--amsterdam-ordered-list-color);
+  font-family: var(--amsterdam-ordered-list-font-family);
+  font-size: var(--amsterdam-ordered-list-narrow-font-size);
+  font-weight: var(--amsterdam-ordered-list-font-weight);
+  line-height: var(--amsterdam-ordered-list-line-height);
+  list-style-type: var(--amsterdam-ordered-list-list-style-type);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-ordered-list-wide-font-size);
+  }
+
+  /** List items are responsible for indentation and marker positioning. */
+  .amsterdam-ordered-list__item {
+    margin-inline-start: var(--amsterdam-ordered-list-item-margin-inline-start);
+    padding-inline-start: var(--amsterdam-ordered-list-item-padding-inline-start);
+  }
+}
+
+/** A nested list has a different marker and less indentation for correct alignment. */
+:is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-ordered-list {
+  list-style-type: var(--amsterdam-ordered-list-ordered-list-list-style-type);
+
+  .amsterdam-ordered-list__item {
+    margin-inline-start: var(--amsterdam-ordered-list-ordered-list-item-margin-inline-start);
+    padding-inline-start: var(--amsterdam-ordered-list-ordered-list-item-padding-inline-start);
+  }
+}

package/src/page-heading/README.md

@@ -0,0 +1,16 @@
+# Page heading
+
+Het page heading component is een opvallende tekst aan het begin van een pagina, direct na de header.
+Gebruik dit component voor een naam, titel of motto.
+
+## Richtlijnen
+
+- Gebruik dit component om de aandacht van de gebruiker te trekken.
+- Gebruik dit component maar 1 keer per pagina, vaak alleen op de voorpagina.
+- Niet gebruiken als je lange stukken tekst wilt weergeven, de tekst moet kort en duidelijk zijn.
+
+## Relevante WCAG eisen
+
+Het page heading component is een variant van een heading level 1, met een afwijkende stijl. Let bij gebruik van dit component goed op dat de heading hiërarchie van de pagina logisch blijft.
+
+Voor dit component gelden dezelfde WCAG eisen als voor [het heading component](https://amsterdam.github.io/design-system/?path=/docs/react_heading--docs).

package/src/page-heading/page-heading.scss

@@ -0,0 +1,31 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+}
+
+.amsterdam-page-heading {
+  break-after: avoid;
+  break-inside: avoid;
+  color: var(--amsterdam-page-heading-color);
+  font-family: var(--amsterdam-page-heading-font-family);
+  font-size: var(--amsterdam-page-heading-narrow-font-size);
+  font-weight: var(--amsterdam-page-heading-font-weight);
+  line-height: var(--amsterdam-page-heading-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-page-heading-wide-font-size);
+  }
+
+  @include reset;
+}
+
+.amsterdam-page-heading--inverse-color {
+  color: var(--amsterdam-page-heading-inverse-color);
+}

package/src/page-menu/README.md

@@ -0,0 +1,15 @@
+# Page Menu
+
+Het Page Menu wordt alleen gebruikt in het Header en Footer component en is uitsluitend bedoeld voor horizontale navigatie. Het uiterlijk van de links en buttons zijn gelijk getrokken en kunnen beide gebruikt worden. Een link voor navigatie acties en een button voor het afvuren van een javascript event voor bijvoorbeeld het openen van het hoofdmenu of het tonen van een modal.
+
+## Richtlijnen
+
+- Als hoofdnavigatie in de header heeft het Page Menu maximaal 5 items inclusief Zoeken en Menu, staan op 1 regel en is rechts uitgelijnd. Houd minimaal 1 kolom afstand tussen de sitetitel en het eerste menu-item.
+- Als footer menu in het Page Menu links uitgelijnd.
+- Submenu's zijn niet toegestaan.
+  - Gebruik het standaard Menu-item als er meer informatie in het hoofdmenu nodig is. Dit item toont een schermbreed uitklapmenu (overlay) met koppelingen. De indeling van de koppelingen is vrij.
+  - Bij gebruik van het Menu-item zijn de overige items (bijvoorbeeld Zoeken, Contact) in de koptekst functioneel. Deze items kunnen herhaald worden binnen het uitgeklapte Menu-item.
+
+## Relevante WCAG eisen
+
+- [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html)