@utrecht/web-component-library-stencil 1.0.0-alpha.9 → 1.0.0-alpha.93

package/dist/collection/page-footer/{bem.css → stencil.css}

@@ -1,20 +1,13 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
  * Copyright (c) 2021 Robbert Broersma
  */
-
 .utrecht-page-footer {
-  font-family: var(--utrecht-document-font-family);
-  font-size: var(--utrecht-document-font-size);
-  background-color: var(--utrecht-page-footer-background-color);
-  background-image: var(--utrecht-page-footer-background-image);
-  color: var(--utrecht-page-footer-color);
-  padding-block-start: var(--utrecht-page-footer-padding-block-start);
-  padding-inline-end: var(--utrecht-page-footer-padding-inline-end);
-  padding-block-end: var(--utrecht-page-footer-padding-block-end);
-  padding-inline-start: var(--utrecht-page-footer-padding-inline-start);
-
   --utrecht-document-color: currentColor;
   --utrecht-heading-color: currentColor;
   --utrecht-link-color: currentColor;
@@ -22,11 +15,28 @@
   --utrecht-link-hover-color: currentColor;
   --utrecht-link-active-color: currentColor;
   --utrecht-link-visited-color: currentColor;
+  background-color: var(--utrecht-page-footer-background-color);
+  background-image: var(--utrecht-page-footer-background-image);
+  color: var(--utrecht-page-footer-color);
+  font-family: var(--utrecht-document-font-family);
+  font-size: var(--utrecht-document-font-size);
+  padding-block-end: var(--utrecht-page-footer-padding-block-end);
+  padding-block-start: var(--utrecht-page-footer-padding-block-start);
+  padding-inline-end: var(--utrecht-page-footer-padding-inline-end);
+  padding-inline-start: var(--utrecht-page-footer-padding-inline-start);
 }
 
 .utrecht-page-footer__address--reset-address {
   /* reset <address> */
   font-style: inherit;
-  margin-block-start: 0;
   margin-block-end: 0;
+  margin-block-start: 0;
 }
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/page-footer/stencil.js

@@ -11,9 +11,9 @@ export class PageFooter {
   static get is() { return "utrecht-page-footer"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["stencil.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["stencil.css"]
   }; }
 }

package/dist/collection/pagination/bem.js

@@ -0,0 +1,54 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  distanced: false,
+};
+
+export const LinkTemplate = ({ disabled = false, href = '', rel = null, textContent = '', title = '' }) =>
+  `<${disabled ? 'span' : 'a'} href="${href}" class="${clsx(
+    'utrecht-pagination__relative-link',
+    disabled && 'utrecht-pagination__relative-link--disabled',
+    rel === 'next' && 'utrecht-pagination__relative-link--next',
+    rel === 'prev' && 'utrecht-pagination__relative-link--prev',
+  )}"${rel ? ` rel="${rel}"` : ''}${title ? ` aria-label="${title}"` : ''}>${textContent}</${disabled ? 'span' : 'a'}>`;
+
+export const ItemTemplate = ({ current = false, href = '', rel = null, textContent = '' }) =>
+  `<a class="${clsx(
+    'utrecht-pagination__page-link',
+    current && 'utrecht-pagination__page-link--current',
+  )}" href="${href}"${current ? ' aria-current="true"' : ''}${rel ? ` rel="${rel}"` : ''}>${textContent}</a>`;
+
+export const Pagination = ({ currentIndex = -1, distanced = false, links = [], next = null, prev = null }) =>
+  `<nav class="${clsx(
+    'utrecht-pagination',
+    distanced && 'utrecht-pagination--distanced',
+  )}"><span class="utrecht-pagination__before">${
+    prev ? LinkTemplate({ ...prev, rel: 'prev', textContent: 'Vorige' }) : ''
+  }</span><span role="group" class="utrecht-pagination__pages">${links
+    .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))
+    .map((link, arrayIndex) => {
+      const index = typeof link.index === 'number' ? link.index : arrayIndex;
+      return {
+        index,
+        current: typeof currentIndex === 'number' && index === currentIndex,
+        rel:
+          typeof currentIndex === 'number'
+            ? index === currentIndex + 1
+              ? 'next'
+              : index === currentIndex - 1
+              ? 'prev'
+              : null
+            : null,
+        textContent: link.index || index,
+        ...link,
+      };
+    })
+    .map((link) => ItemTemplate(link))
+    .join('')}</span><span class="utrecht-pagination__before">${
+    next ? LinkTemplate({ ...next, rel: 'next', textContent: 'Volgende' }) : ''
+  }</span></nav>`;

