FIGURE (Veams Components )

src/app/shared/components/figure/templates

Demo Section

Each variation will be presented in the following section.

Default with picture

Alternative text that describes the image

Default with picture

Alternative text that describes the image

Caption Headline

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Default with picture

Alternative text that describes the image

Caption Headline

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Default with video in Lightbox

Alternative text that describes the image

Caption Headline

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Default with picture

Alternative text that describes the image

Caption Headline

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Picture and caption

Alternative text that describes the image

My custom picture with caption

and custom content

Audio and caption

My custom audio with caption

4:00 Min | 25.03.2018 | ©motionworks

Video and caption

My custom video with caption

4:00 Min | 25.03.2018 | ©motionworks

Video embedded and caption

Alternative text that describes the image

Wenn Sie diesen eingebetteten Facebook-Post anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen. Für die Speicherung und Verarbeitung der Daten gilt die

Für die Speicherung und Verarbeitung der Daten gilt die You-Tube-Datenschutzrichtlinie.

My custom video with caption

4:00 Min | 25.03.2018 | ©motionworks

Readme

Figure

Description

The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos code examples and other things. The specs says this:

The HTML <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit.

The Figure component contains the picture and video component as dependency and prints out every necessary field for html figures.

Requirements

Installation

Installation with Veams

veams install component figure

veams -i c figure

Fields

figure.hbs

Settings

Parameter Type Default Description
settings.figureContextClass String 'default' Context class of the figure
settings.figureClasses String '' Modifier classes for the figure
settings.figureId String '' Just pass a custom string when using an id for the figure
settings.figureJsModule String '' You can add this component as data-js-module
settings.figureJsOptions Object null You can add options to the figure. This object get stringified in your markup

Content

Parameter Type Description
content.figureCaption Object Contains multiple elements
content.figureCaption.figureCaptionClasses String Modifier classes
content.figureCaption.captionHeadline String Headline
content.figureCaption.captionContent String Content
Nested Data Fields
Parameter Type Description
content.figurePicture Object view @requirements
content.figureVideo Object view @requirements

SASS

Modifier Classes

There are modifier classes you can add to c-figure--rte:

Modifier Description
is-rte-embed Picture is embedded in RTE component
is-left Picture is aligned left (needs is-rte-embed modifier as well)
is-right Picture is aligned right (needs is-rte-embed modifier as well)

Templates

figure.hbs

