<header class="standard-header podcast-header--avatar--overlay" style="background-image: url(../../assets/heribert-rechts.png), url(../../assets/heribert-links.png);">
<h3 class="standard-header__type">Podcast</h3>
<h1 class="standard-header__title">Podcast Titel</h1>
<h2 class="standard-header__subtitle">Ein Untertitel</h2>
<div class="standard-header__intro">
<time class="standard-header__intro__date">01.01.2018</time>
<div class="standard-header__intro__text">Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket prosciutto
buffalo drumstick strip steak capicola short loin. Frankfurter fatback
turkey pork chop prosciutto pork ground round tongue chuck doner. Pig venison
pork chop shoulder corned beef capicola meatball.</div>
</div>
</header>
import { cssBoth } from "./components/02-molecules/header/standard-header/config";
<header class="standard-header podcast-header--avatar--overlay" style={cssBoth}>
<h3 class="standard-header__type">Podcast</h3>
<h1 class="standard-header__title">Podcast Titel</h1>
<h2 class="standard-header__subtitle">Ein Untertitel</h2>
<div class="standard-header__intro">
<time class="standard-header__intro__date">
01.01.2018
</time>
<div class="standard-header__intro__text">
Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
prosciutto buffalo drumstick strip steak capicola short loin.
Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
chuck doner. Pig venison pork chop shoulder corned beef capicola
meatball.
</div>
</div>
</header>
/* No context defined for this component. */
$standard-header-intro-offset-xxl: $spacer-xxl;
.standard-header {
@extend %page-header;
flex-direction: column;
align-items: center;
justify-content: flex-end;
margin-bottom: $spacer-sm;
padding-top: $spacer-lg;
&__title {
position: relative;
margin-bottom: $spacer-xs;
padding: 0 $spacer-md;
max-width: $default-page-layout-content-width-md;
text-align: center;
line-height: $standard-header-title-line-height-small;
color: $standard-header-title-color;
font-size: $standard-header-title-font-size-small;
&--separated {
margin-top: $spacer-xxl;
}
}
&__subtitle {
position: relative;
margin-bottom: $spacer-xs;
max-width: $default-page-layout-content-width-md;
text-align: center;
line-height: $standard-header-subtitle-line-height-small;
color: $standard-header-subtitle-color;
font-size: $standard-header-subtitle-font-size-small;
}
&__type {
@extend %heading-font-bold;
position: relative;
margin-bottom: $spacer-xs;
max-width: $default-page-layout-content-width-md;
text-align: center;
text-transform: uppercase;
line-height: $standard-header-type-line-height-small;
color: $standard-header-type-color;
font-size: $standard-header-type-font-size-small;
}
}
//Variations
.standard-header--inverted {
.standard-header__title {
color: $standard-header-inverted-title-color;
}
.standard-header__type {
color: $standard-header-inverted-type-color;
}
.standard-header__subtitle {
color: $standard-header-inverted-subtitle-color;
}
}
.podcast-header--avatar--overlay {
background-color: $podcast-teaser-overlay-color;
background-repeat: no-repeat;
background-position: top right, top left;
background-size: 0%;
background-blend-mode: multiply;
.standard-header__subtitle {
color: $standard-header-podcast-subtitle-color;
}
.standard-header__title,
.standard-header__subtitle {
padding: 0 $spacer-xl;
}
}
.standard-header__intro {
display: flex;
position: relative;
flex-direction: column;
align-items: center;
margin-top: $spacer-lg;
background-color: $standard-header-intro-bg;
padding: $container-spacer-y-sm $container-spacer-x-sm;
box-sizing: content-box;
}
.standard-header__intro__headline {
text-align: left;
}
.standard-header__intro__text {
@extend %body-font-italic;
line-height: $standard-header-intro-line-height-small;
font-size: $standard-header-intro-font-size-small;
}
.standard-header__intro__date {
@extend %heading-font-bold;
display: block;
position: relative;
top: -2.6rem; // FIXME
background-color: $standard-header-intro-date-bg;
padding: $spacer-xxs $spacer-xs;
line-height: $standard-header-intro-date-line-height-small;
color: $standard-header-intro-date-color;
font-size: $standard-header-intro-date-font-size-small;
}
//Breakpoints
@media screen and (min-width: $grid-breakpoint-sm) {
.standard-header__title {
font-size: $standard-header-title-font-size-medium-small;
}
.podcast-header--avatar--overlay {
background-size: 70%;
}
}
@media screen and (min-width: $grid-breakpoint-md) {
.standard-header {
margin-bottom: $standard-header-intro-offset-xxl;
}
.podcast-header--avatar--overlay {
background-size: contain;
}
.standard-header__title {
line-height: $standard-header-title-line-height;
font-size: $standard-header-title-font-size;
}
.standard-header__subtitle {
line-height: $standard-header-subtitle-line-height;
font-size: $standard-header-subtitle-font-size;
}
.standard-header__type {
line-height: $standard-header-type-line-height;
font-size: $standard-header-type-font-size;
}
.standard-header__intro {
margin-top: $spacer-xl;
padding: $spacer-lg;
width: $grid-page-layout-content-width-md;
max-width: $grid-page-layout-content-width-xl;
}
// offset
.standard-header__type,
.standard-header__title,
.standard-header__subtitle,
.standard-header__intro {
top: $standard-header-intro-offset-xxl;
}
.standard-header__intro__text {
line-height: $standard-header-intro-line-height;
font-size: $standard-header-intro-font-size;
}
.standard-header__intro__date {
top: -4.1rem; // FIXME
padding: $spacer-xs $spacer-sm;
}
}
@media screen and (min-width: $grid-breakpoint-lg) {
.standard-header__intro {
width: $grid-page-layout-content-width-lg;
}
}
@media screen and (min-width: $grid-breakpoint-xl) {
.standard-header__intro {
width: $grid-page-layout-content-width-xl;
}
}
import { context } from '../../../env'
const urlBackground = context.uri('assets/visual-header-medusa.jpg')
const urlRight = context.uri('assets/heribert-rechts.png')
const urlLeft = context.uri('assets/heribert-links.png')
export const cssBackground = `background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1)), url(${urlBackground});`
export const cssBoth = `background-image: url(${urlRight}), url(${urlLeft});`
import { createElement } from 'complate-stream'
import classNames from 'classnames'
export default function StandardHeader ({ contentType, title, subtitle, introTitle, date, additionalClassnames, titleSeparated, headerStyle }, ...children) {
let headerClass = classNames('standard-header', additionalClassnames)
let titleClass = classNames('standard-header__title', { 'standard-header__title--separated': titleSeparated })
return <header class={headerClass} style={headerStyle}>
{ contentType ? <h3 class='standard-header__type'>{contentType}</h3> : ''}
<h1 class={titleClass}>{title}</h1>
{ subtitle ? <h2 class='standard-header__subtitle'>{subtitle}</h2> : ''}
<div class='standard-header__intro'>
{ introTitle ? <h2>{introTitle}</h2> : '' }
{ date ? <time class='standard-header__intro__date'>{date}</time> : ''}
<div class='standard-header__intro__text'>
{children}
</div>
</div>
</header>
}
There are no notes for this item.