@e-fellows/website-2022

Figure 

<figure class="figure" id="figure-41569-24645" role="figure" aria-labelledby="figure-41569-24645-caption">
    <div class="figure__figure">
        <picture class="image" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
            <source srcset="https://bildermangel.de/1380x776/fe7c09/130f26.webp?text=+++M:+690x388@2x+++ 2x, https://bildermangel.de/690x388/fe7c09/130f26.webp?text=+++M:+690x388@1x+++ 1x" media="(min-width: 512px) and (max-width: 767px)">
            <source srcset="https://bildermangel.de/1760x990/fe7c09/130f26.webp?text=+++L:+880x495@2x+++ 2x, https://bildermangel.de/880x495/fe7c09/130f26.webp?text=+++L:+880x495@1x+++ 1x" media="(min-width: 768px) and (max-width: 1023px)">
            <source srcset="https://bildermangel.de/2048x1152/fe7c09/130f26.webp?text=+++XL:+1024x576@2x+++ 2x, https://bildermangel.de/1024x576/fe7c09/130f26.webp?text=+++XL:+1024x576@1x+++ 1x" media="(min-width: 1024px)">
            <img class="image__img" src="https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++" srcset="https://bildermangel.de/940x528/fe7c09/130f26.webp?text=+++S:+470x264@2x+++ 2x" width="470" height="264" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
        </picture>

        <div class="figure__lightbox">
            <a class="icon-button js-lightbox" title="Bild vergrößern" href="https://bildermangel.de/2048x1152/fe7c09/130f26.webp?text=+++XL:+1024x576@2x+++" rel="noopener noreferrer" target="_blank">
                <span class="icon-button__icon">
                    <svg class="icon icon--magnifier" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#magnifier"></use>
                    </svg> </span>

            </a>
        </div>
    </div>

    <figcaption class="figure__caption" id="figure-41569-24645-caption">
        <div class="figure__copyright">
            <div class="copyright">
                <button class="copyright__button" type="button" aria-label="Copyright-Informationen anzeigen" title="Copyright-Informationen anzeigen">
                    <svg class="icon icon--copyright" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#copyright"></use>
                    </svg> </button>

                <p class="copyright__tooltip" tabindex="0" hidden>
                    <small>Quelle: example.com</small>
                </p>
            </div>
        </div>

        <div class="figure__caption-text">Das ist die Bildbeschreibung mit <a class="link link--external" href="https://example.com" rel="noopener noreferrer" target="_blank"><span class="link__icon"><svg class="icon icon--external-link" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#external-link"></use>
                    </svg>&#65279;</span><span class="link__text u-underline">einem Link</span></a></div>
    </figcaption>
</figure>
 
{% set id = id ?? html_id('figure') %}
{% set caption = image.caption ??? caption ??? false %}
{% set link = link ?? null %}
{% set linkType = linkType ?? link_type(link) %}
{% set copyright = image.copyright ??? copyright ??? false %}
{% set captionId = 'caption' | namespaceInputId(id) %}
{% set innerFigureTag = link ? 'a' : 'div' %}

<figure {{ html_attributes({
  class: 'figure',
  id: id,
  role: 'figure',
  'aria-labelledby': caption or copyright ? captionId,
}, attrs ?? {}) }}>
  <{{ innerFigureTag }} {{ html_attributes({
    class: 'figure__figure',
    href: link,
  }, linkAttrs ?? link_attributes(link, type=linkType), innerFigureAttrs ?? {}) }}>
    {% if image|default %}
      {% include '@image' with image only %}

      {% if lightbox|default %}
        <div class="figure__lightbox">
          {% include '@icon-button' with {
            icon: 'magnifier',
            title: 'Enlarge image' | t('site'),
            link: lightbox,
            attrs: {
              class: 'js-lightbox',
              target: '_blank',
            },
          } only %}
        </div>
      {% endif %}
    {% elseif content|default %}
      {{ content | raw }}
    {% endif %}
  </{{ innerFigureTag }}>

  {% if caption or copyright %}
    <figcaption class="figure__caption" id="{{ captionId }}">
      {% if copyright %}
        <div class="figure__copyright">
          {% include '@copyright' with {
            text: copyright,
          } only %}
        </div>
      {% endif %}

      {% if caption %}
        <div class="figure__caption-text">
          {{- caption | componentize -}}
        </div>
      {% endif %}
    </figcaption>
  {% endif %}
</figure>
 
{
  "caption": "Das ist die Bildbeschreibung mit <a href=\"https://example.com\">einem Link</a>",
  "copyright": "Quelle: example.com",
  "image": {
    "src": "https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++",
    "width": 470,
    "height": 264,
    "alt": "Das ist ein Platzhalter-Bild",
    "src2x": "https://bildermangel.de/940x528/fe7c09/130f26.webp?text=+++S:+470x264@2x+++",
    "placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC",
    "sources": [
      {
        "srcset": "https://bildermangel.de/690x388/fe7c09/130f26.webp?text=+++M:+690x388@1x+++",
        "srcset2x": "https://bildermangel.de/1380x776/fe7c09/130f26.webp?text=+++M:+690x388@2x+++",
        "media": "(min-width: 512px) and (max-width: 767px)"
      },
      {
        "srcset": "https://bildermangel.de/880x495/fe7c09/130f26.webp?text=+++L:+880x495@1x+++",
        "srcset2x": "https://bildermangel.de/1760x990/fe7c09/130f26.webp?text=+++L:+880x495@2x+++",
        "media": "(min-width: 768px) and (max-width: 1023px)"
      },
      {
        "srcset": "https://bildermangel.de/1024x576/fe7c09/130f26.webp?text=+++XL:+1024x576@1x+++",
        "srcset2x": "https://bildermangel.de/2048x1152/fe7c09/130f26.webp?text=+++XL:+1024x576@2x+++",
        "media": "(min-width: 1024px)"
      }
    ]
  },
  "lightbox": "https://bildermangel.de/2048x1152/fe7c09/130f26.webp?text=+++XL:+1024x576@2x+++"
}
  • Content: 
    :root {
  --figure-caption-background-color: var(--color-cyan-light);
  --figure-caption-min-height: 0;
  --figure-caption-size: 1.4rem;
  --figure-height: auto;

  @include use-responsive-sizing(--figure-caption-padding-block --figure-caption-padding-inline, responsive-map(xs 1.5rem, l 2rem));
}

.figure {
  display: block;
}

.figure__figure {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.05);
  block-size: var(--figure-height);
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.figure__lightbox {
  --icon-button-icon-size: 3rem;

  inset-block-end: 0;
  inset-inline-start: 0;
  position: absolute;
  z-index: 2;
}

.figure__caption {
  position: relative;
  text-align: start;
}

.figure__copyright {
  inset-block-start: 0;
  inset-inline-end: 0;
  position: absolute;
  transform: translateY(-100%);
  z-index: 2;
}

.figure__caption {
  min-block-size: var(--figure-caption-min-height);
}

.figure__caption-text {
  background-color: var(--figure-caption-background-color);
  font-size: var(--figure-caption-size);
  line-height: var(--line-height-body);
  padding-block: var(--figure-caption-padding-block);
  padding-inline: var(--figure-caption-padding-inline);
}
  • URL: /components/raw/figure/figure.scss
  • Filesystem Path: src/components/2-molecules/figure/figure.scss
  • Size: 1.2 KB

No notes defined.