@utrecht/web-component-library-stencil 1.0.0-alpha.21 → 1.0.0-alpha.212

package/dist/collection/pagination/web-component/index.css

@@ -0,0 +1,118 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.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--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 {
+  --utrecht-pagination-page-link-background-color: var(--utrecht-pagination-page-link-current-background-color);
+  --utrecht-pagination-page-link-border-color: var(--utrecht-pagination-page-link-current-border-color);
+  --utrecht-pagination-page-link-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__relative-link:focus {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-pagination__page-link:focus:not(:focus-visible),
+.utrecht-pagination__relative-link:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/pagination/web-component/index.stencil.js

@@ -0,0 +1,110 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h, Prop } 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 {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.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/pagination/web-component/template.js

@@ -0,0 +1,7 @@
+const attr = (name, value) => `${name}="${String(value).replace(/"/g, '"')}"`;
+
+export const Pagination = ({ currentIndex = -1, links = [], next = null, prev = null }) =>
+  `<utrecht-pagination ${attr('links', JSON.stringify(links))} ${attr('next', JSON.stringify(next))} ${attr(
+    'prev',
+    JSON.stringify(prev),
+  )} ${attr('current-index', currentIndex)}></utrecht-pagination>`;

package/dist/collection/paragraph/css/template.js

@@ -0,0 +1,22 @@
+/**
+ * @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>`;
+
+export const Paragraphs = ({ textContent = '' }) =>
+  `<p class="utrecht-paragraph utrecht-paragraph--lead">${textContent}</p>
+<p class="utrecht-paragraph">${textContent}</p>
+<p class="utrecht-paragraph">${textContent}</p>`;

package/dist/collection/paragraph/html/template.js

@@ -0,0 +1,11 @@
+export const Paragraph = ({ textContent = '', lead = false }) =>
+  `<section class="utrecht-html">
+  <p${lead ? ' class="lead"' : ''}>${textContent}</p>
+</section>`;
+
+export const Paragraphs = ({ textContent = '' }) =>
+  `<section class="utrecht-html">
+  <p class="lead">${textContent}</p>
+  <p>${textContent}</p>
+  <p>${textContent}</p>
+</section>`;

package/dist/collection/paragraph/{bem.css → web-component/index.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);
+  color: var(--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 → web-component/index.stencil.js}

@@ -1,17 +1,17 @@
-import { Component, Prop, h } from "@stencil/core";
-import clsx from "clsx";
+import { Component, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
 export class Paragraph {
   render() {
-    return (h("div", { class: clsx("utrecht-paragraph", this.lead && "utrecht-paragraph--lead") },
+    return (h("div", { class: clsx('utrecht-paragraph', this.lead && 'utrecht-paragraph--lead') },
       h("slot", null)));
   }
   static get is() { return "utrecht-paragraph"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "lead": {

package/dist/collection/paragraph/web-component/template.js

@@ -0,0 +1,12 @@
+export const defaultArgs = {
+  lead: false,
+  textContent: '',
+};
+
+export const Paragraph = ({ lead = false, textContent = '' }) =>
+  `<utrecht-paragraph ${lead ? 'lead="true"' : ''}">${textContent}</p>`;
+
+export const Paragraphs = ({ textContent = '' }) =>
+  `<utrecht-paragraph lead="true">${textContent}</utrecht-paragraph>
+<utrecht-paragraph">${textContent}</utrecht-paragraph>
+<utrecht-paragraph">${textContent}</utrecht-paragraph>`;

package/dist/collection/pre-heading/css/template.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/css/template.js

@@ -0,0 +1,19 @@
+/**
+ * @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',
+    'utrecht-radio-button--html-input',
+    checked && 'utrecht-radio-button--checked',
+    disabled && 'utrecht-radio-button--disabled',
+  )}">`;

package/dist/collection/radio-button/html/template.js

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+  invalid: false,
+  required: false,
+  value: '',
+};
+
+export const RadioButton = ({ checked = false, disabled = false, invalid = false, required = false, value = '' }) =>
+  `<div class="utrecht-html">
+  <input type="radio"${checked ? ' checked' : ''}${invalid ? ' aria-invalid="true"' : ''}${
+    disabled ? ' disabled' : ''
+  }${required ? ' required' : ''}${value ? ` value="${value}"` : ''}>
+</div>`;

package/dist/collection/search-bar/css/template.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/css/template.js

@@ -0,0 +1,39 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+const exampleOptions = [
+  { value: '1', label: 'Option #1' },
+  { value: '2', label: 'Option #2', selected: true },
+  { value: '3', label: 'Option #3' },
+];
+
+export const defaultArgs = {
+  disabled: false,
+  focus: false,
+  invalid: false,
+  options: exampleOptions,
+  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--html-select', {
+    'utrecht-select--disabled': disabled,
+    'utrecht-select--focus': focus,
+    'utrecht-select--focus-visible': 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>`;

package/dist/collection/select/html/template.js

@@ -0,0 +1,26 @@
+const exampleOptions = [
+  { value: '1', label: 'Option #1' },
+  { value: '2', label: 'Option #2', selected: true },
+  { value: '3', label: 'Option #3' },
+];
+
+export const defaultArgs = {
+  disabled: false,
+  invalid: false,
+  required: false,
+  options: exampleOptions,
+};
+
+export const Select = ({ disabled = false, invalid = false, options = [], required = false }) =>
+  `<section class="utrecht-html">
+  <select${invalid ? ' aria-invalid="true"' : ''}${disabled ? ' disabled' : ''}${
+    required ? ' required' : ''
+  } class="utrecht-select">
+    ${options
+      .map(
+        ({ label, selected, value }) =>
+          `<option${selected ? ' selected' : ''}${value ? ` value="${value}"` : ''}>${label}</option>`,
+      )
+      .join('\n    ')}
+  </select>
+</section>`;

package/dist/collection/separator/css/template.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/html/template.js

@@ -0,0 +1,4 @@
+export const Separator = () =>
+  `<section class="utrecht-html">
+  <hr>
+</section>`;

package/dist/collection/separator/{bem.css → web-component/index.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 → web-component/index.stencil.js}

@@ -1,4 +1,4 @@
-import { Component, h } from "@stencil/core";
+import { Component, h } from '@stencil/core';
 export class Separator {
   render() {
     return h("hr", { class: "utrecht-separator" });
@@ -6,9 +6,9 @@ export class Separator {
   static get is() { return "utrecht-separator"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/separator/web-component/template.js

@@ -0,0 +1 @@
+export const Separator = () => `<utrecht-separator></utrecht-separator>`;

package/dist/collection/surface/css/template.js

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const Surface = ({ innerHTML = '' }) => `<div class="${clsx('utrecht-surface')}">${innerHTML}</div>`;

package/dist/collection/table/html/template.js

@@ -0,0 +1,41 @@
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  alternateRowColor: false,
+};
+
+// Source of table:
+// https://www.utrecht.nl/wonen-en-leven/parkeren/ervaart-u-parkeeroverlast/spinozaplantsoen-invoeren-betaald-parkeren/
+
+export const Table = ({ alternateRowColor = false }) =>
+  `<div class="utrecht-html">
+<table lang="nl" summary="Overzicht van de stemmen voor en tegen het betaald parkeren." class="${clsx(
+    alternateRowColor && 'alternate-row-color',
+  )}">
+  <caption>Uitslag internetpeiling 8 juni tot en met 28 juni</caption>
+  <thead>
+    <tr>
+      <th scope="col">Gebied</th>
+      <th scope="col" class="numeric">Voor</th>
+      <th scope="col" class="numeric">Tegen</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Locatie A</td>
+      <td class="numeric">53</td>
+      <td class="numeric">113</td>
+    </tr>
+    <tr>
+      <td>Locatie B</td>
+      <td class="numeric">58</td>
+      <td class="numeric">42</td>
+    </tr>
+    <tr>
+      <td>Locatie C</td>
+      <td class="numeric">87</td>
+      <td class="numeric">16</td>
+    </tr>
+  </tbody>
+</table>
+  </div>`;

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

@@ -0,0 +1,30 @@
+export const ContactCardTemplate = () => `<div class="utrecht-contact-card">
+  <h2 class="utrecht-heading-2">Hulp en contact</h2>
+  <div class="utrecht-contact-card__content">
+    <div class="utrecht-contact-card__section">
+      <h3 class="utrecht-heading-3">Telefoon</h3>
+      <p class="utrecht-contact-card__telephone utrecht-paragraph">
+        <a
+          href="tel:14-030"
+          class="utrecht-link utrecht-link--telephone"
+          title="Telefoonnummer van gemeente Utrecht"
+        >
+          14 030
+        </a>
+      </p>
+      <p class="utrecht-paragraph">Maandag t/m vrijdag 8.30 – 17.30 uur</p>
+    </div>
+    <div class="utrecht-contact-card__section">
+      <h3 class="utrecht-heading-3">E-mail</h3>
+      <p class="utrecht-paragraph">
+        <a
+          class="utrecht-link"
+          href="https://www.utrecht.nl/reactieformulier"
+          title="Algemeen reactieformulier van de gemeente Utrecht"
+        >
+          reactieformulier
+        </a>
+      </p>
+    </div>
+  </div>
+</div>`;