package/dist/collection/pagination/stencil.css

@@ -0,0 +1,118 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-pagination {
+  font-family: var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));
+  font-size: var(--utrecht-pagination-font-size, var(--utrecht-document-font-family));
+}
+
+.utrecht-pagination--distanced {
+  margin-block-end: var(--utrecht-pagination-margin-block-end);
+  margin-block-start: var(--utrecht-pagination-margin-block-start);
+}
+
+.utrecht-pagination__relative-link {
+  background-color: var(--utrecht-pagination-relative-link-background-color);
+  border-color: var(--utrecht-pagination-relative-link-border-color);
+  border-radius: var(--utrecht-pagination-relative-link-border-radius);
+  border-style: solid;
+  border-width: var(--utrecht-pagination-relative-link-border-width, 0);
+  color: var(--utrecht-pagination-relative-link-color);
+  display: inline-block;
+  font-weight: var(--utrecht-pagination-relative-link-font-weight);
+  padding-block-end: var(--utrecht-pagination-relative-link-padding-block-end);
+  padding-block-start: var(--utrecht-pagination-relative-link-padding-block-start);
+  padding-inline-end: var(--utrecht-pagination-relative-link-padding-inline-end);
+  padding-inline-start: var(--utrecht-pagination-relative-link-padding-inline-start);
+  text-decoration: var(--utrecht-pagination-relative-link-text-decoration);
+  text-transform: var(--utrecht-pagination-relative-link-text-transform);
+}
+
+.utrecht-pagination__relative-link--next {
+  margin-inline-start: var(--utrecht-pagination-relative-link-distanced-margin-inline-start);
+}
+
+.utrecht-pagination__relative-link--prev {
+  margin-inline-end: var(--utrecht-pagination-relative-link-distanced-margin-inline-end);
+}
+
+.utrecht-pagination__relative-link--disabled {
+  background-color: var(--utrecht-pagination-relative-link-disabled-background-color, var(--utrecht-pagination-relative-link-background-color));
+  color: var(--utrecht-pagination-relative-link-disabled-color, var(--utrecht-pagination-relative-link-color));
+}
+
+.utrecht-pagination__relative-link--focus,
+.utrecht-pagination__relative-link:focus {
+  background-color: var(--utrecht-focus-background-color);
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  color: var(--utrecht-focus-color, inherit);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: 0;
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-pagination__relative-link--hover,
+.utrecht-pagination__relative-link:hover {
+  background-color: var(--utrecht-pagination-relative-link-hover-background-color, var(--utrecht-pagination-relative-link-background-color));
+  border-color: var(--utrecht-pagination-relative-link-hover-border-color, var(--utrecht-pagination-relative-link-border-color));
+  color: var(--utrecht-pagination-relative-link-hover-color, var(--utrecht-pagination-relative-link-color));
+}
+
+.utrecht-pagination__page-link {
+  background-color: var(--utrecht-pagination-page-link-background-color);
+  border-color: var(--utrecht-pagination-page-link-border-color, 0);
+  border-radius: var(--utrecht-pagination-page-link-border-radius);
+  border-style: solid;
+  border-width: var(--utrecht-pagination-page-link-border-width);
+  color: var(--utrecht-pagination-page-link-color);
+  display: inline-block;
+  font-weight: var(--utrecht-pagination-page-link-font-weight);
+  padding-block-end: var(--utrecht-pagination-page-link-padding-block-end);
+  padding-block-start: var(--utrecht-pagination-page-link-padding-block-start);
+  padding-inline-end: var(--utrecht-pagination-page-link-padding-inline-end);
+  padding-inline-start: var(--utrecht-pagination-page-link-padding-inline-start);
+  text-decoration: var(--utrecht-pagination-page-link-text-decoration);
+}
+
+.utrecht-pagination__page-link--current {
+  background-color: var(--utrecht-pagination-page-link-current-background-color);
+  border-color: var(--utrecht-pagination-page-link-current-border-color);
+  color: var(--utrecht-pagination-page-link-current-color);
+}
+
+.utrecht-pagination__page-link--distanced,
+.utrecht-pagination__page-link ~ .utrecht-pagination__page-link {
+  margin-inline-start: var(--utrecht-pagination-page-link-distanced-margin-inline-start);
+}
+
+.utrecht-pagination__page-link--hover,
+.utrecht-pagination__page-link:hover {
+  background-color: var(--utrecht-pagination-page-link-hover-background-color, var(--utrecht-pagination-page-link-background-color));
+  border-color: var(--utrecht-pagination-page-link-hover-border-color, var(--utrecht-pagination-page-link-border-color));
+  color: var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color));
+}
+
+.utrecht-pagination__page-link--focus,
+.utrecht-pagination__page-link:focus {
+  background-color: var(--utrecht-focus-background-color);
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  color: var(--utrecht-focus-color, inherit);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: 0;
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/pagination/stencil.js

@@ -0,0 +1,110 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, Prop, h } from "@stencil/core";
+import clsx from "clsx";
+export class Pagination {
+  render() {
+    const { currentIndex } = this;
+    const links = typeof this.links === "string" ? JSON.parse(this.links) : null;
+    const next = typeof this.next === "string" ? JSON.parse(this.next) : null;
+    const prev = typeof this.prev === "string" ? JSON.parse(this.next) : null;
+    const RelativeLink = ({ disabled = false, href = "", rel = null, textContent = "", title = "" }) => disabled ? (h("span", { class: clsx("utrecht-pagination__relative-link", disabled && "utrecht-pagination__relative-link--disabled", rel === "next" && "utrecht-pagination__relative-link--next", rel === "prev" && "utrecht-pagination__relative-link--prev"), "aria-label": title || null }, textContent)) : (h("a", { href: href, class: clsx("utrecht-pagination__relative-link", disabled && "utrecht-pagination__relative-link--disabled", rel === "next" && "utrecht-pagination__relative-link--next", rel === "prev" && "utrecht-pagination__relative-link--prev"), rel: rel, "aria-label": title || null }, textContent));
+    const PageLink = ({ current = false, href = "", rel = null, textContent = "" }) => (h("a", { class: clsx("utrecht-pagination__page-link", current && "utrecht-pagination__page-link--current"), href: href, "aria-current": current ? "true" : null, rel: rel }, textContent));
+    return (h("nav", { class: "utrecht-pagination" },
+      h("span", { class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: "prev", textContent: "Vorige" })) : ""),
+      h("span", { role: "group", class: "utrecht-pagination__pages" }, links
+        .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))
+        .map((link, arrayIndex) => {
+        const index = typeof link.index === "number" ? link.index : arrayIndex;
+        return Object.assign({ index, current: typeof currentIndex === "number" && index === currentIndex, rel: typeof currentIndex === "number"
+            ? index === currentIndex + 1
+              ? "next"
+              : index === currentIndex - 1
+                ? "prev"
+                : null
+            : null, textContent: link.index || index }, link);
+      })
+        .map((link) => PageLink(link))),
+      h("span", { class: "utrecht-pagination__before" }, next ? RelativeLink(Object.assign(Object.assign({}, next), { rel: "next", textContent: "Volgende" })) : "")));
+  }
+  static get is() { return "utrecht-pagination"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.css"]
+  }; }
+  static get properties() { return {
+    "links": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "links",
+      "reflect": false
+    },
+    "next": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "next",
+      "reflect": false
+    },
+    "prev": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "prev",
+      "reflect": false
+    },
+    "currentIndex": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current-index",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/paragraph/bem.js

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  lead: false,
+  textContent: '',
+};
+
+export const Paragraph = ({ distanced = false, textContent = '', lead = false }) =>
+  `<p class="${clsx('utrecht-paragraph', {
+    'utrecht-paragraph--distanced': distanced,
+    'utrecht-paragraph--lead': lead,
+  })}">${textContent}</p>`;

