figure

Information

Folder
src/components/patterns/figure

Files

Schema 
// src/components/patterns/figure/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/figure
type: object
required:
  - image
  - caption
additionalProperties: false
properties:
  image:
    type: string
    format: html
  caption:
    type: string
    format: html
  overlay:
    type: string
    format: html
Mocks 
// src/components/patterns/figure/mocks.yaml

image: |
  <img
    src="https://source.unsplash.com/yKND1J8B0I0/1280x768"
    srcset="
      https://source.unsplash.com/yKND1J8B0I0/2800x2100 2500w,
      https://source.unsplash.com/yKND1J8B0I0/2500x1875 2500w,
      https://source.unsplash.com/yKND1J8B0I0/2200x1650 2200w,
      https://source.unsplash.com/yKND1J8B0I0/1900x1425 1900w,
      https://source.unsplash.com/yKND1J8B0I0/1600x1200 1600w,
      https://source.unsplash.com/yKND1J8B0I0/1300x975 1300w,
      https://source.unsplash.com/yKND1J8B0I0/1000x750 1000w,
      https://source.unsplash.com/yKND1J8B0I0/700x525 700w
    "
    alt="Alternative text"
    sizes="(width < 80rem) 100vw, 80rem"
    width="1280"
    height="768"
  >
caption: |
  <p>
    <em>Kette Marga</em> sendisc ipiende bitatemquis enienda eribeatem sumquas dolorumqui testet es aut quiandam quid ut aute debit verumest.
  </p>
$variants:
  - $name: overlay
    overlay: |
      <p>
        Edle Materialien, hochkarätige Edelsteine,<br>
        perfektioniertes Handwerk und eine klare Formsprache …<br>
        daraus entsteht mein sehr persönlicher Schmuck.
      </p>
Template 
// src/components/patterns/figure/figure.twig

<div class="u-container">
	<figure class="Figure">
		{% if overlay %}
			<div class="Figure-overlay">
				{{ overlay|raw }}
			</div>
		{% endif %}

		<div class="Figure-image">
			{{ image|raw }}
		</div>

		<figcaption class="Figure-caption u-text-container">
			{% include "@elements/rich-text/rich-text.twig" with {
				content: caption,
			} only %}
		</figcaption>
	</figure>
</div>

Variants

default
Open
Alternative text

Kette Marga sendisc ipiende bitatemquis enienda eribeatem sumquas dolorumqui testet es aut quiandam quid ut aute debit verumest.

overlay
Open

Edle Materialien, hochkarätige Edelsteine,
perfektioniertes Handwerk und eine klare Formsprache …
daraus entsteht mein sehr persönlicher Schmuck.

Alternative text

Kette Marga sendisc ipiende bitatemquis enienda eribeatem sumquas dolorumqui testet es aut quiandam quid ut aute debit verumest.