@e-fellows/website-2022

Hinweisstörer 

<div class="alert-breaker u-inverted">
    <div class="alert-breaker__badge">

        <p class="badge">
            <span class="badge__icon">
                <svg class="icon icon--bell" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#bell"></use>
                </svg> </span>

        </p>
    </div>

    <div class="alert-breaker__content">
        <div class="alert-breaker__headline">
            <h2 class="headline headline--3"><span class="headline__text">Für dieses Event gibt es Updates.</span></h2>
        </div>

        <div class="alert-breaker__text">
            <p class="paragraph">Bist Du schon für den Big Techday 2022 angemeldet? Dann logge dich ein, um die Neuigkeiten zu sehen
            </p>
        </div>
    </div>

    <div class="alert-breaker__icon-button">
        <a class="icon-button" href="#">
            <span class="icon-button__icon">
                <svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#arrow-right"></use>
                </svg> </span>

            <span class="icon-button__text u-underline">Jetzt einloggen</span>

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

<div {{ html_attributes({
  id: id ?? false,
  class: 'alert-breaker u-inverted',
}, attrs ?? {}) }}>
  {% if badge|default %}
    <div class="alert-breaker__badge">
      {% include '@badge' with badge only %}
    </div>
  {% endif %}

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

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

  {% if button|default %}
    <div class="alert-breaker__icon-button">
      {% include '@icon-button' with button only %}
    </div>
  {% endif %}
</div>
 
{
  "badge": {
    "icon": "bell"
  },
  "headline": {
    "text": "Für dieses Event gibt es Updates."
  },
  "text": "<p>Bist Du schon für den Big Techday 2022 angemeldet? Dann logge dich ein, um die Neuigkeiten zu sehen\n",
  "button": {
    "link": "#",
    "text": "Jetzt einloggen",
    "icon": "arrow-right"
  }
}
  • Content: 
    :root {
  --alert-breaker-background-color: var(--color-midnight);
  --alert-breaker-color: var(--color-white);
  --alert-breaker-gap: 4rem;
}

.alert-breaker {
  align-items: flex-start;
  background-color: var(--alert-breaker-background-color);
  color: var(--alert-breaker-color);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--alert-breaker-gap) calc(var(--alert-breaker-gap) * 0.5);

  @include use-responsive-sizing(padding-block, responsive-map(xs 4rem, l 4rem));
  @include use-responsive-sizing(padding-inline, responsive-map(xs 2rem, xl 4rem));

  @include mq($from: m) {
    flex-wrap: nowrap;
    gap: var(--alert-breaker-gap);
  }
}

.alert-breaker__badge {
  flex-shrink: 0;

  @include mq($until: m) {
    --badge-size: 8rem;
  }
}

.alert-breaker__content {
  max-inline-size: 55rem;

  @include mq($until: m) {
    flex-basis: calc(100% - 10rem);
  }
}

.alert-breaker__icon-button {
  flex-shrink: 0;

  @include mq($from: m) {
    margin-inline-start: auto;
  }
}

.alert-breaker__text {
  margin-block-start: 2rem;
}
  • URL: /components/raw/alert-breaker/alert-breaker.scss
  • Filesystem Path: src/components/2-molecules/alert-breaker/alert-breaker.scss
  • Size: 1.1 KB

No notes defined.