Each variation will be presented in the following section.
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.
Besschreibung und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert
WeiterlesenBesschreibung und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert
WeiterlesenBesschreibung und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert
WeiterlesenBesschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert
WeiterlesenBesschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert
Weiterlesen2 Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt
Weiterlesen3 Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt
WeiterlesenFar 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.
Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert
Weiterlesen2 Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt
Weiterlesen3 Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt
Weiterlesencomponent)Component for a contentelement three columns with image and text : with a Mainheadline, content and three contentboxes with image, headline, text and link and a mainlink-button for the area
Veams#5.0.0veams install bp absolute/filepath/to/three-column-img-text
three-column-img-text.hbs| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.threeColumnImgTextClasses | String | '' |
Modifier classes for component |
| settings.threeColumnImgTextContextClass | String | 'default' |
Context class of component |
| Parameter | Type | Description |
|---|---|---|
| content.mainHeadline | String | Set the headline of the three-column-image-text-area |
| content.description | String | Set the description of the area |
| content.box | Array | Define the image-text-boxes: Array of content-Objects for every image-box |
| content.ctaHref | String | Link for the whole three-column-image-text-area as a button at the end of the component |
| content.ctaLinkContent | String | Buttonname |
three-column-img-text__box.hbs| Parameter | Type | Description |
|---|---|---|
| content.figure | Object | Data for embedded figure component |
| content.headline | String | Set the headline of one image-text-box |
| content.description | String | Set the description of one image-text-box |
| content.linkHref | String | Set the Link for one image-text-box |
| content.linkContent | String | Set the Link Text for one image-text-box - only for Reader and hcm |
There are multiple variables which you can change:
| Variable | Value | Description |
|---|
There are modifier classes you can add to c-three-column-img-text:
| Modifier | Description |
|---|---|
| is-linkbox | Class for image-text-boxes with a Link |
<div class="c-three-column-img-text{{#if settings.threeColumnImgTextContextClass}}--{{settings.threeColumnImgTextContextClass}}{{else}}--default{{/if}}{{#if settings.threeColumnImgTextClasses}} {{settings.threeColumnImgTextClasses}}{{/if}}"
data-css="c-three-column-img-text">
{{#wrapWith "grid__container"}}
{{#wrapWith "grid__row"}}
<div class="three-column-img-text__container">
{{#if content.mainHeadline}}
<h2 class="three-column-img-text__main-headline">{{content.mainHeadline}}</h2>
{{/if}}
{{#if content.description}}
<p class="three-column-img-text__paragraph-content">{{content.description}}</p>
{{/if}}
<div class="three-column-img-text__wrapper">
{{#each content.box}}
{{> three-column-img-text__box}}
{{/each}}
</div>
{{#if content.linkButton}}
{{#with content.linkButton}}
{{> link-button }}
{{/with}}
{{/if}}
</div>
{{/wrapWith}}
{{/wrapWith}}
</div>
<article class="three-column-img-text__column">
{{#with content.figure}}
<div class="three-column-img-text__picture-container">
{{> figure }}
</div>
{{/with}}
<div class="three-column-img-text__text{{#if content.linkHref}} is-linkbox{{/if}}">
{{#if content.headline}}
<div class="three-column-img-text__box-headline">{{content.headline}}</div>
{{/if}}
{{#if content.description}}
<p class="three-column-img-text__box-content">{{content.description}}</p>
{{/if}}
<a href="{{content.linkHref}}" class="three-column-img-text__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
{{#if content.linkHref}}
<a href="{{content.linkHref}}" class="three-column-img-text__link">{{content.linkContent}}</a>
{{/if}}
</div>
</article>
{
"variations": {
"default": {
"docs": {
"variationName": "3 Columns Image Text"
},
"settings": {
"threeColumnImgTextContextClass": "default",
"threeColumnImgTextClasses": ""
},
"content": {
"mainHeadline": "3 Columns Image Text Variante (H2, Introtext, 3 Images und Text, dreispaltig)",
"description": "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.",
"box": [
{
"content": {
"figure": {
"settings": {
"figureId": "",
"figureContextClass": "default",
"figureClasses": "is-no-margin",
"figureJsModule": "overlay-handler"
},
"content": {
"figureZoom": false,
"figurePicture": {
"settings": {
"pictureContextClass": "default",
"pictureClasses": "three-column-img-text__picture",
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/400x267",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/800x534",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1600x1068",
"imageWidth": "1600w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "370px"
},
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "30vw"
},
{
"screenWidth": "(min-width: 480px)",
"imageWidth": "33.33333333333333vw"
},
{
"screenWidth": "(max-width: 479px)",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
]
}
]
}
}
}
},
"headline": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"description": "Besschreibung und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert",
"linkHref": "#",
"linkContent" : "Weiterlesen"
}
},
{
"content": {
"figure": {
"settings": {
"figureId": "",
"figureContextClass": "default",
"figureClasses": "is-no-margin",
"figureJsModule": "overlay-handler"
},
"content": {
"figureZoom": false,
"figurePicture": {
"settings": {
"pictureContextClass": "default",
"pictureClasses": "three-column-img-text__picture",
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/400x267",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/800x534",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1600x1068",
"imageWidth": "1600w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "370px"
},
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "30vw"
},
{
"screenWidth": "(min-width: 480px)",
"imageWidth": "33.33333333333333vw"
},
{
"screenWidth": "(max-width: 479px)",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
]
}
]
}
}
}
},
"headline": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"description": "Besschreibung und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert",
"linkHref": "#",
"linkContent" : "Weiterlesen"
}
},
{
"content": {
"figure": {
"settings": {
"figureId": "",
"figureContextClass": "default",
"figureClasses": "is-no-margin",
"figureJsModule": "overlay-handler"
},
"content": {
"figureZoom": false,
"figurePicture": {
"settings": {
"pictureContextClass": "default",
"pictureClasses": "three-column-img-text__picture",
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/400x267",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/800x534",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1600x1068",
"imageWidth": "1600w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "370px"
},
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "30vw"
},
{
"screenWidth": "(min-width: 480px)",
"imageWidth": "33.33333333333333vw"
},
{
"screenWidth": "(max-width: 479px)",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
]
}
]
}
}
}
},
"headline": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"description": "Besschreibung und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert",
"linkHref": "#",
"linkContent" : "Weiterlesen"
}
},
{
"content": {
"figure": {
"settings": {
"figureId": "",
"figureContextClass": "default",
"figureClasses": "is-no-margin",
"figureJsModule": "overlay-handler"
},
"content": {
"figureZoom": false,
"figurePicture": {
"settings": {
"pictureContextClass": "default",
"pictureClasses": "three-column-img-text__picture",
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/400x267",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/800x534",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1600x1068",
"imageWidth": "1600w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "370px"
},
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "30vw"
},
{
"screenWidth": "(min-width: 480px)",
"imageWidth": "33.33333333333333vw"
},
{
"screenWidth": "(max-width: 479px)",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
]
}
]
}
}
}
},
"headline": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"description": "Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert",
"linkHref": "#",
"linkContent" : "Weiterlesen"
}
},
{
"content": {
"figure": {
"settings": {
"figureId": "",
"figureContextClass": "default",
"figureClasses": "is-no-margin",
"figureJsModule": "overlay-handler"
},
"content": {
"figureZoom": false,
"figurePicture": {
"settings": {
"pictureContextClass": "default",
"pictureClasses": "three-column-img-text__picture",
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/400x267",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/800x534",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1600x1068",
"imageWidth": "1600w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "370px"
},
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "30vw"
},
{
"screenWidth": "(min-width: 480px)",
"imageWidth": "33.33333333333333vw"
},
{
"screenWidth": "(max-width: 479px)",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
]
}
]
}
}
}
},
"headline": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"description": "Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert",
"linkHref": "#",
"linkContent" : "Weiterlesen"
}
},
{
"content": {
"figure": {
"settings": {
"figureId": "",
"figureContextClass": "default",
"figureClasses": "is-no-margin",
"figureJsModule": "overlay-handler"
},
"content": {
"figureZoom": false,
"figurePicture": {
"settings": {
"pictureContextClass": "default",
"pictureClasses": "three-column-img-text__picture",
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/400x267",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/400x267",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x534",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x801",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x1068",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x1335",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x1602",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x1868",
"imageWidth": "2800w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "calc((100vw - ((100vw / 14) * 2)) - 70vw)"
},
{
"screenWidth": "(min-width: 480px)",
"imageWidth": "calc((100vw - ((100vw / 14) * 2)) - 66.66666666666667vw)"
},
{
"screenWidth": "(max-width: 479px)",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
]
}
]
}
}
}
},
"headline": "2 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"description": "2 Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt",
"linkHref": "#",
"linkContent" : "Weiterlesen"
}
},
{
"content": {
"figure": {
"settings": {
"figureId": "",
"figureContextClass": "default",
"figureClasses": "is-no-margin",
"figureJsModule": "overlay-handler"
},
"content": {
"figureZoom": false,
"figurePicture": {
"settings": {
"pictureContextClass": "default",
"pictureClasses": "three-column-img-text__picture",
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/400x267",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/400x267",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x534",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x801",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x1068",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x1335",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x1602",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x1868",
"imageWidth": "2800w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "calc((100vw - ((100vw / 14) * 2)) - 70vw)"
},
{
"screenWidth": "(min-width: 480px)",
"imageWidth": "calc((100vw - ((100vw / 14) * 2)) - 66.66666666666667vw)"
},
{
"screenWidth": "(max-width: 479px)",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
]
}
]
}
}
}
},
"headline": "3 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"description": "3 Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt",
"linkHref": "#",
"linkContent" : "Weiterlesen"
}
}
],
"linkButton": {
"settings": {
"linkButtonContextClass": "default",
"linkButtonClasses": "three-column-img-text__cta"
},
"content": {
"linkHref": "#",
"linkContent": "Zur Seite xy"
}
}
}
},
"nobutton": {
"docs": {
"variationName": "3 Columns Image Text ohne Button"
},
"settings": {
"threeColumnImgTextContextClass": "nobutton",
"threeColumnImgTextClasses": ""
},
"content": {
"mainHeadline": "3 Columns Image Text Variante (H2, Introtext, 3 Images und Text, dreispaltig)",
"description": "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.",
"box": [
{
"content": {
"figure": {
"settings": {
"figureId": "",
"figureContextClass": "default",
"figureClasses": "is-no-margin",
"figureJsModule": "overlay-handler"
},
"content": {
"figureZoom": false,
"figurePicture": {
"settings": {
"pictureContextClass": "default",
"pictureClasses": "three-column-img-text__picture",
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/400x267",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/800x534",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1600x1068",
"imageWidth": "1600w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "370px"
},
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "30vw"
},
{
"screenWidth": "(min-width: 480px)",
"imageWidth": "33.33333333333333vw"
},
{
"screenWidth": "(max-width: 479px)",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
]
}
]
}
}
}
},
"headline": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"description": "Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert",
"linkHref": "#",
"linkContent" : "Weiterlesen"
}
},
{
"content": {
"figure": {
"settings": {
"figureId": "",
"figureContextClass": "default",
"figureClasses": "is-no-margin",
"figureJsModule": "overlay-handler"
},
"content": {
"figureZoom": false,
"figurePicture": {
"settings": {
"pictureContextClass": "default",
"pictureClasses": "three-column-img-text__picture",
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/400x267",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/400x267",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x534",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x801",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x1068",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x1335",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x1602",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x1868",
"imageWidth": "2800w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "calc((100vw - ((100vw / 14) * 2)) - 70vw)"
},
{
"screenWidth": "(min-width: 480px)",
"imageWidth": "calc((100vw - ((100vw / 14) * 2)) - 66.66666666666667vw)"
},
{
"screenWidth": "(max-width: 479px)",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
]
}
]
}
}
}
},
"headline": "2 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"description": "2 Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt",
"linkHref": "#",
"linkContent" : "Weiterlesen"
}
},
{
"content": {
"figure": {
"settings": {
"figureId": "",
"figureContextClass": "default",
"figureClasses": "is-no-margin",
"figureJsModule": "overlay-handler"
},
"content": {
"figureZoom": false,
"figurePicture": {
"settings": {
"pictureContextClass": "default",
"pictureClasses": "three-column-img-text__picture",
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/400x267",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/400x267",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x534",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x801",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x1068",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x1335",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x1602",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x1868",
"imageWidth": "2800w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "calc((100vw - ((100vw / 14) * 2)) - 70vw)"
},
{
"screenWidth": "(min-width: 480px)",
"imageWidth": "calc((100vw - ((100vw / 14) * 2)) - 66.66666666666667vw)"
},
{
"screenWidth": "(max-width: 479px)",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
]
}
]
}
}
}
},
"headline": "3 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"description": "3 Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt",
"linkHref": "#",
"linkContent" : "Weiterlesen"
}
}
]
}
}
}
}
/* ===================================================
component: three-column-img-text
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-three-column-img-text"] {
margin-bottom: 60px;
@include bp($bp-mobile-p) {
margin-bottom: 80px;
}
@include bp($bp-tablet-p) {
margin-bottom: 100px;
}
@include bp(1920px) {
margin-bottom: 120px;
}
.three-column-img-text__container {
position: relative;
}
.three-column-img-text__paragraph-content {
padding-bottom: 40px;
color: $color-dark;
font-size: 1.5rem;
line-height: (22/15);
letter-spacing: .025rem;
@include bp($bp-tablet-p) {
font-size: 1.6rem;
line-height: (24/16);
letter-spacing: .025rem;
}
}
.three-column-img-text__box-content {
padding-bottom: 20px;
color: $color-dark;
font-size: 1.5rem;
line-height: (22/15);
letter-spacing: .025rem;
@include bp($bp-mobile-p) {
padding-bottom: 15px;
padding-left: 5%;
}
@include bp($bp-tablet-p) {
padding-bottom: 20px;
padding-left: 0;
font-size: 1.6rem;
line-height: (24/16);
letter-spacing: .025rem;
}
@include bp($bp-desktop-m) {
padding-bottom: 30px;
}
}
.three-column-img-text__main-headline {
@include headline-h2-styles();
margin-bottom: 30px;
@include bp($bp-tablet-p) {
margin-bottom: 28px;
}
@include bp($bp-desktop-m) {
margin-bottom: 32px;
}
}
.three-column-img-text__wrapper {
display: flex;
flex-flow: row wrap;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
align-items: flex-start;
@include bp($bp-tablet-p) {
flex-direction: row;
}
}
.three-column-img-text__column {
position: relative;
background-color: $color-white;
width: 100%;
display: flex;
flex: 0 0 100%;
flex-flow: column wrap;
justify-content: flex-start;
padding-bottom: 5px;
margin-bottom: 25px;
@include bp($bp-mobile-p) {
flex-flow: row wrap;
justify-content: flex-end;
}
@include bp($bp-tablet-p) {
flex: 0 0 30%;
flex-flow: column nowrap;
justify-content: flex-start;
width: 30%;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
margin-right: 5%;
&:nth-child(3n) {
margin-right: 0;
}
&:nth-child(n+4) {
margin-top: 80px;
}
}
@include print() {
width: 30%;
float: left;
flex: 0 0 30%;
flex-flow: column wrap;
justify-content: flex-start;
padding-bottom: 10px;
margin-bottom: 0px;
margin-right: 5%;
&:nth-child(3n) {
margin-right: 0;
}
&:nth-child(n+4) {
margin-top: 80px;
}
}
.three-column-img-text__picture-container {
flex: 0 0 auto;
width: 100%;
@include bp($bp-mobile-p) {
float: left;
width: 33.33333333333333%;
flex: 0 0 33.33333333333333%;
}
@include bp($bp-tablet-p) {
float: none;
width: 100%;
flex: 0 0 auto;
}
@include print() {
width: 100%;
flex: 0 0 auto;
}
}
.three-column-img-text__text {
position: relative;
width: 100%;
margin-top: 18px;
flex: 0 1 auto;
@include bp($bp-mobile-p) {
float: left;
width: 66.66666666666667%;
margin-top: 0;
flex: 0 1 66.66666666666667%;
}
@include bp($bp-tablet-p) {
float: none;
width: 100%;
margin-top: 15px;
padding-left: 0;
flex: 0 1 auto;
}
@include bp($bp-desktop-m) {
margin-top: 20px;
}
@include print() {
width: 100%;
flex-basis: auto;
}
&.is-linkbox {
&:hover {
cursor: pointer;
.three-column-img-text__link {
transform: translateX(10px);
&::before {
@include sprites-icon-arrow-black();
}
}
}
}
}
.three-column-img-text__box-headline {
@include headline-h5-styles();
@include bp($bp-mobile-p) {
padding-left: 5%;
}
@include bp($bp-tablet-p) {
padding-left: 0;
}
}
.three-column-img-text__link {
@include hidden-text();
clear: left;
width: 100%;
flex: 0 1 auto;
text-align: left;
border: none;
position: relative;
display: inline-block;
transition: transform $animation-duration-std $animation-easing-std;
@include bp($bp-mobile-p) {
float: left;
padding-left: 5%;
width: 100%;
flex: 0 0 100%;
}
@include bp($bp-tablet-p) {
float: none;
width: 100%;
padding-left: 0;
flex: 0 1 auto;
}
@include hcm() {
font-family: $font-regular;
font-size: 1.6rem;
color: $color-dark;
display: block;
visibility: visible;
}
@include print() {
text-decoration: underline !important;
}
&::before {
@include pseudo();
@include sprites-icon-arrow-green100();
position: relative;
display: inline-block;
margin-right: 10px;
@include print() {
display: none !important;
}
}
}
.three-column-img-text__a11y-clickarea {
@include hidden-text();
@include clickarea();
background-color: transparent;
cursor: pointer;
border: none;
@include print() {
display: none;
}
}
}
.three-column-img-text__cta {
position: absolute;
right: 0;
@include bp($bp-mobile-p) {
bottom: -47px;
}
@include bp($bp-tablet-p) {
bottom: -67px;
}
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-three-column-img-text--default {
.three-column-img-text__container {
margin-bottom: 80px;
border-bottom: 1px solid $color-gray-border;
@include bp($bp-mobile-p) {
padding-bottom: 20px;
}
@include print() {
border-style: none;
margin-bottom: 0px;
padding-bottom: 0px;
}
}
}
/* ---------------------------------------------------
Context: NoButton
--------------------------------------------------- */
.c-three-column-img-text--nobutton {
}
<div class="c-three-column-img-text--default" data-css="c-three-column-img-text">
<div class="grid__container">
<div class="grid__row">
<div class="three-column-img-text__container">
<h2 class="three-column-img-text__main-headline">3 Columns Image Text Variante (H2, Introtext, 3 Images und Text, dreispaltig)</h2>
<p class="three-column-img-text__paragraph-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 class="three-column-img-text__wrapper">
<article class="three-column-img-text__column">
<div class="three-column-img-text__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
three-column-img-text__picture lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/800x534 800w ,
https://placehold.co/1600x1068 1600w " sizes="
(min-width: 1440px) 370px
, (min-width: 768px) 30vw
, (min-width: 480px) 33.33333333333333vw
, (max-width: 479px) calc(100vw - ((100vw / 14) * 2)) " />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="three-column-img-text__text is-linkbox">
<div class="three-column-img-text__box-headline">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<p class="three-column-img-text__box-content">Besschreibung und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert</p>
<a href="#" class="three-column-img-text__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
<a href="#" class="three-column-img-text__link">Weiterlesen</a>
</div>
</article>
<article class="three-column-img-text__column">
<div class="three-column-img-text__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
three-column-img-text__picture lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/800x534 800w ,
https://placehold.co/1600x1068 1600w " sizes="
(min-width: 1440px) 370px
, (min-width: 768px) 30vw
, (min-width: 480px) 33.33333333333333vw
, (max-width: 479px) calc(100vw - ((100vw / 14) * 2)) " />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="three-column-img-text__text is-linkbox">
<div class="three-column-img-text__box-headline">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<p class="three-column-img-text__box-content">Besschreibung und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert</p>
<a href="#" class="three-column-img-text__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
<a href="#" class="three-column-img-text__link">Weiterlesen</a>
</div>
</article>
<article class="three-column-img-text__column">
<div class="three-column-img-text__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
three-column-img-text__picture lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/800x534 800w ,
https://placehold.co/1600x1068 1600w " sizes="
(min-width: 1440px) 370px
, (min-width: 768px) 30vw
, (min-width: 480px) 33.33333333333333vw
, (max-width: 479px) calc(100vw - ((100vw / 14) * 2)) " />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="three-column-img-text__text is-linkbox">
<div class="three-column-img-text__box-headline">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<p class="three-column-img-text__box-content">Besschreibung und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert</p>
<a href="#" class="three-column-img-text__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
<a href="#" class="three-column-img-text__link">Weiterlesen</a>
</div>
</article>
<article class="three-column-img-text__column">
<div class="three-column-img-text__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
three-column-img-text__picture lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/800x534 800w ,
https://placehold.co/1600x1068 1600w " sizes="
(min-width: 1440px) 370px
, (min-width: 768px) 30vw
, (min-width: 480px) 33.33333333333333vw
, (max-width: 479px) calc(100vw - ((100vw / 14) * 2)) " />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="three-column-img-text__text is-linkbox">
<div class="three-column-img-text__box-headline">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<p class="three-column-img-text__box-content">Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert</p>
<a href="#" class="three-column-img-text__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
<a href="#" class="three-column-img-text__link">Weiterlesen</a>
</div>
</article>
<article class="three-column-img-text__column">
<div class="three-column-img-text__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
three-column-img-text__picture lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/800x534 800w ,
https://placehold.co/1600x1068 1600w " sizes="
(min-width: 1440px) 370px
, (min-width: 768px) 30vw
, (min-width: 480px) 33.33333333333333vw
, (max-width: 479px) calc(100vw - ((100vw / 14) * 2)) " />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="three-column-img-text__text is-linkbox">
<div class="three-column-img-text__box-headline">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<p class="three-column-img-text__box-content">Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert</p>
<a href="#" class="three-column-img-text__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
<a href="#" class="three-column-img-text__link">Weiterlesen</a>
</div>
</article>
<article class="three-column-img-text__column">
<div class="three-column-img-text__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
three-column-img-text__picture lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/400x267 400w ,
https://placehold.co/800x534 800w ,
https://placehold.co/1200x801 1200w ,
https://placehold.co/1600x1068 1600w ,
https://placehold.co/2000x1335 2000w ,
https://placehold.co/2400x1602 2400w ,
https://placehold.co/2800x1868 2800w " sizes="
(min-width: 768px) calc((100vw - ((100vw / 14) * 2)) - 70vw)
, (min-width: 480px) calc((100vw - ((100vw / 14) * 2)) - 66.66666666666667vw)
, (max-width: 479px) calc(100vw - ((100vw / 14) * 2)) " />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="three-column-img-text__text is-linkbox">
<div class="three-column-img-text__box-headline">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<p class="three-column-img-text__box-content">2 Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt</p>
<a href="#" class="three-column-img-text__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
<a href="#" class="three-column-img-text__link">Weiterlesen</a>
</div>
</article>
<article class="three-column-img-text__column">
<div class="three-column-img-text__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
three-column-img-text__picture lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/400x267 400w ,
https://placehold.co/800x534 800w ,
https://placehold.co/1200x801 1200w ,
https://placehold.co/1600x1068 1600w ,
https://placehold.co/2000x1335 2000w ,
https://placehold.co/2400x1602 2400w ,
https://placehold.co/2800x1868 2800w " sizes="
(min-width: 768px) calc((100vw - ((100vw / 14) * 2)) - 70vw)
, (min-width: 480px) calc((100vw - ((100vw / 14) * 2)) - 66.66666666666667vw)
, (max-width: 479px) calc(100vw - ((100vw / 14) * 2)) " />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="three-column-img-text__text is-linkbox">
<div class="three-column-img-text__box-headline">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<p class="three-column-img-text__box-content">3 Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt</p>
<a href="#" class="three-column-img-text__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
<a href="#" class="three-column-img-text__link">Weiterlesen</a>
</div>
</article>
</div>
<div class="c-link-button--default three-column-img-text__cta" data-css="c-link-button">
<a class="link-button__link" href="#">Zur Seite xy</a>
</div>
</div>
</div>
</div>
</div><div class="c-three-column-img-text--nobutton" data-css="c-three-column-img-text">
<div class="grid__container">
<div class="grid__row">
<div class="three-column-img-text__container">
<h2 class="three-column-img-text__main-headline">3 Columns Image Text Variante (H2, Introtext, 3 Images und Text, dreispaltig)</h2>
<p class="three-column-img-text__paragraph-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 class="three-column-img-text__wrapper">
<article class="three-column-img-text__column">
<div class="three-column-img-text__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
three-column-img-text__picture lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/800x534 800w ,
https://placehold.co/1600x1068 1600w " sizes="
(min-width: 1440px) 370px
, (min-width: 768px) 30vw
, (min-width: 480px) 33.33333333333333vw
, (max-width: 479px) calc(100vw - ((100vw / 14) * 2)) " />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="three-column-img-text__text is-linkbox">
<div class="three-column-img-text__box-headline">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<p class="three-column-img-text__box-content">Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt und dieser hat deutlich mehr Text als die anderen Conatiner um zu prüfen wie er reagiert</p>
<a href="#" class="three-column-img-text__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
<a href="#" class="three-column-img-text__link">Weiterlesen</a>
</div>
</article>
<article class="three-column-img-text__column">
<div class="three-column-img-text__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
three-column-img-text__picture lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/400x267 400w ,
https://placehold.co/800x534 800w ,
https://placehold.co/1200x801 1200w ,
https://placehold.co/1600x1068 1600w ,
https://placehold.co/2000x1335 2000w ,
https://placehold.co/2400x1602 2400w ,
https://placehold.co/2800x1868 2800w " sizes="
(min-width: 768px) calc((100vw - ((100vw / 14) * 2)) - 70vw)
, (min-width: 480px) calc((100vw - ((100vw / 14) * 2)) - 66.66666666666667vw)
, (max-width: 479px) calc(100vw - ((100vw / 14) * 2)) " />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="three-column-img-text__text is-linkbox">
<div class="three-column-img-text__box-headline">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<p class="three-column-img-text__box-content">2 Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt</p>
<a href="#" class="three-column-img-text__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
<a href="#" class="three-column-img-text__link">Weiterlesen</a>
</div>
</article>
<article class="three-column-img-text__column">
<div class="three-column-img-text__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
three-column-img-text__picture lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/400x267 400w ,
https://placehold.co/800x534 800w ,
https://placehold.co/1200x801 1200w ,
https://placehold.co/1600x1068 1600w ,
https://placehold.co/2000x1335 2000w ,
https://placehold.co/2400x1602 2400w ,
https://placehold.co/2800x1868 2800w " sizes="
(min-width: 768px) calc((100vw - ((100vw / 14) * 2)) - 70vw)
, (min-width: 480px) calc((100vw - ((100vw / 14) * 2)) - 66.66666666666667vw)
, (max-width: 479px) calc(100vw - ((100vw / 14) * 2)) " />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="three-column-img-text__text is-linkbox">
<div class="three-column-img-text__box-headline">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<p class="three-column-img-text__box-content">3 Besschreibung zu dem Boxbereich mit etwas mehr Text und meistens in einem p-Tag versteckt</p>
<a href="#" class="three-column-img-text__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
<a href="#" class="three-column-img-text__link">Weiterlesen</a>
</div>
</article>
</div>
</div>
</div>
</div>
</div>