@e-fellows/website-2022

Detail-Bühne: Porträt 

<header class="detail-stage">
    <div class="detail-stage__image">
        <picture class="image image--cover" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
            <img class="image__img" src="https://bildermangel.de/1440x525/fe7c09/130f26.webp?text=1440x525" width="1440" height="450" alt="Das ist ein Platzhalter-Bild" loading="lazy" fetchpriority="high" />
        </picture>
    </div>

    <div class="detail-stage__inner">
        <div class="detail-stage__top">
            <div class="detail-stage__breadcrumb">
                <nav class="breadcrumb" aria-label="Deine aktuelle Position:">
                    <ul class="breadcrumb__list u-line-clamp">
                        <li class="breadcrumb__item"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__icon"><svg class="icon icon--home" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#home"></use>
                                    </svg></span><span class="breadcrumb__link-text u-hidden-visually">Startseite</span></a></li>
                        <li class="breadcrumb__item"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__link-text">Unternehmen</span></a></li>
                        <li class="breadcrumb__item"><a class="breadcrumb__link u-underline" aria-current="page"><span class="breadcrumb__link-text">Unternehmen XY</span></a></li>
                    </ul>

                    <script type="application/ld+json">
                        {
                            "@context": "https:\/\/schema.org",
                            "@type": "BreadcrumbList",
                            "itemListElement": [{
                                    "@type": "ListItem",
                                    "position": 1,
                                    "name": "Startseite",
                                    "item": "#"
                                },
                                {
                                    "@type": "ListItem",
                                    "position": 2,
                                    "name": "Unternehmen",
                                    "item": "#"
                                },
                                {
                                    "@type": "ListItem",
                                    "position": 3,
                                    "name": "Unternehmen XY",
                                    "item": "#"
                                }
                            ]
                        }
                    </script>
                </nav>
            </div>

            <img src="https://bildermangel.de/250x125/130f26/fe7c09.webp" width="250" height="125" class="detail-stage__logo" loading="lazy" role="presentation" alt="">

        </div>

        <div class="detail-stage__content">
            <div class="detail-stage__content-block">
                <div class="detail-stage__headline">
                    <h2 class="headline headline--2"><span class="headline__kicker">Karriere &amp; Einstieg<span class="u-hidden-visually">: </span></span><span class="headline__text">Unternehmen XY</span></h2>
                </div>

            </div>

        </div>
    </div>
</header>
 
{% set level = level ??? 2 -%}

<header {{ html_attributes({
  id: id ?? false,
  class: 'detail-stage',
}, attrs ?? {}) }}>
  <div class="detail-stage__image">
    {%- if image|default %}
      {% include '@image' with image | merge({
        fetchpriority: 'high',
        cover: true,
      }) only %}
    {% endif -%}
  </div>

  <div class="detail-stage__inner">
    <div class="detail-stage__top">
      {% if breadcrumb|default %}
        <div class="detail-stage__breadcrumb">
          {% include '@breadcrumb' with breadcrumb only %}
        </div>
      {% endif %}

      {% if logo|default %}
        <img {{ html_attributes({
          src: logo.src,
          srcset: logo.srcset ?? false,
          width: logo.width ?? false,
          height: logo.height ?? false,
          class: 'detail-stage__logo',
          loading: 'lazy',
          role: 'presentation',
          alt: '',
        }) }}>
      {% endif %}

      {% if hintBoxes|default %}
        <div class="detail-stage__hint-boxes">
          {% for hintBox in hintBoxes|default %}
            <div class="detail-stage__hint-box">
              {% include '@hint-box' with hintBox | merge({
                inverted: loop.index is odd,
              }) only %}
            </div>
          {% endfor %}
        </div>
      {% endif %}
    </div>

    <div class="detail-stage__content">
      <div class="detail-stage__content-block">
        {% if headline|default %}
          <div class="detail-stage__headline">
            {% include '@headline' with headline | merge({
              level: level,
              size: 2,
            }) only %}
          </div>
        {% endif %}

        {% if text|default %}
          <div class="detail-stage__text">
            {{ text | componentize }}
          </div>
        {% endif %}

        {% if buttons|default %}
          <div class="detail-stage__buttons">
            {% for button in buttons %}
              {% include '@button' with button | merge({
                outline: not loop.first,
              }) only %}
            {% endfor %}
          </div>
        {% endif %}
      </div>

      {% if details|default %}
        <dl class="detail-stage__details">
          {% for detail in details %}
            <div class="detail-stage__detail">
              <dt class="detail-stage__detail-label">
                {{- detail.label -}}
              </dt>

              <dd class="detail-stage__detail-text">
                {{- detail.text | componentize -}}
              </dd>
            </div>
          {% endfor %}
        </dl>
      {% endif %}
    </div>
  </div>
</header>
 
