@utrecht/web-component-library-stencil/dist/collection/components/page-header.css

Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
:host {
  background-color: var(--utrecht-page-header-background-color);
  border-block-end-color: var(--utrecht-page-header-border-block-end-color, currentColor);
  border-block-end-style: solid;
  border-block-end-width: var(--utrecht-page-header-border-block-end-width, 0);
  box-sizing: border-box;
  color: var(--utrecht-page-header-color);
  display: grid;
  grid-area: "utrecht-header";
  inline-size: 100%;
  padding-block-end: var(--utrecht-page-header-padding-block-end);
  padding-block-start: var(--utrecht-page-header-padding-block-start);
  padding-inline-end: var(--utrecht-page-padding-inline-end);
  padding-inline-start: var(--utrecht-page-padding-inline-start);
}

header {
  background-color: var(--utrecht-page-header-content-background-color);
  box-sizing: border-box;
  color: var(--utrecht-page-header-content-color);
  inline-size: 100%;
  justify-self: center;
  max-inline-size: var(--utrecht-page-header-content-max-inline-size);
  padding-block-end: var(--utrecht-page-header-content-padding-block-end);
  padding-block-start: var(--utrecht-page-header-content-padding-block-start);
  padding-inline: var(--utrecht-page-header-content-padding-inline);
}

:host([hidden]) {
  display: none !important;
}