Living Styleguide

Standard Header: Default 

<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.