@e-fellows/website-2022

Veranstaltungs-Bühne 

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

            <div class="event-stage__headline">
                <h2 class="headline headline--2"><span class="headline__text">Ein ganz normaler Event mit durchschnittlichen Infos</span></h2>
            </div>
        </div>

        <div class="event-stage__details">
            <div class="event-stage__details-box">
                <div class="details-box">
                    <dl class="details-box__items">
                        <div class="details-box__item">
                            <dt class="details-box__item-label">
                                <span class="details-box__item-label-icon">
                                    <svg class="icon icon--calendar-alt" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#calendar-alt"></use>
                                    </svg> </span>

                                <span class="details-box__item-label-text">Datum::
                                </span>
                            </dt>

                            <dd class="details-box__item-text">
                                <p class="paragraph">Fr, 12. Okt - Sa, 02. Sep</p>

                            </dd>
                        </div>
                        <div class="details-box__item">
                            <dt class="details-box__item-label">
                                <span class="details-box__item-label-icon">
                                    <svg class="icon icon--clock" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#clock"></use>
                                    </svg> </span>

                                <span class="details-box__item-label-text">Uhrzeit::
                                </span>
                            </dt>

                            <dd class="details-box__item-text">
                                <p class="paragraph">18:00 - 20:30 Uhr</p>

                            </dd>
                        </div>
                        <div class="details-box__item">
                            <dt class="details-box__item-label">
                                <span class="details-box__item-label-icon">
                                    <svg class="icon icon--marker" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#marker"></use>
                                    </svg> </span>

                                <span class="details-box__item-label-text">Ort::
                                </span>
                            </dt>

                            <dd class="details-box__item-text">
                                <p class="paragraph">Schloss Montabaur<br>Schlossweg 1<br>56410 Montabaur</p>
                                <p class="paragraph"><strong><a class="link link--external" href="https://maps.google.com/" rel="noopener noreferrer" target="_blank"><span class="link__icon"><svg class="icon icon--external-link" viewBox="0 0 200 200" aria-hidden="true">
                                                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#external-link"></use>
                                                </svg>&#65279;</span><span class="link__text u-underline">Auf Google Maps anzeigen</span></a></strong></p>

                            </dd>
                        </div>
                        <div class="details-box__item">
                            <dt class="details-box__item-label">
                                <span class="details-box__item-label-icon">
                                    <svg class="icon icon--user-alt2" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#user-alt2"></use>
                                    </svg> </span>

                                <span class="details-box__item-label-text">Zielgruppe::
                                </span>
                            </dt>

                            <dd class="details-box__item-text">
                                <p class="paragraph">Alle Jurist:innen mit vollbefriedigendem Ersten Staatsexamen bzw. vollbefriedigendem staatlichen Teil der Ersten Juristischen Prüfung und Volljurist:innen.</p>

                            </dd>
                        </div>
                        <div class="details-box__item">
                            <dt class="details-box__item-label">
                                <span class="details-box__item-label-icon">
                                    <svg class="icon icon--hourglass" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#hourglass"></use>
                                    </svg> </span>

                                <span class="details-box__item-label-text">Bewerben bis::
                                </span>
                            </dt>

                            <dd class="details-box__item-text">
                                <p class="paragraph">03. September</p>

                            </dd>
                        </div>
                    </dl>

                    <div class="details-box__buttons">
                        <div class="details-box__button">
                            <a class="button u-underline" href="#">Jetzt Anmelden</a>
                        </div>
                        <div class="details-box__button">
                            <a class="button button--outline u-underline" href="#">Jetzt Anmelden</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
 
{% set level = level ??? 2 -%}

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

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

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

    {% if detailsBox|default %}
      <div class="event-stage__details">
        <div class="event-stage__details-box">
          {% include '@details-box' with detailsBox only %}
        </div>
      </div>
    {% endif %}
  </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": "Events",
        "link": "#"
      },
      {
        "text": "Event XY",
        "link": "#"
      }
    ]
  },
  "headline": {
    "text": "Ein ganz normaler Event mit durchschnittlichen Infos"
  },
  "detailsBox": {
    "items": [
      {
        "icon": "calendar-alt",
        "label": "Datum:",
        "text": "<p>Fr, 12. Okt - Sa, 02. Sep</p>\n"
      },
      {
        "icon": "clock",
        "label": "Uhrzeit:",
        "text": "<p>18:00 - 20:30 Uhr</p>\n"
      },
      {
        "icon": "marker",
        "label": "Ort:",
        "text": "<p>Schloss Montabaur<br/>Schlossweg 1<br/>56410 Montabaur</p>\n<p><strong><a href=\"https://maps.google.com/\">Auf Google Maps anzeigen</a></strong></p>\n"
      },
      {
        "icon": "user-alt2",
        "label": "Zielgruppe:",
        "text": "<p>Alle Jurist:innen mit vollbefriedigendem Ersten Staatsexamen bzw. vollbefriedigendem staatlichen Teil der Ersten Juristischen Prüfung und Volljurist:innen.</p>\n"
      },
      {
        "icon": "hourglass",
        "label": "Bewerben bis:",
        "text": "<p>03. September</p>\n"
      }
    ],
    "buttons": [
      {
        "link": "#",
        "text": "Jetzt Anmelden"
      },
      {
        "link": "#",
        "text": "Jetzt Anmelden"
      }
    ]
  }
}
  • Content: 
    :root {
  --event-stage-background-color: transparent;
  --event-stage-image-aspect-ratio: #{1440 / 440};
  --event-stage-image-max-width: #{$inner-container-max-width};

  @include use-responsive-sizing(--event-stage-inner-padding-block, responsive-map(xs 2rem, xl 4rem));
  @include use-responsive-sizing(--event-stage-inner-row-gap, responsive-map(xs 4rem, xl 6rem));
}

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

.event-stage__image {
  --image-z-index: 1;

  aspect-ratio: var(--event-stage-image-aspect-ratio);
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-inline-size: var(--event-stage-image-max-width);
}

.event-stage__inner {
  column-gap: var(--gap);
  display: grid;
  padding-block: var(--event-stage-inner-padding-block);
  position: relative;
  row-gap: var(--event-stage-inner-row-gap);

  @include use-container();

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

.event-stage__content {
  display: flex;
  flex-direction: column;
  row-gap: var(--event-stage-inner-row-gap);

  @include mq($from: l) {
    padding-block-end: var(--event-stage-inner-row-gap);
  }
}

.event-stage__breadcrumb {
  flex-shrink: 0;
}

.event-stage__headline {
  display: flex;
  flex-direction: column;
  flex-grow: 2;
  justify-content: center;
}

.event-stage__details {
  position: relative;

  @include mq($from: l) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}

.event-stage__details-box {
  @include mq($from: l) {
    position: relative;
    z-index: 3;
  }
}

.event-stage__inner:not(:first-child) .event-stage__details-box {
  @include mq($from: l) {
    margin-block-start: -25rem;
  }
}
  • URL: /components/raw/event-stage/event-stage.scss
  • Filesystem Path: src/components/3-organisms/event-stage/event-stage.scss
  • Size: 1.7 KB

No notes defined.