TEASER-DOSSIER (Teaser Module )
src/app/shared/components/teaser-dossier/templates
Demo Section
Each variation will be presented in the following section.
Readme
teaserDossier (component)
Description
This module serves as the template for a dossier-teaser. It contains an image, a headline, a descriptive text, a link and an optional video icon. The image ca be positioned to the left or right side.
JIRA
Requirements
- @veams/component-figure - Figure component in Veams.
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/teaser-dossier
Fields
teaser-dossier.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.teaserDossierClasses | String | '' |
Modifier classes for component |
| settings.teaserDossierContextClass | String | 'default' |
Context class of component |
Content
| Parameter | Type | Description |
|---|---|---|
| content.figure | Object | Data for embedded figure component |
| content.headline | String | Headline |
| content.text | String | Text |
| content.linkExternal | Boolean | If set to true the clickarea link will get a target blank attribute |
SASS
Modifier Classes
There are modifier classes you can add to c-teaser-dossier:
| Modifier | Description |
|---|---|
| is-right | Will set the image to the right side |
| is-external | Will set an external icon before the link text |
| is-full-width | Remove max-width from nested grid-row |
Templates
teaser-dossier.hbs
<div class="c-teaser-dossier{{#if settings.teaserDossierContextClass}}--{{settings.teaserDossierContextClass}}{{else}}--default{{/if}}{{#if settings.teaserDossierClasses}} {{settings.teaserDossierClasses}}{{/if}}"
data-css="c-teaser-dossier" data-js-module="teaser-dossier"{{#if settings.teaserDossierJsOptions}}
data-js-options='{{stringify settings.teaserDossierJsOptions}}'{{/if}}>
{{#wrapWith "grid__container"}}
{{#wrapWith "grid__row"}}
<div class="teaser-dossier__wrapper">
{{#if content.figure}}
<div class="teaser-dossier__image-section-wrapper">
<div class="teaser-dossier__image-section">
{{#with content.figure}}
{{> figure}}
{{/with}}
</div>
</div>
{{/if}}
<div class="teaser-dossier__text-section-wrapper">
<div class="teaser-dossier__text-section">
<h3 class="teaser-dossier__headline">
{{content.headline}}
</h3>
<p class="teaser-dossier__text">{{{content.text}}}</p>
<a class="teaser-dossier__link{{#if content.linkExternal}} is-external{{/if}}{{#if
content.linkClasses}} {{content.linkClasses}}{{/if}}"{{#if content.linkExternal}}
target="_blank"{{/if}} href="{{content.linkHref}}">{{content.linkText}}</a>
</div>
</div>
<a href="{{content.linkHref}}" class="teaser-dossier__a11y-clickarea"{{#if content.linkExternal}}
target="_blank"{{/if}} aria-hidden="true" tabindex="-1"></a>
</div>
{{/wrapWith}}
{{/wrapWith}}
</div>
Data File
teaser-dossier.hjson
{
"title": "Teaser Dossier",
"variations": {
"default": {
"docs": {
"variationName": "Default Teaser Dossier: Text Right Image left"
},
"settings": {
"teaserDossierContextClass": "default",
"teaserDossierClasses": false
},
"content": {
"headline": "Dossier: Welcome to our internationals",
"text": "Dossier: Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores",
"linkHref": "#",
"linkText": "Weiterlesen",
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "teaser-dossier",
"figureJsModule": true
},
"content": {
"figurePicture": {
"settings": {
"pictureContextClass": "animated-objects",
"pictureClasses": false,
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/40x40",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/400x400",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x800",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x1200",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x1600",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x2000",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x2400",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x2800",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x3200",
"imageWidth": "3200w"
}
],
"media": "(min-width:767px)"
},
{
"srcset": [
{
"src": "https://placehold.co/400x225",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x450",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x675",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x900",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x1125",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x1350",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x1575",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x1800",
"imageWidth": "3200w"
}
],
"media": "(max-width: 768px)"
}
]
}
}
}
}
}
},
"video": {
"docs": {
"variationName": "Default Teaser Dossier:: Text Right Image left"
},
"settings": {
"teaserDossierContextClass": "default",
"teaserDossierClasses": false
},
"content": {
"headline": "Dossier: Welcome to our internationals",
"text": "Dossier: Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores",
"linkHref": "#",
"linkText": "Weiterlesen",
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "teaser-dossier",
"figureJsModule": true
},
"content": {
"figurePlay": true,
"figurePlayText": "Video abspielen",
"figurePicture": {
"settings": {
"pictureContextClass": "animated-objects",
"pictureClasses": false,
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/40x40",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/400x400",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x800",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x1200",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x1600",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x2000",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x2400",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x2800",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x3200",
"imageWidth": "3200w"
}
],
"media": "(min-width:767px)"
},
{
"srcset": [
{
"src": "https://placehold.co/400x225",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x450",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x675",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x900",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x1125",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x1350",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x1575",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x1800",
"imageWidth": "3200w"
}
],
"media": "(max-width: 768px)"
}
]
}
}
}
}
}
},
"imageRight": {
"docs": {
"variationName": "Teaser Dossier: Text left Image right"
},
"settings": {
"teaserDossierContextClass": "default",
"teaserDossierClasses": "is-right"
},
"content": {
"headline": "Dossier: Welcome to our internationals",
"text": "Dossier: Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores",
"linkHref": "#",
"linkText": "Weiterlesen",
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "teaser-dossier",
"figureJsModule": true
},
"content": {
"figurePicture": {
"settings": {
"pictureContextClass": "animated-objects",
"pictureClasses": false,
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/40x23",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/400x400",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x800",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x1200",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x1600",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x2000",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x2400",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x2800",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x3200",
"imageWidth": "3200w"
}
],
"media": "(min-width:767px)"
},
{
"srcset": [
{
"src": "https://placehold.co/400x225",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x450",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x675",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x900",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x1125",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x1350",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x1575",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x1800",
"imageWidth": "3200w"
}
],
"media": "(max-width: 768px)"
}
]
}
}
}
}
}
}
}
}
Styles
teaser-dossier.scss
/* ===================================================
component: teaser-dossier
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-teaser-dossier"] {
/*
MODIFIERS
----------------------- */
&.is-right {
.teaser-dossier__image-section-wrapper {
order: 2;
}
.teaser-dossier__text-section-wrapper {
order: 1;
}
}
&.is-full-width {
margin-bottom: 50px;
.grid__row {
max-width: none;
}
}
.teaser-dossier__wrapper {
position: relative;
margin-bottom: 30px;
@include bp($bp-tablet-p) {
display: flex;
justify-content: flex-start;
margin-bottom: 40px;
}
&:hover,
&.a11y-focus-key {
.teaser-dossier__link {
color: $color-white;
&::before {
opacity: 0;
}
&::after {
opacity: 1;
}
}
.figure__play-icon {
&::before {
opacity: 0;
transition: opacity $animation-duration-std $animation-easing-std;
}
&::after {
opacity: 1;
transition: opacity $animation-duration-std $animation-easing-std;
}
}
}
}
.teaser-dossier__link {
position: relative;
font-family: $font-bold;
text-decoration: none;
font-size: 1.5rem;
line-height: (22/15);
letter-spacing: .28px;
color: $color-green60;
padding-left: 20px;
transition: all $animation-duration-std $animation-easing-std;
&::before {
@include pseudo();
@include sprites-icon-arrow-green60();
position: absolute;
top: 2px;
left: 0;
opacity: 1;
transition: opacity $animation-duration-std $animation-easing-std;
}
&::after {
@include pseudo();
@include sprites-icon-arrow-white();
position: absolute;
top: 2px;
left: 0;
opacity: 0;
transition: opacity $animation-duration-std $animation-easing-std;
}
@include bp($bp-desktop-m) {
font-size: 1.6rem;
line-height: (15/16);
letter-spacing: 0;
}
@include print() {
display: none;
}
}
.teaser-dossier__image-section-wrapper {
@include grid-column-width(12);
display: block;
@include bp($bp-tablet-p) {
@include grid-column-width(6);
display: flex;
order: 1;
}
@include print() {
width: 25%;
}
}
.teaser-dossier__image-section {
width: 100%;
}
.teaser-dossier__text-section-wrapper {
@include grid-column-width(12);
display: block;
padding: 20px;
position: relative;
background-color: $color-dark;
@include bp($bp-tablet-p) {
@include grid-column-width(6);
padding: 0 20px;
display: flex;
order: 2;
}
@include print() {
background-color: $color-white;
padding: 20px 0;
}
}
.teaser-dossier__text-section {
@include bp($bp-tablet-p) {
@include centering(v);
position: absolute;
left: 0;
padding: 40px;
}
}
.teaser-dossier__headline {
@include headline-h1-styles();
color: $color-white;
@include print() {
color: $color-black;
}
}
.teaser-dossier__text {
font-family: $font-light;
font-size: 1.8rem;
line-height: (24/18);
letter-spacing: 0;
color: $color-white;
margin-bottom: 20px;
@include bp($bp-desktop-m) {
font-size: 2.2rem;
line-height: (32/22);
letter-spacing: .2px;
margin-bottom: 35px;
}
@include print() {
color: $color-black;
}
}
.teaser-dossier__a11y-clickarea {
@include clickarea();
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-teaser-dossier--default {
}
HTML Output
Default Teaser Dossier: Text Right Image left
<div class="c-teaser-dossier--default" data-css="c-teaser-dossier" data-js-module="teaser-dossier">
<div class="grid__container">
<div class="grid__row">
<div class="teaser-dossier__wrapper">
<div class="teaser-dossier__image-section-wrapper">
<div class="teaser-dossier__image-section">
<figure class="c-figure--teaser-dossier" data-css="c-figure" data-js-module="true">
<div class="figure__wrapper">
<picture class="c-picture--animated-objects
lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/400x400 400w ,
https://placehold.co/800x800 800w ,
https://placehold.co/1200x1200 1200w ,
https://placehold.co/1600x1600 1600w ,
https://placehold.co/2000x2000 2000w ,
https://placehold.co/2400x2400 2400w ,
https://placehold.co/2800x2800 2800w ,
https://placehold.co/3200x3200 3200w " media=" (min-width:767px)" />
<source data-srcset="
https://placehold.co/400x225 400w ,
https://placehold.co/800x450 800w ,
https://placehold.co/1200x675 1200w ,
https://placehold.co/1600x900 1600w ,
https://placehold.co/2000x1125 2000w ,
https://placehold.co/2400x1350 2400w ,
https://placehold.co/2800x1575 2800w ,
https://placehold.co/3200x1800 3200w " media=" (max-width: 768px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
</div>
<div class="teaser-dossier__text-section-wrapper">
<div class="teaser-dossier__text-section">
<h3 class="teaser-dossier__headline">
Dossier: Welcome to our internationals
</h3>
<p class="teaser-dossier__text">Dossier: Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores</p>
<a class="teaser-dossier__link" href="#">Weiterlesen</a>
</div>
</div>
<a href="#" class="teaser-dossier__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
</div>
</div>
</div>
</div>Default Teaser Dossier:: Text Right Image left
<div class="c-teaser-dossier--default" data-css="c-teaser-dossier" data-js-module="teaser-dossier">
<div class="grid__container">
<div class="grid__row">
<div class="teaser-dossier__wrapper">
<div class="teaser-dossier__image-section-wrapper">
<div class="teaser-dossier__image-section">
<figure class="c-figure--teaser-dossier" data-css="c-figure" data-js-module="true">
<div class="figure__wrapper">
<picture class="c-picture--animated-objects
lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/400x400 400w ,
https://placehold.co/800x800 800w ,
https://placehold.co/1200x1200 1200w ,
https://placehold.co/1600x1600 1600w ,
https://placehold.co/2000x2000 2000w ,
https://placehold.co/2400x2400 2400w ,
https://placehold.co/2800x2800 2800w ,
https://placehold.co/3200x3200 3200w " media=" (min-width:767px)" />
<source data-srcset="
https://placehold.co/400x225 400w ,
https://placehold.co/800x450 800w ,
https://placehold.co/1200x675 1200w ,
https://placehold.co/1600x900 1600w ,
https://placehold.co/2000x1125 2000w ,
https://placehold.co/2400x1350 2400w ,
https://placehold.co/2800x1575 2800w ,
https://placehold.co/3200x1800 3200w " media=" (max-width: 768px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
<span class="figure__play-icon"><span class="figure__play-text">Video abspielen</span></span>
</div>
</figure>
</div>
</div>
<div class="teaser-dossier__text-section-wrapper">
<div class="teaser-dossier__text-section">
<h3 class="teaser-dossier__headline">
Dossier: Welcome to our internationals
</h3>
<p class="teaser-dossier__text">Dossier: Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores</p>
<a class="teaser-dossier__link" href="#">Weiterlesen</a>
</div>
</div>
<a href="#" class="teaser-dossier__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
</div>
</div>
</div>
</div>Teaser Dossier: Text left Image right
<div class="c-teaser-dossier--default is-right" data-css="c-teaser-dossier" data-js-module="teaser-dossier">
<div class="grid__container">
<div class="grid__row">
<div class="teaser-dossier__wrapper">
<div class="teaser-dossier__image-section-wrapper">
<div class="teaser-dossier__image-section">
<figure class="c-figure--teaser-dossier" data-css="c-figure" data-js-module="true">
<div class="figure__wrapper">
<picture class="c-picture--animated-objects
lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/400x400 400w ,
https://placehold.co/800x800 800w ,
https://placehold.co/1200x1200 1200w ,
https://placehold.co/1600x1600 1600w ,
https://placehold.co/2000x2000 2000w ,
https://placehold.co/2400x2400 2400w ,
https://placehold.co/2800x2800 2800w ,
https://placehold.co/3200x3200 3200w " media=" (min-width:767px)" />
<source data-srcset="
https://placehold.co/400x225 400w ,
https://placehold.co/800x450 800w ,
https://placehold.co/1200x675 1200w ,
https://placehold.co/1600x900 1600w ,
https://placehold.co/2000x1125 2000w ,
https://placehold.co/2400x1350 2400w ,
https://placehold.co/2800x1575 2800w ,
https://placehold.co/3200x1800 3200w " media=" (max-width: 768px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/40x23" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
</div>
<div class="teaser-dossier__text-section-wrapper">
<div class="teaser-dossier__text-section">
<h3 class="teaser-dossier__headline">
Dossier: Welcome to our internationals
</h3>
<p class="teaser-dossier__text">Dossier: Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores</p>
<a class="teaser-dossier__link" href="#">Weiterlesen</a>
</div>
</div>
<a href="#" class="teaser-dossier__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
</div>
</div>
</div>
</div>