<header class="standard-header standard-header--inverted" 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 Type</h3>
    <h1 class="standard-header__title">Title</h1>
    <h2 class="standard-header__subtitle">Subtitle</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 { cssBackground } from "./components/02-molecules/header/standard-header/config";

<header class="standard-header standard-header--inverted" style={cssBackground}>
    <h3 class="standard-header__type">Content Type</h3>
    <h1 class="standard-header__title">Title</h1>
    <h2 class="standard-header__subtitle">Subtitle</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. */
  • 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/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/header/standard-header/config.jsx
  • Size: 433 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/header/standard-header/index.jsx
  • Size: 958 Bytes

There are no notes for this item.