@rijkshuisstijl-community/components-css 1.0.0-alpha.8 → 1.0.0-alpha.81

package/src/card/index.scss

@@ -0,0 +1,108 @@
+@use "mixin";
+
+.rhc-card {
+  @include mixin.rhc-card;
+  .utrecht-img:not(img[width]) {
+    block-size: 100%;
+    inline-size: 100%;
+  }
+}
+
+.rhc-card div:empty {
+  @include mixin.rhc-card__empty-element;
+}
+
+.rhc-card--default {
+  @include mixin.rhc-card--default;
+}
+
+.rhc-card--full-bleed {
+  @include mixin.rhc-card--full-bleed;
+}
+
+.rhc-card--horizontal {
+  @include mixin.rhc-card--horizontal;
+}
+
+.rhc-card__footer {
+  @include mixin.rhc-card__content;
+}
+.rhc-card__image {
+  @include mixin.rhc-card__image;
+}
+
+.rhc-card__heading {
+  @include mixin.rhc-card__heading;
+}
+
+.rhc-card__icon {
+  @include mixin.rhc-card__icon;
+}
+
+.rhc-card__metadata {
+  @include mixin.rhc-card__metadata;
+}
+
+.rhc-card__content {
+  @include mixin.rhc-card__content;
+}
+
+.rhc-card--horizontal .rhc-card__content {
+  @include mixin.rhc-card--horizontal__content;
+}
+
+.rhc-card--horizontal .rhc-card__heading {
+  @include mixin.rhc-card--horizontal__heading;
+}
+
+.rhc-card--horizontal .rhc-card__image {
+  @include mixin.rhc-card--horizontal__image;
+}
+
+.rhc-card--full-bleed .rhc-card__footer {
+  @include mixin.rhc-card--full-bleed__footer;
+}
+
+.rhc-card--full-bleed .rhc-card__image {
+  @include mixin.rhc-card--full-bleed__image;
+}
+
+.rhc-card__link {
+  @include mixin.rhc-card__link;
+}
+
+.rhc-card:active {
+  @include mixin.rhc-card--active;
+}
+
+.rhc-card:active .rhc-card__heading {
+  @include mixin.rhc-card__heading--active;
+}
+
+.rhc-card:active .rhc-card__link {
+  @include mixin.rhc-card__link--active;
+}
+
+.rhc-card--default:focus {
+  @include mixin.rhc-card--default--focus;
+}
+
+.rhc-card:focus .rhc-card__heading {
+  @include mixin.rhc-card__heading--active;
+}
+
+.rhc-card:focus .rhc-card__link {
+  @include mixin.rhc-card__link--focus;
+}
+
+.rhc-card--default:hover {
+  @include mixin.rhc-card--default--hover;
+}
+
+.rhc-card:hover .rhc-card__heading {
+  @include mixin.rhc-card__heading--active;
+}
+
+.rhc-card:hover .rhc-card__link {
+  @include mixin.rhc-card__link--hover;
+}

package/src/checkbox/_mixin.scss

