@e-fellows/website-2022

Zitat 

<figure class="quote">
    <svg class="icon icon--quote quote__icon" viewBox="0 0 200 200" aria-hidden="true">
        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#quote"></use>
    </svg>
    <div class="quote__content">
        <blockquote class="quote__quote">
            Ich bin ein kleines Zitat, mein Bild ist optional, man Wortschatz und die Grammatik so trainiert hat, dass man problemlos Texte in Büchern.
        </blockquote>

        <figcaption class="quote__caption">
            Zitat von Regina Greck
        </figcaption>
    </div>
</figure>
 
{% set caption = caption ?? false -%}

<figure {{ html_attributes({
  id: id ?? false,
  class: 'quote',
}, attrs ?? {}) }}>
  {% include '@icon' with { icon: 'quote', class: 'quote__icon' } only %}

  <div class="quote__content">
    <blockquote class="quote__quote">
      {{ quote | breakerize | componentize }}
    </blockquote>

    {% if caption %}
      <figcaption class="quote__caption">
        {{ caption | componentize }}
      </figcaption>
    {% endif %}
  </div>
</figure>
 
{
  "quote": "Ich bin ein kleines Zitat, mein Bild ist optional, man Wortschatz und die Grammatik so trainiert hat, dass man problemlos Texte in Büchern.",
  "caption": "Zitat von Regina Greck"
}
  • Content: 
    :root {
  --quote-icon-color: var(--color-cyan-light);
  --quote-font-weight: 600;
  --quote-line-height: var(--line-height-default);
}

.quote {
  position: relative;
}

.quote__icon {
  color: var(--quote-icon-color);
  inset-block-start: 0;
  inset-inline-start: -0.15em;
  position: absolute;
  z-index: 1;

  @include use-responsive-sizing(font-size, responsive-map(xs 7rem, xl 9rem));
}

.quote__content {
  padding-block-start: 3rem;
  padding-inline-start: 2.5rem;
  position: relative;
  z-index: 2;
}

.quote__quote {
  font-weight: var(--quote-font-weight);
  line-height: var(--quote-line-height);

  @include use-responsive-sizing(font-size, responsive-map(xs 2rem, xl 2.6rem));
}

.quote__caption {
  font-size: 1.6rem;
  line-height: var(--quote-line-height);
  margin-block-start: 2rem;
}
  • URL: /components/raw/quote/quote.scss
  • Filesystem Path: src/components/2-molecules/quote/quote.scss
  • Size: 805 Bytes

No notes defined.