STAGE-FRONTPAGE (Header Module )
src/app/shared/components/stage-frontpage/templates
Demo Section
Each variation will be presented in the following section.
Readme
stageFrontpage (component)
Description
This component contains the frontpage stage.
JIRA
Requirements
- @veams/component-figure - Figure component in Veams.
Fields
stage-frontpage.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.stageFrontpageClasses | String | '' |
Modifier classes for component |
| settings.stageFrontpageContextClass | String | 'default' |
The view for the Startpage default= LMU.de, bp = Blueprint Startseite |
Content
| Parameter | Type | Description |
|---|---|---|
| content.figure | Object | Data for figure |
| content.largeTeaser | Object | Contains data for the large teaser |
| content.teaserCollect | Array | N-items of teaser collections , For Blueprint this is empty |
stage-frontpage__large-teaser.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.largeTeaserClasses | String | '' |
Modifier classes for large teaser |
| settings.data-color | String | '' |
Modifier Hexacode for the font-color. Will be included with an inline style |
| settings.data-bgcolor | String | '' |
Modifier Hexacode for the background-color. Will be included with an inline style |
Content
| Parameter | Type | Description |
|---|---|---|
| content.headline | String | Text for headline |
| content.paragraphs | Array | N-paragraphs of text |
| content.link | Object | Data for link |
| content.image | Object | Data for image/logo |
stage-frontpage__large-teaser-paragraph.hbs
Content
| Parameter | Type | Description |
|---|---|---|
| content.text | String | Text for this paragraph |
| settings.data-color | String | '' |
stage-frontpage__large-teaser-link.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.linkClasses | String | '' |
Modifier classes for this link |
Content
| Parameter | Type | Description |
|---|---|---|
| content.linkText | String | Text for link (hidden) |
| content.linkHref | String | Location the link points to |
stage-frontpage__teaser-collect.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.teaserCollectClasses | String | '' |
Modifier classes for this collection of teasers |
Content
| Parameter | Type | Description |
|---|---|---|
| content.items | Array | N-items of teasers |
stage-frontpage__teaser-item.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.bgDark | Boolean | false |
Set true if teaser background needs to be dark |
| settings.bgLight | Boolean | false |
Set true if teaser background needs to be light gray |
| settings.bgGreen | Boolean | false |
Set true if teaser background needs to be green |
| settings.bgBlue | Boolean | false |
Set true if teaser background needs to be blue |
Content
| Parameter | Type | Description |
|---|---|---|
| content.teaser | Array | Data of teaser |
SASS
Variables
Modifier Classes
There are modifier classes you can add to stage-frontpage__teaser-collect:
| Modifier | Description |
|---|---|
| is-first | Positioning, dimensions and teaser-behaviour of first teaser-collection |
| is-second | Positioning, dimensions and teaser-behaviour of second teaser-collection |
Templates
stage-frontpage.hbs
<div class="c-stage-frontpage{{#if settings.stageFrontpageContextClass}}--{{settings.stageFrontpageContextClass}}{{else}}--default{{/if}}{{#if settings.stageFrontpageClasses}} {{settings.stageFrontpageClasses}}{{/if}}"
data-css="c-stage-frontpage">
{{#wrapWith "grid__container"}}
{{> stage-frontpage__figure }}
<div class="stage-frontpage__row">
{{#with content.largeTeaser}}
{{> stage-frontpage__large-teaser }}
{{/with}}
{{#if content.teaserCollect}}
<div class="stage-frontpage__teaser-collect-wrapper">
{{#each content.teaserCollect }}
{{> stage-frontpage__teaser-collect }}
{{/each}}
</div>
{{/if}}
</div>
{{/wrapWith}}
</div>
stage-frontpage__figure.hbs
<div class="stage-frontpage__image-wrapper">
{{#with content.figure}}
{{> figure}}
{{/with}}
</div>
stage-frontpage__large-teaser.hbs
<div class="stage-frontpage__large-teaser{{#if settings.largeTeaserClasses}} {{settings.largeTeaserClasses}}{{/if}}">
<div class="stage-frontpage__large-teaser-content {{#if content.image}}is-with-logo{{/if}}" {{#if settings.data-bgcolor}}style="background-color:{{settings.data-bgcolor}};{{#if settings.data-color}}color:{{settings.data-bgcolor}};{{/if}}"{{/if}}>
{{#if content.image}}
<div class="stage-frontpage__large-teaser-content-logo">
<img src="{{content.image.content.imageurl}}" class="{{content.image.settings.imageContextClass}}">
</div>
{{/if}}
<h1 class="stage-frontpage__headline"{{#if settings.data-color}} style="color:{{settings.data-color}};"{{/if}}>{{content.headline}}</h1>
{{#each content.paragraphs}}
{{> stage-frontpage__large-teaser-paragraph }}
{{/each}}
{{#with content.link}}
{{> stage-frontpage__large-teaser-link }}
{{/with}}
</div>
</div>
stage-frontpage__large-teaser-link.hbs
<a class="stage-frontpage__large-teaser-link{{#if settings.linkClasses}} {{settings.linkClasses}}{{/if}}" href="{{content.linkHref}}">{{content.linkText}}</a>
<a class="stage-frontpage__large-teaser-a11y-clickarea" href="{{content.linkHref}}" aria-hidden="true" tabindex="-1"></a>
stage-frontpage__large-teaser-paragraph.hbs
<p class="stage-frontpage__large-teaser-paragraph" {{#if settings.data-color}} style="color:{{settings.data-color}};"{{/if}}>{{content.text}}</p>
stage-frontpage__teaser-collect.hbs
<div class="stage-frontpage__teaser-collect{{#if settings.teaserCollectClasses}} {{settings.teaserCollectClasses}}{{/if}}">
{{#each content.items }}
{{> stage-frontpage__teaser-item }}
{{/each}}
</div>
stage-frontpage__teaser-item.hbs
<div class="stage-frontpage__teaser{{#if
settings.bgBlue}} is-bg-blue{{/if}}{{#if
settings.bgDark}} is-bg-dark{{/if}}{{#if
settings.bgLight}} is-bg-light{{/if}}{{#if
settings.bgGreen}} is-bg-green{{/if}}">
<div class="stage-frontpage__teaser-content">
{{#with content.teaser }}
{{> teaser-single }}
{{/with}}
</div>
</div>
Data File
stage-frontpage.hjson
{
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"stageFrontpageContextClass": "default",
"stageFrontpageClasses": ""
},
"content": {
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "header-frontpage",
"figureJsModule": true
},
"content": {
"figurePicture": {
"settings": {
"pictureContextClass": "animated-objects",
"pictureClasses": false,
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://via.placeholder.com/40x40",
"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"
}
],
"media": "(min-width:1024px)"
},
{
"srcset": [
{
"src": "https://via.placeholder.com/300x200",
"imageWidth": "300w"
},
{
"src": "https://via.placeholder.com/600x400",
"imageWidth": "600w"
},
{
"src": "https://via.placeholder.com/900x600",
"imageWidth": "900w"
},
{
"src": "https://via.placeholder.com/1200x800",
"imageWidth": "1200w"
},
{
"src": "https://via.placeholder.com/1500x1000",
"imageWidth": "1500w"
},
{
"src": "https://via.placeholder.com/1800x1200",
"imageWidth": "1800w"
},
{
"src": "https://via.placeholder.com/2100x1400",
"imageWidth": "2100w"
},
{
"src": "https://via.placeholder.com/2400x1600",
"imageWidth": "2400w"
}
],
"media": "(min-width: 641px)"
},
{
"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"
}
],
"media": "(max-width: 640px)"
}
]
}
}
}
},
"largeTeaser": {
"settings": {
"largeTeaserClasses": ""
},
"content": {
"headline": "HM1 | Header Startseite",
"paragraphs": [
{
"content": {
"text": "Die Perspektive wechseln, um die Dimensionen wissenschaftlichen Fortschritts zu hinterfragen: Michael John Gorman, Professor für Life Sciences in Society und Gründungsdirektor des Museums Biotopia, will für Forschung begeistern."
}
}
],
"link": {
"settings": {
"linkClasses": ""
},
"content": {
"linkText": "Weiterlesen",
"linkHref": "#"
}
}
}
},
"teaserCollect": [
{
"settings": {
"teaserCollectClasses": "is-first"
},
"content": {
"items": [
{
"settings": {
"bgDark": true
},
"content": {
"teaser": {
"settings": {
"teaserSingleContextClass": "event",
"teaserSingleClasses": false,
"linkExternal": false
},
"content": {
"headline": "Tag der offenen Tür. Hier auch ein dreizeiliger Titel möglich",
"headlineClasses": "is-stage-frontpage",
"type": "Event",
"linkHref": "#",
"linkText": "Weiterlesen",
"dates": [
{
"dateDay": "24",
"dateMonth": "Januar",
"dateMonthAbbr": "Jan"
},
{
"dateDay": "27",
"dateMonth": "Januar",
"dateMonthAbbr": "Jan"
}
]
}
}
}
},
{
"settings": {
"teaserClasses": "is-second",
"bgLight": true
},
"content": {
"teaser": {
"settings": {
"teaserSingleContextClass": "event",
"teaserSingleClasses": false,
"linkExternal": false
},
"content": {
"headline": "Tag der offenen Tür. Hier auch ein dreizeiliger Titel möglich",
"headlineClasses": "is-stage-frontpage",
"type": "Event",
"linkHref": "#",
"linkText": "Weiterlesen",
"dates": [
{
"dateDay": "24",
"dateMonth": "Januar",
"dateMonthAbbr": "Jan"
}
]
}
}
}
}
]
}
},
{
"settings": {
"teaserCollectClasses": "is-second"
},
"content": {
"items": [
{
"settings": {
"teaserClasses": "is-first",
"bgDark": true
},
"content": {
"teaser": {
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": false
},
"content": {
"headline": "Wissenschaft Macht Politik: Die Münchener Räterepublik",
"headlineClasses": "is-stage-frontpage",
"type": "Event",
"linkHref": "#",
"linkText": "Weiterlesen",
"newstitle": "News"
}
}
}
},
{
"settings": {
"teaserClasses": "is-second",
"bgGreen": true
},
"content": {
"teaser": {
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false
},
"content": {
"headline": "Zum Newsroom",
"headlineClasses": "is-stage-frontpage",
"linkHref": "#",
"linkText": "Weiterlesen"
}
}
}
}
]
}
}
]
}
},
"Blueprint": {
"docs": {
"variationName": "Blueprint with Logo"
},
"settings": {
"stageFrontpageContextClass": "bp",
"stageFrontpageClasses": ""
},
"content": {
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "header-frontpage",
"figureJsModule": true
},
"content": {
"figurePicture": {
"settings": {
"pictureContextClass": "animated-objects",
"pictureClasses": false,
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://via.placeholder.com/40x40",
"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"
}
],
"media": "(min-width:1024px)"
},
{
"srcset": [
{
"src": "https://via.placeholder.com/300x200",
"imageWidth": "300w"
},
{
"src": "https://via.placeholder.com/600x400",
"imageWidth": "600w"
},
{
"src": "https://via.placeholder.com/900x600",
"imageWidth": "900w"
},
{
"src": "https://via.placeholder.com/1200x800",
"imageWidth": "1200w"
},
{
"src": "https://via.placeholder.com/1500x1000",
"imageWidth": "1500w"
},
{
"src": "https://via.placeholder.com/1800x1200",
"imageWidth": "1800w"
},
{
"src": "https://via.placeholder.com/2100x1400",
"imageWidth": "2100w"
},
{
"src": "https://via.placeholder.com/2400x1600",
"imageWidth": "2400w"
}
],
"media": "(min-width: 641px)"
},
{
"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"
}
],
"media": "(max-width: 640px)"
}
]
}
}
}
},
"largeTeaser": {
"settings": {
"largeTeaserClasses": ""
},
"content": {
"headline": "HM1 | Header Startseite",
"image": {
"settings": {
"imageContextClass": "stage-frontpage__logo"
},
"content": {
"imageurl": "https://via.placeholder.com/300x200"
}
},
"paragraphs": [
{
"settings": {
},
"content": {
"text": "Das Logo soll direkt im Template der Bühne gepflegt werden. Hier muss zum Einbinden das Original verwendet werden. Um nicht zu große Ladezeiten zu haben sollten wir uns um das Logo kümmern."
}
}
]
}
}
}
},
"Blueprintohnelogo": {
"docs": {
"variationName": "Blueprint ohne Logo und mit farblicher Box"
},
"settings": {
"stageFrontpageContextClass": "bp",
"stageFrontpageClasses": ""
},
"content": {
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "header-frontpage",
"figureJsModule": true
},
"content": {
"figurePicture": {
"settings": {
"pictureContextClass": "animated-objects",
"pictureClasses": false,
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://via.placeholder.com/40x40",
"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"
}
],
"media": "(min-width:1024px)"
},
{
"srcset": [
{
"src": "https://via.placeholder.com/300x200",
"imageWidth": "300w"
},
{
"src": "https://via.placeholder.com/600x400",
"imageWidth": "600w"
},
{
"src": "https://via.placeholder.com/900x600",
"imageWidth": "900w"
},
{
"src": "https://via.placeholder.com/1200x800",
"imageWidth": "1200w"
},
{
"src": "https://via.placeholder.com/1500x1000",
"imageWidth": "1500w"
},
{
"src": "https://via.placeholder.com/1800x1200",
"imageWidth": "1800w"
},
{
"src": "https://via.placeholder.com/2100x1400",
"imageWidth": "2100w"
},
{
"src": "https://via.placeholder.com/2400x1600",
"imageWidth": "2400w"
}
],
"media": "(min-width: 641px)"
},
{
"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"
}
],
"media": "(max-width: 640px)"
}
]
}
}
}
},
"largeTeaser": {
"settings": {
"largeTeaserClasses": "",
"data-color": "#ffffff",
"data-bgcolor": "#003399"
},
"content": {
"headline": "HM1 | Header Startseite",
"paragraphs": [
{
"settings": {
"data-color": "#ffffff"
},
"content": {
"text": "Die Farbe der Box und des Textes werden als Hexawerte mitgegeben (in FS Eingabefelder) und als Inline-style-Element eingebunden."
}
}
]
}
}
}
}
}
}
Styles
stage-frontpage.scss
/* ===================================================
component: stage-frontpage
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-stage-frontpage"] {
@include clearfix();
margin: 0 auto 60px;
display: block;
overflow: hidden;
width: 100%;
@include bp($bp-mobile-p) {
margin-bottom: 80px;
}
@include bp($bp-tablet-p) {
margin-bottom: 100px;
}
@include bp(1920px) {
margin-bottom: 120px;
}
.stage-frontpage__wrapper {
width: 100%;
margin: 0 auto;
max-width: 1440px;
}
.stage-frontpage__row {
@include clearfix();
@include grid-container();
margin: 0 auto;
}
.stage-frontpage__image-wrapper {
@include print() {
display: none;
}
}
.stage-frontpage__headline {
@include headline-h1-styles();
transition: color $animation-duration-std $animation-easing-std;
}
.stage-frontpage__large-teaser-paragraph {
font-family: $font-light;
font-size: 1.9rem;
line-height: (28/19);
letter-spacing: .25px;
color: $color-dark;
margin-bottom: 25px;
transition: color $animation-duration-std $animation-easing-std;
flex: 1;
@include bp(990px) {
margin-bottom: 5px;
}
@include bp(1200px) {
font-size: 2rem;
line-height: (30/20);
margin-bottom: 25px;
}
@include bp($bp-desktop-l) {
font-size: 2rem;
line-height: (30/20);
margin-bottom: 30px;
}
}
.stage-frontpage__large-teaser-link {
@include hidden-text();
text-decoration: none;
display: block;
@include hcm() {
font-size: 1.6rem;
color: $color-dark;
display: block;
visibility: visible;
text-decoration: underline;
}
@include print() {
font-family: $font-regular;
}
&::before {
@include pseudo();
@include sprites-icon-arrow-green100();
display: block;
position: relative;
transition: transform $animation-duration-std $animation-easing-std;
@include print() {
display: none;
}
}
}
.stage-frontpage__large-teaser-a11y-clickarea {
@include hidden-text();
@include clickarea();
background-color: transparent;
cursor: pointer;
border: none;
}
/*
TEASER COLLECT
----------------------- */
.stage-frontpage__teaser-collect-wrapper {
@include clearfix();
}
.stage-frontpage__teaser-collect {
@include clearfix();
position: relative;
/*
MODIFIERS
----------------------- */
&.is-first {
@include grid-column(12);
@include bp($bp-tablet-p) {
@include grid-column(4);
float: right;
}
@include bp(990px) {
@include grid-column(6);
float: right;
}
.stage-frontpage__teaser {
@include grid-column(12);
@include bp($bp-tablet-p) {
@include grid-box(12);
}
@include bp(990px) {
@include grid-box(6);
}
}
}
&.is-second {
@include grid-column(12);
@include bp($bp-tablet-p) {
@include grid-column(8);
@include grid-magnet(3, right, false);
float: right;
}
@include bp(990px) {
@include grid-column(6);
@include grid-magnet(2, right, false);
float: right;
}
.stage-frontpage__teaser {
@include grid-column(12);
@include bp($bp-tablet-p) {
@include grid-box(6);
}
@include bp(1200px) {
@include grid-box(6);
}
}
}
}
/*
TEASERS
----------------------- */
.stage-frontpage__teaser {
position: relative;
}
.stage-frontpage__teaser-content {
position: relative;
@include bp($bp-tablet-p) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-stage-frontpage--default {
.stage-frontpage__row {
max-width: calc(100% - ((100% / 14) * 2));
}
/*
LARGE TEASER
----------------------- */
.stage-frontpage__large-teaser {
@include grid-column(12);
@include grid-magnet(2, top, true);
@include grid-magnet(0, right, true, $absolute: true);
position: relative;
display: block;
@include bp($bp-tablet-p) {
@include grid-column-width(8);
@include grid-magnet(1, right, true);
float: right;
padding-bottom: calc(1% * 86.666);
margin-top: -20%;
}
@include bp(990px) {
@include grid-box(6);
@include grid-magnet(3, top, true);
@include grid-magnet(1, right, true);
height: auto;
float: right;
right: -1px;
margin-bottom: 0;
}
&:hover,
&.a11y-focus-key {
&::before {
opacity: 1;
}
.stage-frontpage__headline {
color: $color-green;
}
.stage-frontpage__large-teaser-link {
&::before {
transform: translateX(10px);
}
}
.stage-frontpage__large-teaser-paragraph {
color: $color-green;
}
}
&::before {
@include pseudo();
position: absolute;
top: 0;
left: 0;
width: calc(100% - 2px);
height: calc(100% - 2px);
display: block;
border: 1px solid $color-green;
z-index: 2;
opacity: 0;
transition: opacity $animation-duration-std $animation-easing-std;
}
@include print() {
margin-top: 0;
border: 1px solid $color-gray-border;
}
}
.stage-frontpage__large-teaser-content {
position: relative;
padding: 20px;
background-color: $color-white;
@include bp($bp-tablet-p) {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
padding: 35px 35px 20px;
}
@include bp($bp-tablet-l) {
padding: 40px 40px 20px;
}
@include bp($bp-desktop-m) {
padding: 40px 40px 30px;
}
@include bp($bp-desktop-l) {
padding: 60px 60px 30px;
}
}
}
.c-stage-frontpage--bp {
.stage-frontpage__row {
max-width: calc(100% - ((100% / 14) * 2));
@include bp($bp-tablet-p) {
max-width: calc(100%);
}
}
.stage-frontpage__large-teaser {
@include grid-column(12);
@include grid-magnet(2, top, true);
@include grid-magnet(0, right, true, $absolute: true);
position: relative;
display: block;
@include bp($bp-tablet-p) {
@include grid-column(6);
@include grid-magnet(1, right, true);
height: auto;
float: right;
right: -1px;
margin-bottom: 0;
margin-right: 0;
}
@include print() {
margin-top: 0;
border: 1px solid $color-gray-border;
}
}
.stage-frontpage__large-teaser-content {
position: relative;
padding: 20px;
background-color: $color-white;
@include bp($bp-tablet-p) {
padding: 40px 40px 20px;
height: 100%;
width: 100%;
display: block;
}
@include bp($bp-desktop-m) {
padding: 40px 40px 30px;
}
@include bp($bp-desktop-l) {
padding: 60px 60px 30px;
}
&.is-with-logo {
@include bp($bp-tablet-l) {
padding: 25px 40px 20px;
}
@include bp($bp-desktop-m) {
padding: 25px 40px 30px;
}
@include bp($bp-desktop-l) {
padding: 25px 60px 30px;
}
}
.stage-frontpage__large-teaser-content-logo {
margin-bottom: 25px;
display: block;
width: 300px;
max-height: 100px;
text-align: left;
.stage-frontpage__logo {
width: auto;
display: block;
max-height: 100px;
max-width: 100%;
}
}
}
}
HTML Output
Default
<div class="c-stage-frontpage--default" data-css="c-stage-frontpage">
<div class="grid__container">
<div class="stage-frontpage__image-wrapper">
<figure class="c-figure--header-frontpage" 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://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 " media=" (min-width:1024px)" />
<source data-srcset="
https://via.placeholder.com/300x200 300w ,
https://via.placeholder.com/600x400 600w ,
https://via.placeholder.com/900x600 900w ,
https://via.placeholder.com/1200x800 1200w ,
https://via.placeholder.com/1500x1000 1500w ,
https://via.placeholder.com/1800x1200 1800w ,
https://via.placeholder.com/2100x1400 2100w ,
https://via.placeholder.com/2400x1600 2400w " media=" (min-width: 641px)" />
<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 " media=" (max-width: 640px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://via.placeholder.com/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="stage-frontpage__row">
<div class="stage-frontpage__large-teaser">
<div class="stage-frontpage__large-teaser-content ">
<h1 class="stage-frontpage__headline">HM1 | Header Startseite</h1>
<p class="stage-frontpage__large-teaser-paragraph">Die Perspektive wechseln, um die Dimensionen wissenschaftlichen Fortschritts zu hinterfragen: Michael John Gorman, Professor für Life Sciences in Society und Gründungsdirektor des Museums Biotopia, will für Forschung begeistern.</p>
<a class="stage-frontpage__large-teaser-link" href="#">Weiterlesen</a>
<a class="stage-frontpage__large-teaser-a11y-clickarea" href="#" aria-hidden="true" tabindex="-1"></a>
</div>
</div>
<div class="stage-frontpage__teaser-collect-wrapper">
<div class="stage-frontpage__teaser-collect is-first">
<div class="stage-frontpage__teaser is-bg-dark">
<div class="stage-frontpage__teaser-content">
<article class="c-teaser-single--event" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<div class="teaser-single__dates">
<div class="teaser-single__date">
<span aria-label="24" class="teaser-single__date-day">24</span>
<abbr aria-label="Januar" title="Januar" class="teaser-single__date-month">Jan</abbr>
</div>
<div class="teaser-single__date is-connector">
<abbr aria-label="bis" title="bis" class="teaser-single__date-connect">—</abbr>
</div>
<div class="teaser-single__date">
<span aria-label="27" class="teaser-single__date-day">27</span>
<abbr aria-label="Januar" title="Januar" class="teaser-single__date-month">Jan</abbr>
</div>
</div>
<h3 class="teaser-single__headline is-stage-frontpage">
Tag der offenen Tür. Hier auch ein dreizeiliger Titel möglich
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
<div class="stage-frontpage__teaser is-bg-light">
<div class="stage-frontpage__teaser-content">
<article class="c-teaser-single--event" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<div class="teaser-single__dates">
<div class="teaser-single__date">
<span aria-label="24" class="teaser-single__date-day">24</span>
<abbr aria-label="Januar" title="Januar" class="teaser-single__date-month">Jan</abbr>
</div>
</div>
<h3 class="teaser-single__headline is-stage-frontpage">
Tag der offenen Tür. Hier auch ein dreizeiliger Titel möglich
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
<div class="stage-frontpage__teaser-collect is-second">
<div class="stage-frontpage__teaser is-bg-dark">
<div class="stage-frontpage__teaser-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<div class="teaser-single__news">
<div class="teaser-single__news-text">News</div>
</div>
<h3 class="teaser-single__headline is-stage-frontpage">
Wissenschaft Macht Politik: Die Münchener Räterepublik
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
<div class="stage-frontpage__teaser is-bg-green">
<div class="stage-frontpage__teaser-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline is-stage-frontpage">
Zum Newsroom
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Blueprint with Logo
<div class="c-stage-frontpage--bp" data-css="c-stage-frontpage">
<div class="grid__container">
<div class="stage-frontpage__image-wrapper">
<figure class="c-figure--header-frontpage" 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://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 " media=" (min-width:1024px)" />
<source data-srcset="
https://via.placeholder.com/300x200 300w ,
https://via.placeholder.com/600x400 600w ,
https://via.placeholder.com/900x600 900w ,
https://via.placeholder.com/1200x800 1200w ,
https://via.placeholder.com/1500x1000 1500w ,
https://via.placeholder.com/1800x1200 1800w ,
https://via.placeholder.com/2100x1400 2100w ,
https://via.placeholder.com/2400x1600 2400w " media=" (min-width: 641px)" />
<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 " media=" (max-width: 640px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://via.placeholder.com/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="stage-frontpage__row">
<div class="stage-frontpage__large-teaser">
<div class="stage-frontpage__large-teaser-content is-with-logo">
<div class="stage-frontpage__large-teaser-content-logo">
<img src="https://via.placeholder.com/300x200" class="stage-frontpage__logo">
</div>
<h1 class="stage-frontpage__headline">HM1 | Header Startseite</h1>
<p class="stage-frontpage__large-teaser-paragraph">Das Logo soll direkt im Template der Bühne gepflegt werden. Hier muss zum Einbinden das Original verwendet werden. Um nicht zu große Ladezeiten zu haben sollten wir uns um das Logo kümmern.</p>
</div>
</div>
</div>
</div>
</div>Blueprint ohne Logo und mit farblicher Box
<div class="c-stage-frontpage--bp" data-css="c-stage-frontpage">
<div class="grid__container">
<div class="stage-frontpage__image-wrapper">
<figure class="c-figure--header-frontpage" 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://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 " media=" (min-width:1024px)" />
<source data-srcset="
https://via.placeholder.com/300x200 300w ,
https://via.placeholder.com/600x400 600w ,
https://via.placeholder.com/900x600 900w ,
https://via.placeholder.com/1200x800 1200w ,
https://via.placeholder.com/1500x1000 1500w ,
https://via.placeholder.com/1800x1200 1800w ,
https://via.placeholder.com/2100x1400 2100w ,
https://via.placeholder.com/2400x1600 2400w " media=" (min-width: 641px)" />
<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 " media=" (max-width: 640px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://via.placeholder.com/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="stage-frontpage__row">
<div class="stage-frontpage__large-teaser">
<div class="stage-frontpage__large-teaser-content " style="background-color:#003399;color:#003399;">
<h1 class="stage-frontpage__headline" style="color:#ffffff;">HM1 | Header Startseite</h1>
<p class="stage-frontpage__large-teaser-paragraph" style="color:#ffffff;">Die Farbe der Box und des Textes werden als Hexawerte mitgegeben (in FS Eingabefelder) und als Inline-style-Element eingebunden.</p>
</div>
</div>
</div>
</div>
</div>