<figure class="c-figure{{#if settings.figureContextClass}}--{{settings.figureContextClass}}{{else}}--default{{/if}}{{#if
		settings.figureClasses}} {{settings.figureClasses}}{{/if}}"
        data-css="c-figure"{{#if settings.figureId}} id="{{settings.figureId}}"{{/if}}{{#if settings.figureJsModule}}
        data-js-module="{{settings.figureJsModule}}"{{#if settings.figureJsOptions}}
        data-js-options='{{stringify settings.figureJsOptions}}'{{/if}}{{/if}}>
	<div class="figure__wrapper">
		{{#if (isObject content.figurePicture)}}
			{{> picture content.figurePicture}}
			{{#if content.figurePlay}}
				<span class="figure__play-icon"><span class="figure__play-text">{{content.figurePlayText}}</span></span>
			{{/if}}
			{{#if content.figureLBVideo}}
				<button type="button" class="figure__play-lbvideo" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content="{ &quot;youtube&quot;: {&quot;id&quot;: &quot;mM5_T-F1Yn4&quot;,&quot;format&quot;: &quot;4_3&quot;}, &quot;caption&quot;: {&quot;captionHeadline&quot;:&quot;Youtube Video Headline&quot;,&quot;captionContent&quot;:&quot;Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.&quot;} }">Lightbox öffnen</button>
			{{/if}}
			{{#if content.figureZoom}}
				<button type="button" class="c-cta--image-zoom" aria-haspopup="true" aria-expanded="false"
				        data-js-item="overlay-handler-cta"
				        data-content='{ "image": { "src": "https://via.placeholder.com/2000x1000", "altText": "Some alt text"}, "caption": {"captionHeadline": "Caption Headline", "captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "© imageworks"}]} }'>
					Vergrößern
				</button>
			{{/if}}
		{{else}}
			{{#if (isObject content.figureVideo)}}
				{{> video content.figureVideo}}
			{{else}}
				{{#if (isObject content.figureEmbeddedVideo)}}
					{{> video-embeded content.figureEmbeddedVideo}}
				{{else}}
					{{#if (isObject content.figureAudio)}}
						{{> audio content.figureAudio}}
					{{else}}
						<h2 style="color: red">Please provide a picture or video or audio for your figure!</h2>
					{{/if}}
				{{/if}}
			{{/if}}
		{{/if}}

	</div>

	{{#if (isObject content.figureCaption)}}
		<figcaption
				class="figure__caption{{#if settings.figureCaptionClasses}} {{settings.figureCaptionClasses}}{{/if}}">
			{{> figure__caption content.figureCaption}}
		</figcaption>
	{{/if}}
</figure>

figure__caption.hbs

<div class="figure__caption-inner">
	{{#if captionHeadline}}
		<h3 class="figure__caption-headline">{{captionHeadline}}</h3>
	{{/if}}
	{{#if captionContent}}
		<p class="figure__caption-content">{{captionContent}}</p>
	{{/if}}
</div>

Data File

figure-bp.hjson

{
	"title": "Figure",
	"variations": {
		"simple": {
			"docs": {
				"variationName": "Default with picture"
			},
			"settings": {
				"figureId": "figure-content",
				"figureContextClass": "simple"
			},
			"content": {
				"figurePicture": {
					"settings": {
						"pictureContextClass": "default",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://via.placeholder.com/20x10",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://via.placeholder.com/400x200",
										"imageWidth": "400w"
									},
									{
										"src": "https://via.placeholder.com/800x400",
										"imageWidth": "800w"
									},
									{
										"src": "https://via.placeholder.com/1200x600",
										"imageWidth": "1200w"
									},
									{
										"src": "https://via.placeholder.com/1600x800",
										"imageWidth": "1600w"
									},
									{
										"src": "https://via.placeholder.com/2000x1000",
										"imageWidth": "2000w"
									},
									{
										"src": "https://via.placeholder.com/2400x1200",
										"imageWidth": "2400w"
									},
									{
										"src": "https://via.placeholder.com/2800x1400",
										"imageWidth": "2800w"
									},
									{
										"src": "https://via.placeholder.com/3200x1600",
										"imageWidth": "3200w"
									}
								]
							}
						]
					}
				}
			}
		},
		"rte": {
			"docs": {
				"variationName": "Default with picture"
			},
			"settings": {
				"figureId": "figure-content",
				"figureContextClass": "rte"
			},
			"content": {
				"figurePicture": {
					"settings": {
						"pictureContextClass": "rte",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://via.placeholder.com/20x10",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://via.placeholder.com/400x200",
										"imageWidth": "400w"
									},
									{
										"src": "https://via.placeholder.com/800x400",
										"imageWidth": "800w"
									},
									{
										"src": "https://via.placeholder.com/1200x600",
										"imageWidth": "1200w"
									},
									{
										"src": "https://via.placeholder.com/1600x800",
										"imageWidth": "1600w"
									},
									{
										"src": "https://via.placeholder.com/2000x1000",
										"imageWidth": "2000w"
									},
									{
										"src": "https://via.placeholder.com/2400x1200",
										"imageWidth": "2400w"
									},
									{
										"src": "https://via.placeholder.com/2800x1400",
										"imageWidth": "2800w"
									},
									{
										"src": "https://via.placeholder.com/3200x1600",
										"imageWidth": "3200w"
									}
								]
							}
						]
					}
				},
				"figureCaption": {
					"captionHeadline": "Caption Headline",
					"captionContent":
						"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth."
				}
			}
		},
		"rteEmbedRight": {
			"docs": {
				"variationName": "Default with picture"
			},
			"settings": {
				"figureId": "figure-content",
				"figureContextClass": "rte",
				"figureClasses": "is-rte-embed is-right",
				"figureJsModule": "overlay-handler"
			},
			"content": {
				"figureZoom": true,
				"figurePicture": {
					"settings": {
						"pictureContextClass": "default",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://via.placeholder.com/20x20",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://via.placeholder.com/400x400",
										"imageWidth": "400w"
									},
									{
										"src": "https://via.placeholder.com/800x800",
										"imageWidth": "800w"
									},
									{
										"src": "https://via.placeholder.com/1200x1200",
										"imageWidth": "1200w"
									},
									{
										"src": "https://via.placeholder.com/1600x1600",
										"imageWidth": "1600w"
									},
									{
										"src": "https://via.placeholder.com/2000x2000",
										"imageWidth": "2000w"
									},
									{
										"src": "https://via.placeholder.com/2400x2400",
										"imageWidth": "2400w"
									},
									{
										"src": "https://via.placeholder.com/2800x2800",
										"imageWidth": "2800w"
									},
									{
										"src": "https://via.placeholder.com/3200x3200",
										"imageWidth": "3200w"
									}
								]
							}
						]
					}
				},
				"figureCaption": {
					"captionHeadline": "Caption Headline",
					"captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."
				}
			}
		},
		"rteEmbedLeftwLBVideo": {
			"docs": {
				"variationName": "Default with video in Lightbox"
			},
			"settings": {
				"figureId": "figure-content",
				"figureContextClass": "rte",
				"figureClasses": "is-rte-embed is-left",
				"figureJsModule": "overlay-handler"
			},
			"content": {
				"figureLBVideo": true,
				"figurePicture": {
					"settings": {
						"pictureContextClass": "default",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://via.placeholder.com/20x20",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://via.placeholder.com/400x400",
										"imageWidth": "400w"
									},
									{
										"src": "https://via.placeholder.com/800x800",
										"imageWidth": "800w"
									},
									{
										"src": "https://via.placeholder.com/1200x1200",
										"imageWidth": "1200w"
									},
									{
										"src": "https://via.placeholder.com/1600x1600",
										"imageWidth": "1600w"
									},
									{
										"src": "https://via.placeholder.com/2000x2000",
										"imageWidth": "2000w"
									},
									{
										"src": "https://via.placeholder.com/2400x2400",
										"imageWidth": "2400w"
									},
									{
										"src": "https://via.placeholder.com/2800x2800",
										"imageWidth": "2800w"
									},
									{
										"src": "https://via.placeholder.com/3200x3200",
										"imageWidth": "3200w"
									}
								]
							}
						]
					}
				},
				"figureCaption": {
					"captionHeadline": "Caption Headline",
					"captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."
				}
			}
		},
		"rteEmbedLeft": {
			"docs": {
				"variationName": "Default with picture"
			},
			"settings": {
				"figureId": "figure-content",
				"figureContextClass": "rte",
				"figureClasses": "is-rte-embed is-left",
				"figureJsModule": "overlay-handler"
			},
			"content": {
				"figureZoom": true,
				"figurePicture": {
					"settings": {
						"pictureContextClass": "default",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://via.placeholder.com/20x20",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://via.placeholder.com/400x400",
										"imageWidth": "400w"
									},
									{
										"src": "https://via.placeholder.com/800x800",
										"imageWidth": "800w"
									},
									{
										"src": "https://via.placeholder.com/1200x1200",
										"imageWidth": "1200w"
									},
									{
										"src": "https://via.placeholder.com/1600x1600",
										"imageWidth": "1600w"
									},
									{
										"src": "https://via.placeholder.com/2000x2000",
										"imageWidth": "2000w"
									},
									{
										"src": "https://via.placeholder.com/2400x2400",
										"imageWidth": "2400w"
									},
									{
										"src": "https://via.placeholder.com/2800x2800",
										"imageWidth": "2800w"
									},
									{
										"src": "https://via.placeholder.com/3200x3200",
										"imageWidth": "3200w"
									}
								]
							}
						]
					}
				},
				"figureCaption": {
					"captionHeadline": "Caption Headline",
					"captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."
				}
			}
		},
		"caption": {
			"docs": {
				"variationName": "Picture and caption"
			},
			"settings": {
				"figureId": "figure-caption",
				"figureContextClass": "caption"
			},
			"content": {
				"figureCaption": {
					"captionHeadline": "My custom picture with caption",
					"captionContent": "and custom content"
				},
				"figurePicture": {
					"settings": {
						"pictureContextClass": "default",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://via.placeholder.com/40x10",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://via.placeholder.com/400x115",
										"imageWidth": "400w"
									},
									{
										"src": "https://via.placeholder.com/800x229",
										"imageWidth": "800w"
									},
									{
										"src": "https://via.placeholder.com/1200x343",
										"imageWidth": "1200w"
									},
									{
										"src": "https://via.placeholder.com/1600x458",
										"imageWidth": "1600w"
									},
									{
										"src": "https://via.placeholder.com/2000x572",
										"imageWidth": "2000w"
									},
									{
										"src": "https://via.placeholder.com/2400x686",
										"imageWidth": "2400w"
									},
									{
										"src": "https://via.placeholder.com/2800x800",
										"imageWidth": "2800w"
									},
									{
										"src": "https://via.placeholder.com/3200x915",
										"imageWidth": "3200w"
									}
								]
							}
						]
					}
				}
			}
		},
		"audio": {
			"docs": {
				"variationName": "Audio and caption",
				"sectionCenter": true
			},
			"settings": {
				"figureContextClass": "audio"
			},
			"content": {
				"figureCaption": {
					"captionHeadline": "My custom audio with caption",
					"captionContent": "4:00 Min | 25.03.2018 | ©motionworks"
				},
				"figureAudio": {
					"settings": {
						"audioContextClass": false,
						"audioClasses": false,
						"audioOptions": "controls"
					},
					"content": {
						"audiompeg":"https://cast.itunes.uni-muenchen.de/clips/qSq6se5sif/vod/audio_only.mp3",
						"audioogg":"",
						"audioinfo":""
					}
				}
			}
		},
		"video": {
			"docs": {
				"variationName": "Video and caption",
				"sectionCenter": true
			},
			"settings": {
				"figureContextClass": "video"
			},
			"content": {
				"figureCaption": {
					"captionHeadline": "My custom video with caption",
					"captionContent": "4:00 Min | 25.03.2018 | ©motionworks"
				},
				"figureVideo": {
					"settings": {
						"videoContextClass": false,
						"videoClasses": false,
						"videoOptions": "controls buffer"
					},
					"content": {
						"videoPoster": "./media/video/big-buck-bunny_poster.jpg",
						"videoMp4": "https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
						"videoWebm": "https://clips.vorwaerts-gmbh.de/big_buck_bunny.webm",
						"videoTrack": {
							"trackSubtitle": false,
							"trackLang": false,
							"trackLabel": false
						}
					}
				}
			}
		},
		"videoembedded": {
			"docs": {
				"variationName": "Video embedded and caption",
				"sectionCenter": true
			},
			"settings": {
				"figureContextClass": "video"
			},
			"content": {
				"figureCaption": {
					"captionHeadline": "My custom video with caption",
					"captionContent": "4:00 Min | 25.03.2018 | ©motionworks"
				},
				"figureEmbeddedVideo": {
					"settings": {
						"videoEmbededContextClass": "",
						"videoEmbededClasses": "video-embeded_16_9"
					},
					"content": {
						"videoCompany": "youtube",
						"videoUrl": "https://www.youtube-nocookie.com/embed/",
						"videoId": "WUgvvPRH7Oc",
						"videoDataSecurityText":"Wenn Sie diesen eingebetteten Facebook-Post anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen. Für die Speicherung und Verarbeitung der Daten gilt die",
						"videoDataSecurityLink":"",
						"videoDataSecurityLinkText":"You-Tube-Datenschutzrichtlinie",
						"videoDataSecurityButton":"Ich habe die Datenschutzbestimmungen zur Kenntnis genommen und möchte eingebettete Inhalte von Facebook anzeigen",
						"picture": {
							"settings": {
								"pictureContextClass": "video-embeded-img",
								"pictureClasses": false,
								"lazyload": false,
								"autoSizes": true
							},
							"content": {
								"fallbackSrc": "https://via.placeholder.com/400x200",
								"alt": "Alternative text that describes the image",
								"items": [
									{
										"srcset": [
											{
												"src": "https://via.placeholder.com/400x200",
												"imageWidth": "400w"
											},
											{
												"src": "https://via.placeholder.com/800x400",
												"imageWidth": "800w"
											},
											{
												"src": "https://via.placeholder.com/1200x600",
												"imageWidth": "1200w"
											},
											{
												"src": "https://via.placeholder.com/2400x1200",
												"imageWidth": "1600w"
											}
										],
										"sizes": [
											{
												"screenWidth": "(min-width: 1440px)",
												"imageWidth": "1440px"
											},
											{
												"screenWidth": "",
												"imageWidth": "100vw"
											}
										]
									}
								]
							}
						}
					}
				}
			}
		}
	}
}