package/dist/collection/paragraph/{bem.css → stencil.css}

@@ -1,22 +1,37 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  */
-
 .utrecht-paragraph {
   color: var(--utrecht-document-color, inherit);
   font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
   font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
   font-weight: var(--utrecht-paragraph-font-weight, inherit);
   line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
+  margin-block-end: 0;
+  margin-block-start: 0;
 }
 
 .utrecht-paragraph--lead {
+  color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
   font-size: var(--utrecht-paragraph-lead-font-size, inherit);
   font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
   line-height: var(--utrecht-paragraph-lead-line-height, inherit);
 }
+
 .utrecht-paragraph--distanced {
-  margin-block-start: var(--utrecht-paragraph-margin-block-start);
   margin-block-end: var(--utrecht-paragraph-margin-block-end);
+  margin-block-start: var(--utrecht-paragraph-margin-block-start);
 }
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/paragraph/stencil.js

@@ -8,10 +8,10 @@ export class Paragraph {
   static get is() { return "utrecht-paragraph"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["stencil.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["stencil.css"]
   }; }
   static get properties() { return {
     "lead": {

package/dist/collection/pre-heading/bem.js

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  distanced: false,
+};
+
+export const PreHeading = ({ textContent = '', distanced = false }) =>
+  `<div class="${clsx('utrecht-pre-heading', {
+    'utrecht-pre-heading--distanced': distanced,
+  })}">${textContent}</div>`;

package/dist/collection/radio-button/bem.js

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+};
+
+export const RadioButton = ({ checked = false, disabled = false }) =>
+  `<input type="radio"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} class="${clsx(
+    'utrecht-radio-button',
+    checked && 'utrecht-radio-button--checked',
+    disabled && 'utrecht-radio-button--disabled',
+  )}">`;

package/dist/collection/search-bar/bem.js

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const SearchBar = ({
+  buttonLabel,
+  formLabel,
+  inputLabel,
+  value,
+}) => `<form class="utrecht-search-bar" role="search" aria-label="${formLabel}">
+  <input type="search" class="utrecht-search-bar__input utrecht-textbox utrecht-textbox utrecht-textbox--html-input" name="q" autocomplete="off" spellcheck="false" value="${value}" aria-label="${inputLabel}">
+  <button type="submit" value="Zoeken" class="utrecht-search-bar__button utrecht-button">${buttonLabel}</button>
+</form>`;

package/dist/collection/select/bem.js

@@ -0,0 +1,38 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  disabled: false,
+  focus: false,
+  invalid: false,
+  options: [],
+  required: false,
+};
+
+export const Select = ({ disabled = false, focus = false, invalid = false, options = [], required = false }) =>
+  `<select${invalid ? ' aria-invalid="true"' : ''}${disabled ? ' disabled' : ''}${
+    required ? ' required' : ''
+  } class="${clsx('utrecht-select', {
+    'utrecht-select--disabled': disabled,
+    'utrecht-select--focus': focus,
+    'utrecht-select--invalid': invalid,
+    'utrecht-select--required': required,
+  })}">
+  ${options
+    .map(
+      ({ label, selected, value }) =>
+        `<option${selected ? ' selected' : ''}${value ? ` value="${value}"` : ''}>${label}</option>`,
+    )
+    .join('\n  ')}
+</select>`;
+
+export const exampleOptions = [
+  { value: '1', label: 'Option #1' },
+  { value: '2', label: 'Option #2', selected: true },
+  { value: '3', label: 'Option #3' },
+];

package/dist/collection/separator/bem.js

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  distanced: false,
+};
+
+export const Separator = ({ distanced = false }) =>
+  `<div role="separator" aria-orientation="horizontal" class="${clsx(
+    'utrecht-separator',
+    distanced && 'utrecht-separator--distanced',
+  )}"></div>`;

