@e-fellows/website-2022

Link-Störer 

<div class="link-breaker t-inverted">
    <div class="link-breaker__inner">
        <div class="link-breaker__text">Unser komplettes Angebot für alle Zielgruppen mit Terminen, Deadlines und Preisen.</div>

        <div class="link-breaker__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">PDF (187 kb)</span>

            </a>
        </div>
    </div>
</div>
 
<div {{ html_attributes({
  id: id ?? false,
  class: ['link-breaker', 't-inverted'],
}, attrs ?? {}) }}>
  <div class="link-breaker__inner">
    {% if text|default %}
      <div class="link-breaker__text">
        {{- text -}}
      </div>
    {% endif %}

    {% if button|default %}
      <div class="link-breaker__button">
        {% include '@icon-button' with button only %}
      </div>
    {% endif %}
  </div>
</div>
 
{
  "text": "Unser komplettes Angebot für alle Zielgruppen mit Terminen, Deadlines und Preisen.",
  "button": {
    "text": "PDF (187 kb)",
    "link": "#"
  }
}
  • Content: 
    :root {
  @include use-responsive-sizing(--link-breaker-padding-block, responsive-map(xs 2rem, xl 2.5rem));
}

.link-breaker {
  background-color: var(--color-midnight);
  color: var(--color-white);
  padding-block: var(--link-breaker-padding-block);
}

.link-breaker__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;

  @include use-container();
}

.link-breaker__text {
  flex-shrink: 0;
  line-height: var(--line-height-body);
  max-inline-size: 100%;
}

.link-breaker__button {
  flex-shrink: 0;
}
  • URL: /components/raw/link-breaker/link-breaker.scss
  • Filesystem Path: src/components/3-organisms/link-breaker/link-breaker.scss
  • Size: 567 Bytes

No notes defined.