Styles

_figure.scss

/* ===================================================
FIGURE COMPONENT
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-figure"] {
	display: block;
	margin-bottom: 60px;

	// modifier
	&.is-no-margin {
		margin-bottom: 0;
	}

	.figure__wrapper {
		position: relative;
	}

	.figure__zoom {
		@include hidden-text();

		display: none;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 40px;
		height: 40px;
		background-color: rgba($color-dark, 1);
		cursor: pointer;
		transition: background $animation-duration-std $animation-easing-std, border $animation-duration-std $animation-easing-std;
		border: 1px solid transparent;

		@include bp($bp-tablet-p) {
			display: block;
		}

		@include print() {
			display: none;
		}

		&:hover,
		&.a11y-focus-key {
			background-color: rgba($color-white, 1);
			border: 1px solid $color-green;

			&::before {
				opacity: 0;
			}

			&::after {
				opacity: 1;
			}
		}

		&::before {
			@include pseudo();
			@include sprites-icon-expand-white();
			@include centering(hv);

			position: absolute;
			transition: opacity $animation-duration-std $animation-easing-std;
			opacity: 1;
		}

		&::after {
			@include pseudo();
			@include sprites-icon-expand-green();
			@include centering(hv);

			position: absolute;
			transition: opacity $animation-duration-std $animation-easing-std;
			opacity: 0;
		}

		@include hcm() {
			font-size: 16px;
			color: $color-dark;
			height: auto;
			width: auto;
			background: transparent;
			padding: 5px;
		}
	}

	.figure__play-lbvideo {
		@include hidden-text();
		@include centering(hv);

		cursor: pointer;
		outline: 0;
		width: 80px;
		height: 80px;
		display: block;
		position: absolute;
		cursor: pointer;
		border: 1px solid transparent;
		background-color: transparent;

		@include print() {
			display: none;
		}

		&:hover,
		&.a11y-focus-key {

			border: 1px solid transparent;

			&::before {
				opacity: 0;
			}

			&::after {
				opacity: 1;
			}
		}

		&::before {
			@include pseudo();
			@include sprites-icon-video-big-black();

			position: absolute;
			transition: opacity $animation-duration-std $animation-easing-std;
			opacity: 1;
			top: 0px;
			left: 0px;
			transform: scale(.6);

			@include bp($bp-tablet-p) {
				transform: scale(.8);
			}
		}

		&::after {
			@include pseudo();
			@include sprites-icon-video-big-green();

			position: absolute;
			transition: opacity $animation-duration-std $animation-easing-std;
			opacity: 0;
			background-color: $color-white;
			top: 0px;
			left: 0px;
			transform: scale(.6);

			@include bp($bp-tablet-p) {
				transform: scale(.8);
			}
		}

		@include hcm() {
			font-size: 16px;
			color: $color-dark;
			height: auto;
			width: auto;
			background: transparent;
			padding: 5px;
		}
	}

	.figure__play-icon {
		@include centering(hv);

		cursor: pointer;
		display: block;
		height: 80px;
		width: 80px;

		@include print() {
			display: none;
		}

		&::before {
			@include pseudo();
			@include sprites-icon-video-big-black();

			position: absolute;
			transition: opacity $animation-duration-std $animation-easing-std;
			opacity: 1;
			transform: scale(.6);

			@include bp($bp-tablet-p) {
				transform: scale(.8);
			}
		}

		&::after {
			@include pseudo();
			@include sprites-icon-video-big-green();

			transition: opacity $animation-duration-std $animation-easing-std;
			opacity: 0;
			transform: scale(.6);
			background-color: $color-white;

			@include bp($bp-tablet-p) {
				transform: scale(.8);
			}
		}

		@include hcm() {
			font-size: 16px;
			color: $color-dark;
			height: auto;
			width: auto;
			background: transparent;
			padding: 5px;
		}

		.figure__play-text {
			@include aural();
		}
	}

	.figure__caption-headline {
		display: block;
		width: 100%;
		margin-left: 0;
		font-size: 1.3rem;
		line-height: (17/13);
		font-family: $font-bold;
		font-weight: 700;
		margin-top: 10px;
		margin-bottom: 0;
	}

	.figure__caption-content {
		width: 100%;
		flex: none;
		margin-left: 0;
		margin-top: 5px;
		margin-bottom: 0;
		font-size: 1.2rem;
		line-height: (17/12);
		font-family: $font-regular;
		font-weight: 400;
		letter-spacing: .5px;
		color: $color-dark;
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-figure--default {

	.figure__caption {
		margin-top: 5px;
		display: inline-block;
	}
}

/* ---------------------------------------------------
Context: RTE
--------------------------------------------------- */
.c-figure--rte {
	@include bp($bp-tablet-p) {
		@include grid-column-width(8);
		@include grid-push-h(2);
	}

	/*
	MODIFIERS
	----------------------- */
	&.is-rte-embed {
		@include grid-column(12);

		display: inline-block;
		margin-bottom: 50px;

		@include bp($bp-tablet-p) {
			@include grid-column(6);
		}

		@include bp($bp-tablet-l) {
			@include grid-column(4);
		}

		/*
		MODIFIERS
		----------------------- */
		&.is-right {
			float: right;
			margin-left: 40px;
		}

		&.is-left {
			margin-left: 0;
			margin-right: 40px;
		}
	}

	.figure__caption {
		margin-top: 5px;
		display: inline-block;
	}

	.picture__image {
		@include print() {
			width: 25% !important;
		}
	}
}

