<header class="standard-header" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1)), url(../../assets/visual-header-medusa.jpg);">
    <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 { cssBackground } from './components/02-molecules/visual-elements/header/standard-header/config'
import StandardHeader from './components/02-molecules/visual-elements/header/standard-header/index'

<StandardHeader contentType="Content Typ" title="Titel" subtitle="Untertitel" date="1.1.2011" headerStyle={cssBackground}>
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. */
  • Content:
    $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;
      }
    }
    
  • URL: /components/raw/standard-header/_standard-header.scss
  • Filesystem Path: components/02-molecules/visual-elements/header/standard-header/_standard-header.scss
  • Size: 4.6 KB
  • Content:
    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});`
    
  • URL: /components/raw/standard-header/config.jsx
  • Filesystem Path: components/02-molecules/visual-elements/header/standard-header/config.jsx
  • Size: 436 Bytes
  • Content:
    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>
    }
    
  • URL: /components/raw/standard-header/index.jsx
  • Filesystem Path: components/02-molecules/visual-elements/header/standard-header/index.jsx
  • Size: 958 Bytes

There are no notes for this item.