@@ -0,0 +1,103 @@
+@mixin utrecht-checkbox--checked {
+  background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="white"/></svg>');
+}
+
+@mixin utrecht-checkbox--disabled {
+  background-color: var(--utrecht-checkbox-disabled-background-color);
+  border-color: var(--utrecht-checkbox-disabled-border-color);
+  cursor: var(--utrecht-action-disabled-cursor, revert);
+}
+
+@mixin utrecht-checkbox--invalid {
+  background-color: var(--utrecht-checkbox-invalid-background-color);
+  border-color: var(--utrecht-checkbox-invalid-border-color);
+}
+
+@mixin utrecht-checkbox--checked--active {
+  background-color: var(--utrecht-checkbox-checked-active-background-color);
+  border-color: var(--utrecht-checkbox-checked-active-border-color);
+}
+
+@mixin utrecht-checkbox--checked--hover {
+  background-color: var(--utrecht-checkbox-checked-hover-background-color);
+  background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="white"/></svg>');
+  border-color: var(--utrecht-checkbox-checked-hover-border-color);
+}
+@mixin utrecht-checkbox--checked--disabled {
+  background-color: var(--utrecht-checkbox-disabled-background-color);
+  background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="%23475569"/></svg>');
+}
+
+@mixin utrecht-checkbox--indeterminate--active {
+  background-color: var(--utrecht-checkbox-indeterminate-active-background-color);
+  border-color: var(--utrecht-checkbox-indeterminate-active-border-color);
+}
+
+@mixin utrecht-checkbox--indeterminate--hover {
+  background-color: var(--utrecht-checkbox-indeterminate-hover-background-color);
+  border-color: var(--utrecht-checkbox-indeterminate-hover-border-color);
+}
+
+@mixin utrecht-checkbox--indeterminate--focus {
+  background-color: var(--utrecht-checkbox-indeterminate-focus-background-color);
+  background-image: url('data:image/svg+xml,<svg  width="16" height="4" viewBox="0 0 16 4"   fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1C16 1.55228 15.5523 2 15 2H1C0.447715 2 0 1.55228 0 1Z" fill="%23154273"/></svg>');
+  border-color: var(--utrecht-checkbox-indeterminate-focus-border-color);
+}
+
+@mixin utrecht-checkbox--indeterminate--disabled {
+  background-color: var(--utrecht-checkbox-indeterminate-disabled-background-color);
+  background-image: url('data:image/svg+xml,<svg width="16" height="4" viewBox="0 0 16 4"  fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1C16 1.55228 15.5523 2 15 2H1C0.447715 2 0 1.55228 0 1Z" fill="%23154273"/></svg>');
+  border-color: var(--utrecht-checkbox-indeterminate-disabled-border-color);
+}
+@mixin utrecht-custom-checkbox--html-input {
+  &:checked {
+    @include utrecht-checkbox--checked;
+    &:active {
+      @include utrecht-checkbox--checked--active;
+    }
+    &:hover {
+      @include utrecht-checkbox--checked--hover;
+    }
+    &:disabled {
+      @include utrecht-checkbox--checked--disabled;
+    }
+    &:focus {
+      background-color: var(--utrecht-checkbox-checked-focus-background-color);
+      background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="%23154273"/></svg>');
+      border-color: var(--utrecht-checkbox-checked-focus-border-color);
+      border-width: var(--utrecht-checkbox-checked-focus-border-width);
+    }
+    &:focus-visible {
+      background-color: var(--utrecht-checkbox-checked-focus-background-color);
+      background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="%23154273"/></svg>');
+      border-color: var(--utrecht-checkbox-checked-focus-border-color);
+      border-width: var(--utrecht-checkbox-checked-focus-border-width);
+    }
+  }
+  &:disabled:hover {
+    @include utrecht-checkbox--disabled;
+  }
+}
+@mixin utrecht-checkbox--indeterminate {
+  &:indeterminate,
+  &:checked:indeterminate {
+    background-image: url('data:image/svg+xml,<svg width="16" height="4" viewBox="0 0 16 4"  fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1C16 1.55228 15.5523 2 15 2H1C0.447715 2 0 1.55228 0 1Z" fill="white"/></svg>');
+    background-position: center;
+    background-size: 16px 4px;
+  }
+  &:indeterminate {
+    &:active {
+      @include utrecht-checkbox--indeterminate--active;
+    }
+    &:hover {
+      @include utrecht-checkbox--indeterminate--hover;
+    }
+
+    &:focus {
+      @include utrecht-checkbox--indeterminate--focus;
+    }
+    &:disabled {
+      @include utrecht-checkbox--indeterminate--disabled;
+    }
+  }
+}

package/src/checkbox/index.scss