/* ---------------------------------------------------
Context: Teaser
--------------------------------------------------- */
.c-figure--teaser-double,
.c-figure--teaser-dossier {
	margin-bottom: 0;

	.figure__caption {
		margin-top: 5px;
		display: inline-block;
	}
}

/* ---------------------------------------------------
Context: Video
--------------------------------------------------- */
.c-figure--video {
	@include print() {
		display: none;
	}

	.figure__caption {
		margin-top: 5px;
		display: inline-block;
	}
}

/* ---------------------------------------------------
Context: Audio
--------------------------------------------------- */
.c-figure--audio {
	@include print() {
		display: none;
	}

	.figure__caption {
		margin-top: 5px;
		display: inline-block;
	}
}

/* ---------------------------------------------------
Context: Overlay
--------------------------------------------------- */
.c-figure--overlay {
	margin: 0 auto;
	max-width: 100vh;
	width: 100%;
	height: 100%;
	max-height: 100vw;

	&.is-person {
		max-width: $bp-desktop-m;
		max-height: none;
	}

	.figure__videoembed {
		position: relative;
		padding-top: 0;
		height: 0;
		overflow: hidden;
	}

	.figure__videoembed_16_9, .figure__videoembed {
		padding-bottom: 56.25%;
	}
	.figure__videoembed_4_3 {
		padding-bottom: 75%;
	}

	.figure__youtube, .figure__vimeo, .figure__lrzplayer {
		position: absolute;
		padding-top: 0;
		height: 0;
		overflow: hidden;
		width: 100%;
		height: 100%;

	}

	.figure__caption-headline {
		color: $color-white;
	}

	.figure__caption {
		display: block;
		margin: 10px auto 0;
		padding: 0 20px;

		@include bp($bp-tablet-p) {
			padding: 0;
		}
	}

	.figure__caption-content {
		color: $color-white;
	}

	.figure__metainfo-list {
		color: $color-gray;
		font-size: 1.2rem;
		line-height: (17/12);
		display: block;
		margin: 10px auto 0;
		padding: 0 20px;

		@include bp($bp-tablet-p) {
			padding: 0;
		}
	}

	.figure__metainfo-list-item {
		position: relative;
		display: inline-block;
		padding: 0 5px;
		color: $color-white;

		&:first-child {
			padding-left: 0;
		}

		&:last-child {

			&::after {
				content: none;
			}
		}

		&::after {
			@include pseudo();

			top: 50%;
			right: -2px;
			width: 1px;
			height: 10px;
			transform: translateY(-50%);
			background-color: $color-gray;
		}
	}

	.figure__metainfo-link {
		color: $color-green60;
		text-decoration: none;

		&:hover,
		&.a11y-focus-key {
			color: $color-white;

			&::before {
				@include sprites-icon-arrow-white();

				position: relative;
				display: inline-block;
			}
		}

		&::before {
			@include pseudo();
			@include sprites-icon-arrow-green60();

			position: relative;
			display: inline-block;
			top: 3px;
			margin-right: 5px;
			vertical-align: unset;
			transform: scale(.7);
		}
	}
}