{
  "image": {
    "src": "https://bildermangel.de/1440x525/fe7c09/130f26.webp?text=1440x525",
    "width": 1440,
    "height": 450,
    "alt": "Das ist ein Platzhalter-Bild",
    "placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC"
  },
  "breadcrumb": {
    "items": [
      {
        "text": "Startseite",
        "link": "#"
      },
      {
        "text": "Unternehmen",
        "link": "#"
      },
      {
        "text": "Unternehmen XY",
        "link": "#"
      }
    ]
  },
  "logo": {
    "src": "https://bildermangel.de/250x125/130f26/fe7c09.webp",
    "width": 250,
    "height": 125,
    "alt": "Partnerlogo"
  },
  "headline": {
    "kicker": "Karriere & Einstieg",
    "text": "Unternehmen XY"
  }
}
  • Content: 
    @use 'sass:map';

:root {
  --detail-stage-background-color: transparent;
  --detail-stage-image-aspect-ratio: #{1440 / 440};
  --detail-stage-image-fallback-aspect-ratio: #{1440 / 250};
  --detail-stage-image-fallback-background-color: #{rgba(#000, 0.05)};
  --detail-stage-image-max-width: #{$inner-container-max-width};
}

.detail-stage {
  background-color: var(--detail-stage-background-color);
}

.detail-stage__image {
  aspect-ratio: var(--detail-stage-image-aspect-ratio);
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-inline-size: var(--detail-stage-image-max-width);

  &:empty {
    aspect-ratio: var(--detail-stage-image-fallback-aspect-ratio);
    background-color: var(--detail-stage-image-fallback-background-color);
  }
}

.detail-stage__inner {
  position: relative;

  @include use-container();
}

.detail-stage__top {
  position: relative;
  z-index: 2;

  @include use-responsive-sizing(--detail-stage-top-height, (
    m: 8rem,
    l: 10rem,
  ));

  @include mq($from: m) {
    display: flex;
    margin-block-start: calc(var(--detail-stage-top-height) * -1);
  }
}

.detail-stage__breadcrumb {
  padding-block-start: 2rem;

  &::before {
    background-color: var(--detail-stage-background-color);
    block-size: 100%;
    content: '';
    inline-size: 100vw;
    inset-block: 0;
    inset-inline-start: -100vw;
    position: absolute;
  }

  @include mq($from: m) {
    align-items: center;
    background-color: var(--detail-stage-background-color);
    block-size: var(--detail-stage-top-height);
    display: flex;
    min-inline-size: 50%;
    padding-block-start: 0;
    padding-inline-end: calc(var(--gap) * 0.5);
  }

  @include mq($from: l) {
    flex-shrink: 0;
  }
}

.detail-stage__logo {
  block-size: 7.5rem;
  inline-size: auto;
  margin-block-start: 2rem;

  @include mq($from: m) {
    block-size: var(--detail-stage-top-height);
    margin-block-start: 0;
  }
}

.detail-stage__hint-boxes {
  display: flex;

  @include mq($until: m) {
    inset-block-start: 0;
    position: absolute;
    transform: translate(calc(var(--body-padding) * -1), -100%);
  }
}

.detail-stage__hint-box {
  &:nth-child(even) {
    --hint-box-background-color: var(--color-orange-light);
    --hint-box-text-color: var(--color-midnight);
  }

  @include use-responsive-sizing(--hint-box-font-size, (
    xs: 1.6rem,
    l: 1.8rem,
  ));
  @include use-responsive-sizing(--hint-box-height, (
    xs: 8rem,
    m: #{var(--detail-stage-top-height)},
  ));
  @include use-responsive-sizing(--hint-box-padding-inline, (
    xs: map.get($inner-container-padding, xs),
    s: map.get($inner-container-padding, s),
    m: map.get($gaps, m) * 0.5,
    l: map.get($gaps, l) * 0.5,
    xl: map.get($gaps, xl) * 0.5,
  ));
  @include use-responsive-sizing(--hint-box-min-width, (
    m: 17rem,
  ));
}

.detail-stage__content {
  display: grid;
  grid-auto-rows: auto;

  @include use-responsive-sizing(padding-block row-gap, responsive-map(xs 2.5rem, l 7.5rem));
  @include use-responsive-sizing(column-gap, $gaps);
  @include use-responsive-sizing(grid-template-columns, (xs: 1fr, m: 1fr 1fr));
}

.detail-stage__headline {
  @include use-responsive-sizing(margin-block-end, responsive-map(xs 2rem, xl 4rem));
}

.detail-stage__text {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: var(--line-height-default);
  margin-block-start: 3rem;
}

.detail-stage__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.detail-stage__details {
  font-size: 1.3rem;
  gap: 3rem;
  line-height: 1.7;
  margin-block: -1rem;

  @include mq($from: s) {
    column-count: 2;
  }
}

.detail-stage__detail {
  break-inside: avoid;
  padding-block: 1rem;
}

.detail-stage__detail-label {
  display: block;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.detail-stage__detail-text {
  > * + * {
    margin-block-start: 1rem;
  }
}
  • URL: /components/raw/detail-stage/detail-stage.scss
  • Filesystem Path: src/components/3-organisms/detail-stage/detail-stage.scss
  • Size: 3.9 KB

No notes defined.