@@ -0,0 +1,34 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@use "mixin";
+
+.utrecht-checkbox {
+  margin-block-start: var(--rhc-space-50);
+  &--disabled {
+    @include mixin.utrecht-checkbox--disabled;
+  }
+  &--invalid {
+    @include mixin.utrecht-checkbox--invalid;
+  }
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input,
+.utrecht-custom-checkbox--html-input {
+  @include mixin.utrecht-custom-checkbox--html-input;
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate {
+  @include mixin.utrecht-checkbox--indeterminate;
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid="true"]:hover {
+  @include mixin.utrecht-checkbox--invalid;
+}
+
+.rhc-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  padding-block-end: var(--rhc-checkbox-group-padding-block-end);
+  padding-block-start: var(--rhc-checkbox-group-padding-block-start);
+  row-gap: var(--rhc-checkbox-group-row-gap);
+}

package/src/dot-badge/_mixin.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@mixin rhc-dot-badge {
+  block-size: var(--rhc-dot-badge-size, var(--rhc-size-quarter-lint));
+  border-radius: var(--rhc-dot-badge-border-radius, var(--rhc-border-radius-circle));
+  color: var(--rhc-dot-badge-color, var(--rhc-color-rood-500));
+  display: inline-block;
+  inline-size: var(--rhc-dot-badge-inline-size, var(--rhc-size-quarter-lint));
+}

package/src/dot-badge/index.scss

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+@use "mixin";
+
+.rhc-dot-badge {
+  @include mixin.rhc-dot-badge;
+}

package/src/figure/index.scss

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.utrecht-figure img {
+  border-end-end-radius: var(--utrecht-figure-img-border-end-end-radius);
+  border-end-start-radius: var(--utrecht-figure-img-border-end-start-radius);
+  border-start-end-radius: var(--utrecht-figure-img-border-start-end-radius);
+  border-start-start-radius: var(--utrecht-figure-img-border-start-start-radius);
+}
+
+.utrecht-figure__caption {
+  border-inline-start: var(--utrecht-figure-caption-border-width) solid var(--utrecht-figure-caption-border-color);
+  padding-block-end: var(--utrecht-figure-caption-padding-block-end);
+  padding-block-start: var(--utrecht-figure-caption-padding-block-start);
+  padding-inline-start: var(--utrecht-figure-caption-padding-inline-start);
+}

package/src/file-input/index.scss

@@ -0,0 +1,49 @@
+.rhc-file-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rhc-file-input-column-gap);
+}
+
+.rhc-file-input__item {
+  border-color: var(--rhc-file-input-item-border-color);
+  border-radius: var(--rhc-file-input-item-border-radius);
+  border-style: var(--rhc-file-input-item-border-style);
+  display: flex;
+  flex-direction: column;
+  padding-block-end: var(--rhc-file-input-item-padding-block-end);
+  padding-block-start: var(--rhc-file-input-item-padding-block-start);
+  padding-inline-end: var(--rhc-file-input-item-padding-inline-end);
+  padding-inline-start: var(--rhc-file-input-item-padding-inline-start);
+}
+
+.rhc-file-input__item--error {
+  border-color: var(--rhc-file-input-item-error-border-color);
+}
+
+.rhc-file-input__item--subtitle {
+  color: var(--rhc-file-input-item-subtitle-color);
+}
+
+.rhc-file-input__items-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rhc-file-input-item-column-gap);
+}
+
+.rhc-file-input__inner-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.rhc-file-input__inner-container__sub {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.rhc-file-input__item--name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/footer/index.scss

@@ -0,0 +1,71 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+.rhc-page-footer {
+  --utrecht-space-around: 1;
+  --utrecht-link-hover-text-decoration: underline;
+  --_utrecht-link-state-text-decoration-color: currentColor;
+  --utrecht-column-layout-gap: var(--rhc-page-footer-column-gap);
+  --utrecht-column-layout-column-width: var(--rhc-page-footer-column-width);
+  --utrecht-heading-1-color: currentColor;
+  --utrecht-heading-2-color: currentColor;
+  --utrecht-heading-3-color: currentColor;
+  --utrecht-heading-4-color: currentColor;
+  --utrecht-heading-5-color: currentColor;
+  --utrecht-heading-6-color: currentColor;
+
+  display: flex;
+  flex-direction: var(--rhc-page-footer-flex-direction);
+  justify-content: center;
+
+  :is(h1, h2, h3, h4, h5, h6) {
+    margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
+  }
+}
+
+.rhc-page-footer--primary-filled {
+  --utrecht-page-footer-background-color: var(--rhc-color-primary-500);
+}
+
+.rhc-page-footer--primary-outlined {
+  --utrecht-page-footer-background-color: var(--rhc-color-wit);
+  --utrecht-page-footer-color: var(--rhc-color-primary-500);
+
+  border-block-start-color: var(--rhc-page-footer-border-block-start-color);
+  border-block-start-style: var(--rhc-page-footer-border-block-start-style);
+  border-block-start-width: var(--rhc-page-footer-border-block-start-width);
+}
+
+.rhc-page-footer__content {
+  column-gap: var(--rhc-page-footer-column-gap);
+  display: flex;
+  flex: 1;
+  flex-direction: var(--rhc-page-footer-flex-direction);
+  max-inline-size: var(--rhc-page-footer-content-max-inline-size);
+  padding-inline-end: var(--rhc-page-footer-content-padding-inline-end);
+  padding-inline-start: var(--rhc-page-footer-content-padding-inline-start);
+}
+
+.rhc-page-footer__section,
+.rhc-page-footer__title {
+  break-inside: avoid;
+  padding-block-end: var(--rhc-page-footer-padding-block-end);
+}
+
+.rhc-page-footer__content > * {
+  flex: 1;
+}
+
+@media (width <= 1024px) {
+  .rhc-page-footer {
+    --rhc-page-footer-flex-direction: column;
+  }
+}
+
+@media (width <= 320px) {
+  .rhc-page-footer {
+    --utrecht-page-footer-padding-inline-start: var(--rhc-page-footer-padding-inline-start);
+    --utrecht-page-footer-padding-block-start: var(--rhc-page-footer-padding-block-start);
+  }
+}

package/src/form/index.scss

@@ -0,0 +1,18 @@
+.rhc-form-label--checkbox .utrecht-form-field__label--checkbox {
+  --utrecht-form-label-font-weight: var(--rhc-font-weight-regular, 400);
+
+  align-items: flex-start;
+  display: flex;
+  margin-block-end: var(--rhc-form-field-checkbox-option-margin-block-end, inherit);
+}
+
+.utrecht-form-field__status {
+  grid-column-end: status;
+  grid-column-start: status;
+  grid-row-end: status;
+  grid-row-start: status;
+}
+
+.utrecht-form-field--checkbox {
+  grid-template-areas: "input label" "input description" "input error-message" "input status";
+}

package/src/form-field/index.scss

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.utrecht-rich-text .utrecht-form-field {
+  margin-block-end: var(--utrecht-form-field-margin-block-end);
+}
+
+.utrecht-form-field__status {
+  margin-block-end: var(--rhc-space-100, 0.5rem);
+  margin-block-start: var(--rhc-space-100, 0.5rem);
+}

package/src/form-field-error-message/index.scss

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+.utrecht-form-field-error-message {
+  &--icon-container {
+    display: flex;
+    &-icon {
+      --utrecht-icon-size: var(--utrecht-form-field-error-message-icon-size, 24px);
+
+      margin-inline-end: var(--utrecht-form-field-error-message-icon-margin-inline-end, 0.5rem);
+      min-inline-size: var(--utrecht-form-field-error-message-icon-min-width, 24px);
+    }
+  }
+}

package/src/form-field-radio-option/index.scss

@@ -0,0 +1,21 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.utrecht-form-field--radio {
+  --utrecht-form-field-label-margin-block-end: var(--rhc-form-field-radio-option-label-margin-block-end, inherit);
+  --utrecht-radio-button-margin-inline-end: var(--rhc-form-field-radio-option-column-gap, inherit);
+}
+
+.rhc-form-field-radio-option__input {
+  align-items: flex-start;
+  display: flex;
+  margin-block-start: var(--rhc-form-field-radio-option-input-margin-block-start, inherit);
+}
+
+.utrecht-form-field--radio .utrecht-form-field__label {
+  --utrecht-form-label-font-weight: var(--rhc-form-field-radio-option-font-weight, inherit);
+
+  display: inline-flex;
+}

package/src/hero/_mixin.scss

@@ -0,0 +1,103 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@mixin rhc-hero {
+  block-size: auto;
+  inline-size: var(--rhc-hero-inline-size);
+  overflow: hidden;
+  position: relative;
+}
+
+@mixin rhc-hero--aspect-ratio-16-9 {
+  aspect-ratio: 16 / 9;
+}
+
+@mixin rhc-hero--aspect-ratio-1-1 {
+  aspect-ratio: 1 / 1;
+}
+
+@mixin rhc-hero--aspect-ratio-4-3 {
+  aspect-ratio: 4 / 3;
+}
+
+@mixin rhc-hero__message {
+  background-color: var(--rhc-hero-message-background-color);
+  box-sizing: border-box;
+  color: var(--rhc-hero-message-color, inherit);
+  display: flex;
+  flex-direction: column;
+  inline-size: var(--rhc-hero-message-inline-size);
+  inset-block-end: 0;
+  padding-block-end: var(--rhc-hero-message-padding-block-end);
+  padding-block-start: var(--rhc-hero-message-padding-block-start);
+  padding-inline-end: var(--rhc-hero-message-padding-inline-end);
+  padding-inline-start: var(--rhc-hero-message-padding-inline-start);
+  position: absolute;
+  row-gap: var(--rhc-hero-message-row-gap);
+}
+
+@mixin rhc-hero__heading-group {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rhc-hero-message-heading-group-row-gap, var(--rhc-hero-message-row-gap));
+}
+
+@mixin rhc-hero--border-radius-corner-end-end {
+  border-end-end-radius: var(--rhc-hero-border-radius);
+}
+
+@mixin rhc-hero--border-radius-corner-end-start {
+  border-end-start-radius: var(--rhc-hero-border-radius);
+}
+
+@mixin rhc-hero--border-radius-corner-start-end {
+  border-start-end-radius: var(--rhc-hero-border-radius);
+}
+
+@mixin rhc-hero--border-radius-corner-start-start {
+  border-start-start-radius: var(--rhc-hero-border-radius);
+}
+
+@mixin rhc-hero__message--text-align-start {
+  border-start-end-radius: var(--rhc-hero-message-border-radius);
+  inset-inline-start: 0;
+}
+
+@mixin rhc-hero__message--text-align-end {
+  border-start-start-radius: var(--rhc-hero-message-border-radius);
+  inset-inline-end: 0;
+}
+
+@mixin rhc-hero__image {
+  block-size: auto;
+  inline-size: var(--rhc-hero-inline-size);
+  position: relative;
+}
+
+@mixin rhc-hero__heading {
+  color: currentColor;
+  font-family: var(--rhc-hero-heading-font-family);
+  font-size: var(--rhc-hero-heading-font-size);
+  font-weight: var(--rhc-hero-heading-font-weight);
+  line-height: var(--rhc-hero-heading-line-height);
+}
+
+@mixin rhc-hero__sub-heading {
+  color: currentColor;
+  font-family: var(--rhc-hero-sub-heading-font-family);
+  font-size: var(--rhc-hero-sub-heading-font-size);
+  font-weight: var(--rhc-hero-sub-heading-font-weight);
+  line-height: var(--rhc-hero-sub-heading-line-height);
+}
+
+@mixin rhc-hero__children {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  inset-block-start: 50%;
+  position: absolute;
+  row-gap: var(--rhc-hero-message-row-gap);
+  transform: translateY(-50%);
+}