.c-figure--overlay--slider {
	margin-bottom: 10px;
}

/* ---------------------------------------------------
Context: SearchOverlayTeaser
--------------------------------------------------- */
.c-figure--search-overlay-teaser {
	margin-bottom: 15px;
}

/* ---------------------------------------------------
Context: Header-Frontpage
--------------------------------------------------- */
.c-figure--header-frontpage {
	margin-bottom: 0;
}

/* ---------------------------------------------------
Context: Header-Newsroom
--------------------------------------------------- */
.c-figure--header-newsroom {
	margin-bottom: 0;
}

/* ---------------------------------------------------
Context: Header-Newsroom
--------------------------------------------------- */
.c-figure--teaser-single {
	margin: 0 !important;
	width: 100% !important;
	flex: 0 0 100% !important;
	position: absolute;
	bottom: 0;
}

HTML Output

Default with picture

<figure class="c-figure--simple" data-css="c-figure" id="figure-content">
	<div class="figure__wrapper">
		<picture class="c-picture--default
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://via.placeholder.com/400x200  400w  , 
				 https://via.placeholder.com/800x400  800w  , 
				 https://via.placeholder.com/1200x600  1200w  , 
				 https://via.placeholder.com/1600x800  1600w  , 
				 https://via.placeholder.com/2000x1000  2000w  , 
				 https://via.placeholder.com/2400x1200  2400w  , 
				 https://via.placeholder.com/2800x1400  2800w  , 
				 https://via.placeholder.com/3200x1600  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://via.placeholder.com/20x10" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
	</div>
