Figure 

<section class="demo">
    <p>figure mit Bild</p>
    <figure>
        <img src="https://placehold.co/600x200" alt="Platzhalterbild">
        <figcaption>Ich bin eine figcaption</figcaption>
    </figure>
</section>

<section class="demo">
    <p>figure mit Text</p>
    <figure>
        <p>Ein Zitat oder sonstiger selbstständiger Textinhalt, der als Einheit behandelt wird.</p>
        <figcaption>Quelle des Textes</figcaption>
    </figure>
</section>

<section class="demo">
    <p>figure mit Code</p>
    <figure>
        <pre><code>const greet = (name) => `Hello, ${name}!`;</code></pre>
        <figcaption>Beispiel einer Arrow Function</figcaption>
    </figure>
</section>

<section class="demo">
    <p>image-link</p>
    <a href="#" class="image-link">
        <img src="https://placehold.co/600x200" alt="Verlinktes Bild">
    </a>
</section>

<section class="demo">
    <p>figure mit Link (Markdown)</p>
    <figure>
        <a href="#">
            <img src="https://placehold.co/600x200" alt="Verlinktes Bild in figure">
        </a>
        <figcaption>Verlinktes Bild in figure</figcaption>
    </figure>
</section>
 
<section class="demo">
    <p>figure mit Bild</p>
    <figure>
        <img src="https://placehold.co/600x200" alt="Platzhalterbild">
        <figcaption>Ich bin eine figcaption</figcaption>
    </figure>
</section>

<section class="demo">
    <p>figure mit Text</p>
    <figure>
        <p>Ein Zitat oder sonstiger selbstständiger Textinhalt, der als Einheit behandelt wird.</p>
        <figcaption>Quelle des Textes</figcaption>
    </figure>
</section>

<section class="demo">
    <p>figure mit Code</p>
    <figure>
        <pre><code>const greet = (name) => `Hello, ${name}!`;</code></pre>
        <figcaption>Beispiel einer Arrow Function</figcaption>
    </figure>
</section>

<section class="demo">
    <p>image-link</p>
    <a href="#" class="image-link">
        <img src="https://placehold.co/600x200" alt="Verlinktes Bild">
    </a>
</section>

<section class="demo">
    <p>figure mit Link (Markdown)</p>
    <figure>
        <a href="#">
            <img src="https://placehold.co/600x200" alt="Verlinktes Bild in figure">
        </a>
        <figcaption>Verlinktes Bild in figure</figcaption>
    </figure>
</section>
 
/* No context defined. */
  • Content: 
    figure {
  margin: 0;

  img,
  video {
    display: block;
    width: 100%;
  }

  a:not([class]) {
    @extend %hover-glow;

    display: block;
    background-color: transparent;
    border-bottom: 0;

    &:hover,
    &:focus {
      background-color: transparent;
    }
  }
}

.image-link {
  @extend %image-link;
}

a:has(figure) {
  @extend %hover-glow;
}

figcaption {
  @extend %heading-font-regular;

  margin-top: $spacer-xs;
  font-size: $font-size-xxs;
  line-height: $paragraph-line-height-sm;
  text-align: center;
}

@media screen and (min-width: $grid-breakpoint-md) {
  figcaption {
    font-size: $font-size-base;
    line-height: $paragraph-line-height-sm;
  }
}
  • URL: /components/raw/figure/_figure.scss
  • Filesystem Path: components/05-atoms/media/figure/_figure.scss
  • Size: 683 Bytes

No notes defined.