<header class="standard-header">
<h3 class="standard-header__type">Content Typ</h3>
<h1 class="standard-header__title">Titel</h1>
<h2 class="standard-header__subtitle">Untertitel</h2>
<div class="standard-header__intro">
<time class="standard-header__intro__date">1.1.2011</time>
<div class="standard-header__intro__text">Lorem gibson claymore jeans A.I. Chiba City EMP yiheyuan filters weathered
singularity RAF girl dead Freeside tower tiger-team corporation.</div>
</div>
</header>
import StandardHeader from './components/02-molecules/header/standard-header/index'
<StandardHeader contentType="Content Typ" title="Titel" subtitle="Untertitel" date="1.1.2011">
Lorem gibson claymore jeans A.I. Chiba City EMP yiheyuan filters weathered singularity RAF girl
dead Freeside tower tiger-team corporation.
</StandardHeader>
/* 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.