@e-fellows/website-2022

Bühne: Center Stage ohne Bild 

<header class="stage stage--center">
    <div class="stage__inner">
        <div class="stage__content">
            <div class="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">Unterseite</span></a></li>
                        <li class="breadcrumb__item"><a class="breadcrumb__link u-underline" aria-current="page"><span class="breadcrumb__link-text">Artikel</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": "Unterseite",
                                    "item": "#"
                                },
                                {
                                    "@type": "ListItem",
                                    "position": 3,
                                    "name": "Artikel",
                                    "item": "#"
                                }
                            ]
                        }
                    </script>
                </nav>
            </div>

            <div class="stage__text-container">
                <div class="stage__headline">
                    <h2 class="headline headline--2"><span class="headline__text u-line-clamp">Titel mit etwa 75 Zeichen auf maximal vier Zeilen, danach wird ausgepunktet</span></h2>
                </div>

            </div>

        </div>

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

<header {{ html_attributes({
  id: id ?? false,
  class: {
    'stage': true,
    'stage--center': center ?? false,
  },
}) }}>
  <div class="stage__inner">
    <div class="stage__content">
      {% if breadcrumb|default %}
        <div class="stage__breadcrumb">
          {% include '@breadcrumb' with breadcrumb only %}
        </div>
      {% endif %}

      {% if headline|default or text|default %}
        <div class="stage__text-container">
          {% if headline|default %}
            <div class="stage__headline">
              {% include '@headline' with headline | merge({
                level: level,
                size: 2,
                clampLines: true,
              }) only %}
            </div>
          {% endif %}

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

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

      {% if details|default %}
        <dl class="stage__details">
          {% for detail in details %}
            <div class="stage__detail">
              {% if detail.icon|default %}
                <dt class="stage__detail-label">
                  {% include '@icon' with {
                    icon: detail.icon,
                    title: detail.label,
                  } only %}
                </dt>
              {% else %}
                <dt class="u-hidden-visually">
                  {{- detail.label -}}
                </dt>
              {% endif %}

              {% if detail.text|default %}
                <dd class="stage__detail-text">
                  {{- detail.text | componentize -}}
                </dd>
              {% endif %}
            </div>
          {% endfor %}
        </dl>
      {% endif %}
    </div>

    {% if image|default or logo|default %}
      <div class="stage__image-container">
        {% if image|default %}
          <figure class="stage__image">
            {% include '@image' with image | merge({
              fetchpriority: 'high',
              disablePlaceholder: center ?? false,
            }) only %}

            {% if copyright|default or image.copyright|default %}
              <figcaption class="stage__copyright">
                {% include '@copyright' with {
                  text: copyright ??? image.copyright,
                } only %}
              </figcaption>
            {% endif %}
          </figure>
        {% endif %}

        {% if logo|default %}
          <div class="stage__logo">
            {% include '@image' with logo only %}
          </div>
        {% endif %}
      </div>
    {% endif %}
  </div>
</header>
 
{
  "breadcrumb": {
    "items": [
      {
        "text": "Startseite",
        "link": "#"
      },
      {
        "text": "Unterseite",
        "link": "#"
      },
      {
        "text": "Artikel",
        "link": "#"
      }
    ]
  },
  "headline": {
    "text": "Titel mit etwa 75 Zeichen auf maximal vier Zeilen, danach wird ausgepunktet"
  },
  "center": true,
  "color": "red"
}
  • Content: 
    $stage-switch-breakpoint: 600px;

:root {
  --stage-background-color: transparent;
  --stage-logo-width: 40rem;
  --stage-logo-height: 30rem;
  --stage-min-height: 0;
  --stage-content-align: flex-start;

  @include use-responsive-sizing(--stage-image-size, (
    xs: 100%,
    ($stage-switch-breakpoint): 40%,
    m: 45%,
    l: 50%,
  ));
}

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

.stage--center {
  --stage-content-align: center;

  @include use-responsive-sizing(--stage-min-height, (xs: 37.5rem, xl: 45rem));
}

.stage__inner {
  display: grid;
  grid-auto-rows: auto;
  min-block-size: var(--stage-min-height);

  @include use-container();
  @include use-responsive-sizing(column-gap, $gaps);

  @include mq($from: $stage-switch-breakpoint) {
    grid-template-columns: 1fr 1fr;
  }
}

.stage__content {
  align-items: stretch;
  display: flex;
  flex-direction: column;

  &:not(:only-child) {
    --stage-content-gap: calc(var(--stage-breadcrumb-gap) * 2);
  }

  @include use-responsive-sizing(padding-block, responsive-map(xs 3rem, l 5rem));
  @include use-responsive-sizing(--stage-breadcrumb-gap, (xs: 2.4rem, xl: 5rem));
}

.stage__breadcrumb {
  margin-block-end: var(--stage-breadcrumb-gap);
}

.stage__text-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: var(--stage-content-align);

  @include mq($from: $stage-switch-breakpoint) {
    padding-block-end: var(--stage-content-gap, var(--stage-breadcrumb-gap));
  }
}

.stage__headline {
  --line-clamp: 4;
}

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

.stage__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-block-start: 3rem;
}

.stage__details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-block-start: 3rem;
}

.stage__detail {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.stage__detail-label {
  flex-shrink: 0;
  font-size: 3rem;
}

.stage__detail-text {
  font-size: 1.6rem;
  line-height: var(--line-height-default);
}

.stage__image-container {
  align-self: stretch;
  display: flex;
  flex-direction: column-reverse;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: stretch;

  @include mq($until: $stage-switch-breakpoint) {
    @include use-break-out();
  }

  @include mq($from: $stage-switch-breakpoint) {
    transform: translateX(var(--body-padding));
  }
}

.stage__image {
  flex-shrink: 0;
  position: relative;
}

.stage__copyright {
  inset-block-end: 0;
  inset-inline-end: 0;
  position: absolute;
  z-index: 2;
}

.stage__logo {
  --image-max-width: var(--stage-logo-width);
  --image-max-height: var(--stage-logo-height);

  align-items: center;
  background-color: var(--color-white);
  display: flex;
  flex-grow: 1;
  justify-content: center;
  padding-block: 5rem;

  @include use-responsive-sizing(padding-inline, responsive-map(xs 2rem, xl 5rem));
}
  • URL: /components/raw/stage/stage.scss
  • Filesystem Path: src/components/3-organisms/stage/stage.scss
  • Size: 3 KB

No notes defined.