@e-fellows/website-2022

Personenbox 

<article class="person-box">
    <div class="person-box__image">
        <picture class="image">
            <img class="image__img" src="https://bildermangel.de/300x300/fe7c09/130f26.webp?text=+++S:+300x300@1x+++" width="300" height="300" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
        </picture>
    </div>

    <div class="person-box__content">
        <div class="person-box__headline">
            <h1 class="headline headline--3"><span class="headline__text">Susanne Georgi (30)</span></h1>
        </div>

        <div class="person-box__text">
            <p class="paragraph">ist Assistenzärztin in der inneren Medizin. Im September 2010 startete sie in ihren ersten Einsatz für „<a class="link link--internal" href="#"><span class="link__text u-underline">Ärzte ohne Grenzen</span></a>“. Das Ziel: ein siebenmonatiger Nothilfeeinsatz für unterernährte Kinder im Tschad.
            </p>
        </div>
    </div>
</article>
 
<article {{ html_attributes({
  id: id ?? false,
  class: 'person-box',
}) }}>
  {% if image|default %}
    <div class="person-box__image">
      {% include '@image' with image only %}
    </div>
  {% endif %}

  <div class="person-box__content">
    {% if headline|default %}
      <div class="person-box__headline">
        {% include '@headline' with headline | merge({
          size: 3,
          level: level ?? false,
        }) only %}
      </div>
    {% endif %}

    {% if text|default %}
      <div class="person-box__text">
        {{ text | componentize }}
      </div>
    {% endif %}
  </div>
</article>
 
{
  "image": {
    "src": "https://bildermangel.de/300x300/fe7c09/130f26.webp?text=+++S:+300x300@1x+++",
    "width": 300,
    "height": 300,
    "alt": "Das ist ein Platzhalter-Bild"
  },
  "headline": {
    "text": "Susanne Georgi (30)"
  },
  "text": "<p>ist Assistenzärztin in der inneren Medizin. Im September 2010 startete sie in ihren ersten Einsatz für „<a href=\"#\">Ärzte ohne Grenzen</a>“. Das Ziel: ein siebenmonatiger Nothilfeeinsatz für unterernährte Kinder im Tschad.\n"
}
  • Content: 
    :root {
  --person-box-background-color: var(--color-cyan-light);
  --person-box-gap: 4rem;
  --person-box-image-width: 30rem;

  @include use-responsive-sizing(--person-box-gap, (xs: 4rem, m: 5rem));
}

.person-box {
  background-color: var(--person-box-background-color);
  display: flex;
  flex-direction: column;
  gap: var(--person-box-gap);

  @include use-responsive-sizing(padding-top padding-bottom, responsive-map(xs 5rem, l 7.5rem));
  @include use-responsive-sizing(padding-right padding-left, responsive-map(xs 2rem, xl 7.5rem));

  @include mq($from: m) {
    flex-direction: row;
  }
}

.person-box__image {
  @include mq($from: m) {
    flex-basis: var(--person-box-image-width);
    flex-shrink: 0;
  }
}

.person-box__headline {
  margin-block-end: 2rem;
}
  • URL: /components/raw/person-box/person-box.scss
  • Filesystem Path: src/components/2-molecules/person-box/person-box.scss
  • Size: 775 Bytes

No notes defined.