Each variation will be presented in the following section.
350 Zeichen dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elit.
350 Zeichen dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elit
350 Zeichen dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elit
``
component)This blueprint is based on the blueprint of Veams. Component with an optional picture that contains an article with an H1 and a paragraph.
veams install bp absolute/filepath/to/header-article
header-article.hbs| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.headerArticleClasses | String | '' |
Modifier classes for component |
| settings.headerArticleContextClass | String | 'default' |
Context class of component |
| Parameter | Type | Description |
|---|---|---|
| content.articleHeadline | String | Content of the article headline |
| content.articleParagraph | String | Content of the article paragraph |
| content.figure | Object | Object containing Settings and Content objects for the figure |
| Variable | Default | Description |
|---|---|---|
| $padding-top-mobile | 27px |
Basic mobile padding |
| $padding-top-tablet | 55px |
Basic tablet padding |
| $padding-top-desktop | 80px |
Basic desktop padding |
<div class="c-header-article{{#if settings.headerArticleContextClass}}--{{settings.headerArticleContextClass}}{{else}}--default{{/if}}{{#if settings.headerArticleClasses}} {{settings.headerArticleClasses}}{{/if}}"
data-css="c-header-article">
{{#wrapWith "grid__container"}}
{{#wrapWith "grid__row"}}
<div class="header-article__container">
<article class="header-article__article-wrapper">
<h1 class="header-article__article-headline">{{content.articleHeadline}}</h1>
<p class="header-article__article-paragraph">{{content.articleParagraph}}</p>
{{#if content.figure}}
<div class="header-article__picture-container">
{{#with content.figure}}
{{> figure }}
{{/with}}
</div>
{{/if}}
</article>
</div>
{{/wrapWith}}
{{/wrapWith}}
</div>
{
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"headerArticleContextClass": "default",
"headerArticleClasses": "is-with-picture"
},
"content": {
"figure": {
"settings": {
"figureId": "",
"figureContextClass": "default",
"figureClasses": "is-no-margin",
"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/800x800",
"imageWidth": "800w"
},
{
"src": "https://via.placeholder.com/1600x1600",
"imageWidth": "1600w"
},
{
"src": "https://via.placeholder.com/2400x2400",
"imageWidth": "2400w"
},
{
"src": "https://via.placeholder.com/3200x3200",
"imageWidth": "3200w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "617px"
},
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "41.66667vw"
},
{
"screenWidth": "(max-width: 767px)",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
]
}
]
}
}
}
},
"articleHeadline": "HM3 | Header Artikel | Kasd guber gren, no Searking Takimat Sanctus est",
"articleParagraph":
"350 Zeichen dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elit.",
"pictureHref": "#",
"pictureAnchor": "Content for image anchor"
}
},
"video": {
"docs": {
"variationName": "Default"
},
"settings": {
"headerArticleContextClass": "default",
"headerArticleClasses": "is-with-picture"
},
"content": {
"figure": {
"settings": {
"figureId": "",
"figureContextClass": "default",
"figureClasses": "is-no-margin",
"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/800x800",
"imageWidth": "800w"
},
{
"src": "https://via.placeholder.com/1600x1600",
"imageWidth": "1600w"
},
{
"src": "https://via.placeholder.com/2400x2400",
"imageWidth": "2400w"
},
{
"src": "https://via.placeholder.com/3200x3200",
"imageWidth": "3200w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "617px"
},
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "41.66667%"
},
{
"screenWidth": "(max-width: 767px)",
"imageWidth": "calc(100% - ((100% / 14) * 2))"
}
]
}
]
}
}
}
},
"articleHeadline": "HM3 | Header Artikel | Kasd guber gren, no Searking Takimat Sanctus est",
"articleParagraph":
"350 Zeichen dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elit",
"pictureHref": "#",
"pictureAnchor": "Content for image anchor"
}
},
"noPicture": {
"docs": {
"variationName": "No picture"
},
"settings": {
"headerArticleContextClass": "default",
"headerArticleClasses": false
},
"content": {
"articleHeadline": "HM3 | Header Artikel | Kasd guber gren, no Searking Takimat Sanctus est",
"articleParagraph":
"350 Zeichen dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elit"
}
}
}
}
/* ===================================================
component: header-article
=================================================== */
$padding-top-mobile: 27px;
$padding-top-tablet-p: 55px;
$padding-top-desktop-l: 80px;
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-header-article"] {
position: relative;
padding-top: $padding-top-mobile;
margin-bottom: 110px;
@include bp($bp-tablet-p) {
margin-bottom: 100px;
padding-top: $padding-top-tablet-p;
}
@include bp($bp-desktop-l) {
padding-top: $padding-top-desktop-l;
margin-bottom: 180px;
}
@include print() {
margin-bottom: 60px;
}
// modifier
&.is-with-picture {
padding-top: $padding-top-tablet-p;
@include bp($bp-tablet-p) {
margin-bottom: $padding-top-tablet-p * 2;
padding-top: $padding-top-mobile;
}
@include bp($bp-desktop-l) {
height: 720px;
padding-top: $padding-top-tablet-p;
margin-bottom: 80px;
overflow: hidden;
}
.header-article__container {
&::before,
&::after {
@include bp($bp-tablet-l) {
top: -$padding-top-tablet-p;
//height: calc(100% - #{$padding-top-tablet-p});
height: 100%;
}
@include bp($bp-desktop-l) {
top: -$padding-top-desktop-l;
height: calc(100% + #{$padding-top-desktop-l * 2});
}
}
}
.header-article__article-wrapper {
margin-top: $padding-top-mobile;
flex-direction: row;
flex-wrap: wrap;
}
.header-article__article-headline {
margin-top: -50px;
order: 2;
@include bp($bp-tablet-p) {
@include grid-column-width(9);
margin-bottom: 30px;
margin-top: 0;
order: 1;
}
@include bp($bp-tablet-l) {
@include grid-column-width(10);
}
@include bp($bp-desktop-m) {
@include grid-column-width(10);
}
@include bp($bp-desktop-l) {
@include grid-column-width(5);
}
}
.header-article__article-paragraph {
font-size: 1.9rem;
line-height: (28/19);
font-family: $font-light;
color: $color-dark;
order: 3;
@include bp($bp-tablet-p) {
@include grid-column-width(6);
order: 2;
}
@include bp($bp-tablet-l) {
font-size: 2rem;
line-height: (30/20);
}
@include bp($bp-desktop-m) {
@include grid-column-width(6);
@include grid-magnet(1, right, false, false);
}
@include bp($bp-desktop-l) {
@include grid-column-width(5);
@include grid-magnet(1, right, false, false);
}
}
}
.header-article__container {
position: relative;
&::before,
&::after {
@include pseudo();
background-color: $color-light;
height: calc(100% + #{$padding-top-desktop-l});
display: block;
z-index: -1;
top: -$padding-top-mobile;
@include bp($bp-tablet-p) {
top: -$padding-top-tablet-p;
height: calc(100% + #{$padding-top-tablet-p * 2});
}
@include bp($bp-desktop-l) {
top: -$padding-top-desktop-l;
height: calc(100% + #{$padding-top-desktop-l * 2});
}
@include print() {
display: none !important;
}
}
&::before {
@include grid-column-width(12);
@include bp($bp-tablet-p) {
@include grid-column-width(10);
}
@include bp($bp-tablet-l) {
@include grid-column-width(11);
}
@include bp($bp-desktop-l) {
@include grid-column-width(10);
}
}
&::after {
left: -50vw;
width: 100vw;
}
}
.header-article__article-wrapper {
display: flex;
flex-direction: column;
@include bp($bp-tablet-p) {
flex-direction: row;
flex-wrap: wrap;
}
@include bp($bp-desktop-l) {
@include clearfix();
display: block;
}
@include print() {
background-color: $color-white;
}
}
.header-article__article-headline {
@include headline-h1-styles();
@include grid-column-width(10);
color: $color-dark;
@include bp($bp-tablet-p) {
@include grid-column-width(9);
margin-bottom: 30px;
}
@include bp($bp-tablet-l) {
@include grid-column-width(10);
}
@include bp($bp-desktop-m) {
@include grid-column-width(10);
}
@include bp($bp-desktop-l) {
@include grid-column-width(9);
}
}
.header-article__article-paragraph {
@include grid-column-width(10);
font-family: $font-light;
color: $color-dark;
letter-spacing: .02rem;
font-size: 1.9rem;
line-height: (28/19);
@include bp($bp-tablet-p) {
@include grid-column-width(9);
@include grid-magnet(1, right, false, false);
padding-right: 0;
}
@include bp($bp-tablet-l) {
font-size: 2rem;
line-height: (30/20);
}
@include bp($bp-desktop-m) {
@include grid-column-width(10);
@include grid-magnet(1, right, false, false);
}
@include bp($bp-desktop-l) {
@include grid-column-width(9);
}
}
.header-article__picture-container {
position: relative;
width: calc(126% - (125% - ((100% / 14) * 15)));
right: -8%;
order: 1;
top: -$padding-top-tablet-p * 1.5;
@include bp($bp-tablet-p) {
@include grid-column-width(5);
margin-left: 0;
order: 3;
top: 0;
right: 0;
}
@include bp($bp-desktop-m) {
@include grid-column-width(5);
}
@include bp($bp-desktop-l) {
@include grid-column-width(6);
position: absolute;
}
@include print() {
width: calc(25%);
right: 0;
top: -$padding-top-tablet-p * 1.5;
}
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-header-article--default {
}
<div class="c-header-article--default is-with-picture" data-css="c-header-article">
<div class="grid__container">
<div class="grid__row">
<div class="header-article__container">
<article class="header-article__article-wrapper">
<h1 class="header-article__article-headline">HM3 | Header Artikel | Kasd guber gren, no Searking Takimat Sanctus est</h1>
<p class="header-article__article-paragraph">350 Zeichen dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elit.</p>
<div class="header-article__picture-container">
<figure class="c-figure--default is-no-margin" data-css="c-figure" 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/800x800 800w ,
https://via.placeholder.com/1600x1600 1600w ,
https://via.placeholder.com/2400x2400 2400w ,
https://via.placeholder.com/3200x3200 3200w " sizes="
(min-width: 1440px) 617px
, (min-width: 768px) 41.66667vw
, (max-width: 767px) calc(100vw - ((100vw / 14) * 2)) " />
<!--[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>
</figure>
</div>
</article>
</div>
</div>
</div>
</div><div class="c-header-article--default is-with-picture" data-css="c-header-article">
<div class="grid__container">
<div class="grid__row">
<div class="header-article__container">
<article class="header-article__article-wrapper">
<h1 class="header-article__article-headline">HM3 | Header Artikel | Kasd guber gren, no Searking Takimat Sanctus est</h1>
<p class="header-article__article-paragraph">350 Zeichen dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elit</p>
<div class="header-article__picture-container">
<figure class="c-figure--default is-no-margin" data-css="c-figure" 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/800x800 800w ,
https://via.placeholder.com/1600x1600 1600w ,
https://via.placeholder.com/2400x2400 2400w ,
https://via.placeholder.com/3200x3200 3200w " sizes="
(min-width: 1440px) 617px
, (min-width: 768px) 41.66667%
, (max-width: 767px) calc(100% - ((100% / 14) * 2)) " />
<!--[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="{ "youtube": {"id": "mM5_T-F1Yn4","format": "4_3"}, "caption": {"captionHeadline":"Youtube Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }">Lightbox öffnen</button>
</div>
</figure>
</div>
</article>
</div>
</div>
</div>
</div><div class="c-header-article--default" data-css="c-header-article">
<div class="grid__container">
<div class="grid__row">
<div class="header-article__container">
<article class="header-article__article-wrapper">
<h1 class="header-article__article-headline">HM3 | Header Artikel | Kasd guber gren, no Searking Takimat Sanctus est</h1>
<p class="header-article__article-paragraph">350 Zeichen dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elit</p>
</article>
</div>
</div>
</div>
</div>