@e-fellows/website-2022

Kontakt-Teaser: Mit Bild 

<article class="contact-teaser">
    <div class="contact-teaser__image">
        <picture class="image">
            <img class="image__img" src="https://bildermangel.de/420x280/fe7c09/130f26.webp" width="420" height="280" alt="Foto Vorname Nachname" loading="lazy" />
        </picture>

        <ul class="contact-teaser__social-links" role="list">
            <li class="contact-teaser__social-link">
                <a class="icon-button" title="LinkedIn" href="#">
                    <span class="icon-button__icon">
                        <svg class="icon icon--linkedin" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#linkedin"></use>
                        </svg> </span>

                </a>
            </li>
            <li class="contact-teaser__social-link">
                <a class="icon-button" title="XING" href="#">
                    <span class="icon-button__icon">
                        <svg class="icon icon--xing" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#xing"></use>
                        </svg> </span>

                </a>
            </li>
        </ul>
    </div>

    <div class="contact-teaser__content">
        <div class="contact-teaser__headline">
            <h2 class="headline headline--3"><span class="headline__text">Vorname Nachname</span><span class="headline__kicker"><span class="u-hidden-visually">, </span>Employer Branding Manager</span></h2>
        </div>

        <div class="contact-teaser__text">
            Musterstraße 1<br>12343 Berlin
        </div>

        <ul class="contact-teaser__links" role="list">
            <li class="contact-teaser__link">
                <a class="icon-button icon-button--clipped" href="tel:+4921187725111">
                    <span class="icon-button__icon">
                        <svg class="icon icon--phone" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#phone"></use>
                        </svg> </span>

                    <span class="icon-button__text u-underline">+49 211 877 251 11</span>

                </a>
            </li>
            <li class="contact-teaser__link">
                <a class="icon-button icon-button--clipped" href="mailto:vorname.nachname@example.com">
                    <span class="icon-button__icon">
                        <svg class="icon icon--mail" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#mail"></use>
                        </svg> </span>

                    <span class="icon-button__text u-underline">vorname.nachname.nachname@example.com</span>

                </a>
            </li>
        </ul>
    </div>
</article>
 
{% set image = image ?? false -%}

<article {{ html_attributes({
  id: id ?? false,
  class: {
    'contact-teaser': true,
    'contact-teaser--horizontal': horizontal ?? false,
  },
}, attrs ?? {}) }}>
  {% if image %}
    <div class="contact-teaser__image">
      {% if image %}
        {% include '@image' with image only %}
      {% endif %}

      {% if social|default %}
        <ul class="contact-teaser__social-links" role="list">
          {% for socialItem in social %}
            <li class="contact-teaser__social-link">
              {% include '@icon-button' with socialItem only %}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
  {% endif %}

  <div class="contact-teaser__content">
    <div class="contact-teaser__headline">
      {% include '@headline' with headline | merge({
        level: 2,
        size: 3,
        kickerPosition: 'below',
      }) only %}
    </div>

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

    {% if social|default and not image %}
      <ul class="contact-teaser__social-links" role="list">
        {% for socialItem in social %}
          <li class="contact-teaser__social-link">
            {% include '@icon-button' with socialItem only %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}

    {% if links|default %}
      <ul class="contact-teaser__links" role="list">
        {% for link in links %}
          <li class="contact-teaser__link">
            {% include '@icon-button' with link | merge({
              clipped: true,
            }) only %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
</article>
 
{
  "social": [
    {
      "icon": "linkedin",
      "title": "LinkedIn",
      "link": "#"
    },
    {
      "icon": "xing",
      "title": "XING",
      "link": "#"
    }
  ],
  "headline": {
    "kicker": "Employer Branding Manager",
    "text": "Vorname Nachname"
  },
  "text": "Musterstraße 1<br>12343 Berlin",
  "links": [
    {
      "icon": "phone",
      "text": "+49 211 877 251 11",
      "link": "tel:+4921187725111"
    },
    {
      "icon": "mail",
      "text": "vorname.nachname.nachname@example.com",
      "link": "mailto:vorname.nachname@example.com"
    }
  ],
  "image": {
    "src": "https://bildermangel.de/420x280/fe7c09/130f26.webp",
    "width": 420,
    "height": 280,
    "alt": "Foto Vorname Nachname"
  }
}
  • Content: 
    :root {
  --contact-teaser-background-color: var(--color-cyan-light);
  --contact-teaser-link-columns: 1;
}

.contact-teaser {
  background-color: var(--contact-teaser-background-color);
  display: grid;
  grid-auto-columns: 100%;
  grid-template-rows: min-content auto;
}

.contact-teaser__image {
  position: relative;
}

.contact-teaser__social-links {
  --icon-button-size: 5rem;
  --icon-button-icon-size: 2.5rem;

  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
}

.contact-teaser__image .contact-teaser__social-links {
  --icon-button-background-color: var(--contact-teaser-background-color);
  --icon-button-border-color: var(--contact-teaser-background-color);
  --icon-button-border-color-active: var(--color-white);

  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  justify-content: flex-end;
  padding: 0;
  position: absolute;
  z-index: 2;
}

.contact-teaser__content {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
  padding: 3rem;
}

.contact-teaser__headline {
  margin-block-end: auto;
}

.contact-teaser__text {
  font-size: 1.6rem;
  line-height: var(--line-height-body);

  > * + * {
    margin-block-start: 1.5rem;
  }
}

.contact-teaser__links {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(var(--contact-teaser-link-columns), minmax(0, 1fr));
  list-style: none;
}

.contact-teaser__link {
  --icon-button-background-color: var(--color-white);
  --icon-button-border-color: var(--color-white);
  --icon-button-background-color-active: var(--color-orange);
  --icon-button-icon-size: 2rem;
  --icon-button-size: 5rem;
  --icon-button-text-size: 1.6rem;

  display: block;
}

@include mq($from: m) {
  .contact-teaser--horizontal {
    --contact-teaser-link-columns: 2;

    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-template-rows: auto;

    .contact-teaser__social-links {
      inset-block-end: 3rem;
      inset-inline-end: 3rem;
    }

    .contact-teaser__image + .contact-teaser__content {
      --contact-teaser-link-columns: 1;
    }
  }
}
  • URL: /components/raw/contact-teaser/contact-teaser.scss
  • Filesystem Path: src/components/2-molecules/contact-teaser/contact-teaser.scss
  • Size: 2.1 KB

No notes defined.