package/src/hero/index.scss

@@ -0,0 +1,81 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+@use "mixin";
+
+.rhc-hero {
+  @include mixin.rhc-hero;
+}
+
+.rhc-hero--aspect-ratio-16-9 {
+  @include mixin.rhc-hero--aspect-ratio-16-9;
+}
+
+.rhc-hero--aspect-ratio-1-1 {
+  @include mixin.rhc-hero--aspect-ratio-1-1;
+}
+
+.rhc-hero--aspect-ratio-4-3 {
+  @include mixin.rhc-hero--aspect-ratio-4-3;
+}
+
+.rhc-hero__message {
+  @include mixin.rhc-hero__message;
+}
+
+.rhc-hero__children {
+  @include mixin.rhc-hero__children;
+}
+
+.rhc-hero__message .utrecht-heading-group {
+  @include mixin.rhc-hero__heading-group;
+}
+
+.rhc-hero--text-align-start:not(.rhc-hero--custom-border-radius-corner) {
+  @include mixin.rhc-hero--border-radius-corner-start-start;
+}
+
+.rhc-hero--text-align-start .rhc-hero__message {
+  @include mixin.rhc-hero__message--text-align-start;
+}
+
+.rhc-hero--text-align-end:not(.rhc-hero--custom-border-radius-corner) {
+  @include mixin.rhc-hero--border-radius-corner-start-end;
+}
+
+.rhc-hero--text-align-end .rhc-hero__message {
+  @include mixin.rhc-hero__message--text-align-end;
+}
+
+.rhc-hero--custom-border-radius-corner.rhc-hero--border-radius-corner-start-start {
+  @include mixin.rhc-hero--border-radius-corner-start-start;
+}
+
+.rhc-hero--custom-border-radius-corner.rhc-hero--border-radius-corner-start-end {
+  @include mixin.rhc-hero--border-radius-corner-start-end;
+}
+
+.rhc-hero--custom-border-radius-corner.rhc-hero--border-radius-corner-end-start {
+  @include mixin.rhc-hero--border-radius-corner-end-start;
+}
+
+.rhc-hero--custom-border-radius-corner.rhc-hero--border-radius-corner-end-end {
+  @include mixin.rhc-hero--border-radius-corner-end-end;
+}
+
+.rhc-hero__image {
+  @include mixin.rhc-hero__image;
+}
+.rhc-hero__image:not(img[height]) {
+  block-size: auto;
+  inline-size: var(--rhc-hero-inline-size);
+}
+
+.rhc-hero__heading {
+  @include mixin.rhc-hero__heading;
+}
+
+.rhc-hero__sub-heading {
+  @include mixin.rhc-hero__sub-heading;
+}