@e-fellows/website-2022

Branding Box: Standard 

<div class="branding-box">

    <div class="branding-box__content">
        <div class="branding-box__headline">
            <h2 class="headline headline--3"><span class="headline__text">e&#8209;fellows.net präsentiert die besten Artikel aus ZEIT Campus</span></h2>
        </div>

        <div class="branding-box__text">
            <p class="paragraph">Schwerpunkt der aktuellen ZEIT-Campus-Ausgabe: Dreißig junge Menschen, die unserer Zukunft besser und leichter machen und was Du von ihnen lernen kannst.</p>

        </div>

        <div class="branding-box__button">
            <a class="button u-underline" href="#">Zur Ausgabe</a>
        </div>
    </div>
</div>
 
{% set level = level ??? 2 -%}

<div {{ html_attributes({
  id: id ?? false,
  class: 'branding-box',
}, attrs ?? {}) }}>
  {% if image|default %}
    <div class="branding-box__image">
      {% include '@image' with image only %}
    </div>
  {% endif %}

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

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

    {% if button|default %}
      <div class="branding-box__button">
        {% include '@button' with button only %}
      </div>
    {% endif %}
  </div>
</div>
 
{
  "headline": {
    "text": "e-fellows.net präsentiert die besten Artikel aus ZEIT Campus"
  },
  "text": "<p>Schwerpunkt der aktuellen ZEIT-Campus-Ausgabe: Dreißig junge Menschen, die unserer Zukunft besser und leichter machen und was Du von ihnen lernen kannst.</p>\n",
  "button": {
    "text": "Zur Ausgabe",
    "link": "#"
  }
}
  • Content: 
    :root {
  --branding-box-background-color: var(--color-blue-light);
}

.branding-box {
  align-items: center;
  background-color: var(--branding-box-background-color);
  display: flex;
  flex-direction: column;
  gap: 4rem;

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

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

.branding-box__image {
  flex-shrink: 0;
  inline-size: 20rem;
}

.branding-box__content {
  text-align: center;

  @include mq($from: m) {
    .branding-box__image + & {
      text-align: start;
    }
  }
}

.branding-box__text {
  margin-block-start: 2rem;

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

.branding-box__button {
  margin-block-start: 3rem;
}
  • URL: /components/raw/branding-box/branding-box.scss
  • Filesystem Path: src/components/2-molecules/branding-box/branding-box.scss
  • Size: 869 Bytes

No notes defined.