@postnord/web-components/collection/components/layout/pn-header/pn-header.css

PostNord Web Components

/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-header {
  display: block;
}
pn-header h1 {
  color: #2d2013;
  margin: 0;
}
pn-header p {
  color: #5e554a;
  margin: 0;
}

pn-header .pn-header-breadcrumbs {
  width: 100%;
}
pn-header .pn-header-container {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(1em, 3vw, 2em) clamp(0.5em, 3vw, 2em);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5em;
}
pn-header .pn-header-container > pn-text-link {
  display: block;
}
pn-header .pn-header-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
pn-header .pn-header [slot=buttons] {
  display: flex;
  flex-direction: column;
  gap: 1em;
}