</figure>

Default with picture

<figure class="c-figure--rte" data-css="c-figure" id="figure-content">
	<div class="figure__wrapper">
		<picture class="c-picture--rte
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://via.placeholder.com/400x200  400w  , 
				 https://via.placeholder.com/800x400  800w  , 
				 https://via.placeholder.com/1200x600  1200w  , 
				 https://via.placeholder.com/1600x800  1600w  , 
				 https://via.placeholder.com/2000x1000  2000w  , 
				 https://via.placeholder.com/2400x1200  2400w  , 
				 https://via.placeholder.com/2800x1400  2800w  , 
				 https://via.placeholder.com/3200x1600  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://via.placeholder.com/20x10" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">Caption Headline</h3>
			<p class="figure__caption-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
		</div>
	</figcaption>
</figure>

Default with picture

<figure class="c-figure--rte is-rte-embed is-right" data-css="c-figure" id="figure-content" data-js-module="overlay-handler">
	<div class="figure__wrapper">
		<picture class="c-picture--default
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://via.placeholder.com/400x400  400w  , 
				 https://via.placeholder.com/800x800  800w  , 
				 https://via.placeholder.com/1200x1200  1200w  , 
				 https://via.placeholder.com/1600x1600  1600w  , 
				 https://via.placeholder.com/2000x2000  2000w  , 
				 https://via.placeholder.com/2400x2400  2400w  , 
				 https://via.placeholder.com/2800x2800  2800w  , 
				 https://via.placeholder.com/3200x3200  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://via.placeholder.com/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
		<button type="button" class="c-cta--image-zoom" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "image": { "src": "https://via.placeholder.com/2000x1000", "altText": "Some alt text"}, "caption": {"captionHeadline": "Caption Headline", "captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "© imageworks"}]} }'>
			Vergrößern
		</button>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">Caption Headline</h3>
			<p class="figure__caption-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
		</div>
	</figcaption>
</figure>

Default with video in Lightbox

<figure class="c-figure--rte is-rte-embed is-left" data-css="c-figure" id="figure-content" data-js-module="overlay-handler">
	<div class="figure__wrapper">
		<picture class="c-picture--default
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://via.placeholder.com/400x400  400w  , 
				 https://via.placeholder.com/800x800  800w  , 
				 https://via.placeholder.com/1200x1200  1200w  , 
				 https://via.placeholder.com/1600x1600  1600w  , 
				 https://via.placeholder.com/2000x2000  2000w  , 
				 https://via.placeholder.com/2400x2400  2400w  , 
				 https://via.placeholder.com/2800x2800  2800w  , 
				 https://via.placeholder.com/3200x3200  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://via.placeholder.com/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
		<button type="button" class="figure__play-lbvideo" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content="{ &quot;youtube&quot;: {&quot;id&quot;: &quot;mM5_T-F1Yn4&quot;,&quot;format&quot;: &quot;4_3&quot;}, &quot;caption&quot;: {&quot;captionHeadline&quot;:&quot;Youtube Video Headline&quot;,&quot;captionContent&quot;:&quot;Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.&quot;} }">Lightbox öffnen</button>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">Caption Headline</h3>
			<p class="figure__caption-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
		</div>
	</figcaption>
</figure>

Default with picture

<figure class="c-figure--rte is-rte-embed is-left" data-css="c-figure" id="figure-content" data-js-module="overlay-handler">
	<div class="figure__wrapper">
		<picture class="c-picture--default
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://via.placeholder.com/400x400  400w  , 
				 https://via.placeholder.com/800x800  800w  , 
				 https://via.placeholder.com/1200x1200  1200w  , 
				 https://via.placeholder.com/1600x1600  1600w  , 
				 https://via.placeholder.com/2000x2000  2000w  , 
				 https://via.placeholder.com/2400x2400  2400w  , 
				 https://via.placeholder.com/2800x2800  2800w  , 
				 https://via.placeholder.com/3200x3200  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://via.placeholder.com/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
		<button type="button" class="c-cta--image-zoom" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "image": { "src": "https://via.placeholder.com/2000x1000", "altText": "Some alt text"}, "caption": {"captionHeadline": "Caption Headline", "captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "© imageworks"}]} }'>
			Vergrößern
		</button>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">Caption Headline</h3>
			<p class="figure__caption-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
		</div>
	</figcaption>
</figure>

Picture and caption

<figure class="c-figure--caption" data-css="c-figure" id="figure-caption">
	<div class="figure__wrapper">
		<picture class="c-picture--default
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://via.placeholder.com/400x115  400w  , 
				 https://via.placeholder.com/800x229  800w  , 
				 https://via.placeholder.com/1200x343  1200w  , 
				 https://via.placeholder.com/1600x458  1600w  , 
				 https://via.placeholder.com/2000x572  2000w  , 
				 https://via.placeholder.com/2400x686  2400w  , 
				 https://via.placeholder.com/2800x800  2800w  , 
				 https://via.placeholder.com/3200x915  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://via.placeholder.com/40x10" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">My custom picture with caption</h3>
			<p class="figure__caption-content">and custom content</p>
		</div>
	</figcaption>
</figure>

Audio and caption

<figure class="c-figure--audio" data-css="c-figure">
	<div class="figure__wrapper">
		<audio class="c-audio--default" data-css="c-audio" controls>
			<source src="https://cast.itunes.uni-muenchen.de/clips/qSq6se5sif/vod/audio_only.mp3" type="audio/mpeg">
		</audio>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">My custom audio with caption</h3>
			<p class="figure__caption-content">4:00 Min | 25.03.2018 | ©motionworks</p>
		</div>
	</figcaption>
</figure>

Video and caption

<figure class="c-figure--video" data-css="c-figure">
	<div class="figure__wrapper">
		<video class="c-video--default" data-css="c-video" poster="././media/video/big-buck-bunny_poster.jpg" controls buffer tabindex="0">
			<source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
			<source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type='video/webm; codecs="vp8, vorbis"' />
			<track src="" kind="" srclang="" label="" />
		</video>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">My custom video with caption</h3>
			<p class="figure__caption-content">4:00 Min | 25.03.2018 | ©motionworks</p>
		</div>
	</figcaption>
</figure>

Video embedded and caption

<figure class="c-figure--video" data-css="c-figure">
	<div class="figure__wrapper">
		<div class="c-video-embeded--default" data-css="c-video-embeded" data-js-module="video-embeded">
			<div class="video-embeded__container video-embeded__youtube">
				<div class="video-embeded__img">
					<picture class="c-picture--video-embeded-img
														" data-css="c-picture">
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
														 https://via.placeholder.com/400x200  400w  , 
														 https://via.placeholder.com/800x400  800w  , 
														 https://via.placeholder.com/1200x600  1200w  , 
														 https://via.placeholder.com/2400x1200  1600w  " sizes=" 
														  (min-width: 1440px) 1440px 
														  ,   100vw " />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
														 picture__image" src="https://via.placeholder.com/400x200" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
				<div class="video-embeded__content-container">
					<div class="video-embeded__content">
						<p>Wenn Sie diesen eingebetteten Facebook-Post anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen. Für die Speicherung und Verarbeitung der Daten gilt die</p>
						<p>Für die Speicherung und Verarbeitung der Daten gilt die <a href="https://www.facebook.com/help/instagram/155833707900388" class="is-external" target="_blank">You-Tube-Datenschutzrichtlinie</a>.</p>
					</div>
					<div class="video-embeded__button">
						<button type="button" class="video-embeded__link" data-company="youtube" data-js-item="js-video-embeded-youtube">Ich habe die Datenschutzbestimmungen zur Kenntnis genommen und möchte eingebettete Inhalte von Facebook anzeigen</button>
						<!-- <a href="#" class="video-embeded__link" data-company="youtube" data-js-item="js-video-embeded-youtube">Ich habe die Datenschutzbestimmungen zur Kenntnis genommen und möchte eingebettete Inhalte von Facebook anzeigen</a> -->
					</div>
					<div style="clear: both;"></div>
				</div>
			</div>
			<div class="video-embeded_box video-embeded_16_9 video-embeded_company_youtube video-embeded__hidden" data-src="<iframe width='560' height='315' src='https://www.youtube-nocookie.com/embed/WUgvvPRH7Oc'' frameborder='0' allow='autoplay; fullscreen'
								allowfullscreen></iframe>" data-company="youtube">
			</div>
		</div>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">My custom video with caption</h3>
			<p class="figure__caption-content">4:00 Min | 25.03.2018 | ©motionworks</p>
		</div>
	</figcaption>
</figure>

Wonach suchst du?

Datenschutzhinweis mit Link