package/dist/collection/separator/{bem.css → stencil.css}

@@ -1,14 +1,28 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
  * Copyright (c) 2021 Robbert Broersma
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  */
-
 .utrecht-separator {
-  border-style: solid;
   border-color: var(--utrecht-separator-color);
-  border-width: 0 0 var(--utrecht-separator-width) 0;
-  margin-block-start: var(--utrecht-separator-margin-block-start);
+  border-style: solid;
+  border-width: 0 0 var(--utrecht-separator-block-size) 0;
+}
+
+.utrecht-separator--distanced {
   margin-block-end: var(--utrecht-separator-margin-block-end);
+  margin-block-start: var(--utrecht-separator-margin-block-start);
 }
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/separator/stencil.js

@@ -6,9 +6,9 @@ export class Separator {
   static get is() { return "utrecht-separator"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["stencil.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["stencil.css"]
   }; }
 }

package/dist/collection/templates/contact-card-template/stencil.css

@@ -0,0 +1,88 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+.utrecht-link {
+  color: var(--utrecht-link-color, blue);
+  text-decoration: var(--utrecht-link-text-decoration, underline);
+}
+
+.utrecht-link:visited,
+.utrecht-link--visited {
+  color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
+}
+
+.utrecht-link:hover,
+.utrecht-link--hover {
+  color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
+  text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
+}
+
+.utrecht-link:active,
+.utrecht-link--active {
+  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
+}
+
+.utrecht-link:focus,
+.utrecht-link--focus {
+  background-color: var(--utrecht-focus-background-color);
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  color: var(--utrecht-focus-color, inherit);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: 0;
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
+  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
+}
+
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-link--telephone {
+  white-space: nowrap;
+}
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-contact-card {
+  --utrecht-document-color: currentColor;
+  --utrecht-heading-color: currentColor;
+  --utrecht-link-color: currentColor;
+  --utrecht-link-focus-color: currentColor;
+  --utrecht-link-hover-color: currentColor;
+  --utrecht-link-active-color: currentColor;
+  --utrecht-link-visited-color: currentColor;
+  --utrecht-heading-2-text-transform: uppercase;
+  --utrecht-heading-2-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-contact-card-background-color: hsl(207 60% 91%);
+  --utrecht-contact-card-background-color-2: hsl(207 60% 96%);
+  background-color: #dae9f6;
+  background-image: linear-gradient(45deg, var(--utrecht-contact-card-background-color), var(--utrecht-contact-card-background-color) 50%, var(--utrecht-contact-card-background-color-2) 50%, var(--utrecht-contact-card-background-color-2));
+  background-position-x: 66%;
+  background-size: 200%;
+  color: var(--utrecht-color-black);
+  padding-block-end: var(--utrecht-space-block-lg);
+  padding-block-start: var(--utrecht-space-block-lg);
+  padding-inline-end: var(--utrecht-space-inline-lg);
+  padding-inline-start: var(--utrecht-space-inline-lg);
+}
+
+.utrecht-contact-card__content {
+  display: flex;
+  flex-direction: row;
+}
+
+.utrecht-contact-card__section {
+  margin-block-start: var(--utrecht-space-row-lg);
+  width: 100%;
+}
+
+.utrecht-contact-card__telephone {
+  --utrecht-paragraph-font-size: var(--utrecht-typography-scale-2xl-font-size);
+}