<div>
    <header class="staff-header">
        <div class="staff-header-content">
            <div class="staff-header-quote">
                <h2 class="staff-header-quote--text">"Wir lösen das persönlich."</h2>
                <cite class="staff-header-quote--author" itemprop="name">Heribert Innoq</cite>
            </div>
            <img class="staff-header-image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
        </div>
    </header>
    <div class="staff-intro">
        <h2 class="staff-intro--name" itemprop="name">Heribert Inooq</h2>
        <h3 class="staff-intro--job-title" itemprop="jobTitle">
            Senior Consultant
        </h3>
        <div class="staff-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>
        <section class="staff-intro--social">
            <ul class="share-section__list">
                <li>
                    <a class="share-section__link" target="_blank" href=""><span class="icon-svg icon-twitter icon--brand-secondary"></span></a>
                </li>
                <li>
                    <a class="share-section__link" target="_blank" href=""><span class="icon-svg icon-github icon--brand-secondary"></span></a>
                </li>
                <li>
                    <a class="share-section__link" href=""><span class="icon-svg icon-email icon--brand-secondary"></span></a>
                </li>
            </ul>
        </section>
    </div>
</div>
<div>
    <header class="staff-header">
        <div class="staff-header-content">
            <div class="staff-header-quote">
                <h2 class="staff-header-quote--text">"Wir lösen das persönlich."</h2>
                <cite class="staff-header-quote--author" itemprop="name">Heribert Innoq</cite>
            </div>
            <img class="staff-header-image" itemprop="photo" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq" />
        </div>
    </header>
    <div class="staff-intro">
        <h2 class="staff-intro--name" itemprop="name">Heribert Inooq</h2>
        <h3 class="staff-intro--job-title" itemprop="jobTitle">Senior Consultant</h3>
        <div class="staff-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>
        <section class="staff-intro--social">
            <ul class="share-section__list">
                <li>
                    <a class="share-section__link" target="_blank" href="">
                        <span class="icon-svg icon-twitter icon--brand-secondary"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" target="_blank" href="">
                        <span class="icon-svg icon-github icon--brand-secondary"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" href="">
                        <span class="icon-svg icon-email icon--brand-secondary"></span>
                    </a>
                </li>
            </ul>
        </section>
    </div>
</div>
/* No context defined. */
  • Content:
    $staff-intro-offset: -(ms(22));
    /* stylelint-disable-next-line color-no-hex */
    $staff-header-bg-gray: #f6f6f6;
    
    .staff-header {
      background-image: linear-gradient(
        to right,
        $staff-header-bg-color,
        $staff-header-bg-color 50%,
        $staff-header-bg-gray 50%
      );
    }
    
    .staff-header-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: $staff-header-content-bg-color;
    }
    
    .staff-header-image {
      width: 100%;
      height: auto;
    }
    
    .staff-header-quote {
      padding: $spacer-lg $spacer-md;
      background-color: $staff-header-quote-bg-color;
    }
    
    .staff-header-quote--text {
      color: $staff-header-quote-color;
      font-size: $font-size-xl;
    }
    
    .staff-header-quote--author {
      @extend %heading-font-regular;
    
      color: $staff-header-quote-author-color;
      font-size: $font-size-base;
      text-transform: uppercase;
    }
    
    .staff-intro {
      width: 100%;
      padding: $spacer-md;
      background-color: $staff-header-intro-bg-color;
      color: $staff-header-intro-text-color;
    }
    
    .staff-intro--name {
      @extend %heading-font-heavy;
    
      margin-bottom: $spacer-xs;
      color: $staff-header-intro-text-color;
      font-size: $font-size-xl;
      text-transform: uppercase;
    }
    
    .staff-intro--job-title {
      @extend %body-font-italic;
    
      margin-bottom: $spacer-xs;
      color: $staff-header-intro-text-color;
      font-size: $font-size-lg;
    }
    
    .staff-intro--text {
      @extend %heading-font-regular;
    
      padding-bottom: $spacer-base;
      border-bottom: 1px solid $staff-header-intro-text-border;
      font-size: $font-size-sm;
      line-height: $paragraph-line-height;
    }
    
    .staff-intro--social {
      padding: $spacer-md 0;
    
      .icon {
        font-size: ms(7);
      }
    
      .icon-svg:hover,
      .icon-svg:focus {
        background: $staff-header-icon-hover-color;
      }
    }
    
    //Breakpoints
    @media screen and (min-width: $grid-breakpoint-md) {
      .staff-header-image {
        max-width: 70%;
        margin: 0 auto;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-lg) {
      .staff-header-content {
        max-width: $default-page-layout-content-width-xl;
        flex-direction: row;
        margin: 0 auto;
      }
    
      .staff-header-quote {
        flex-grow: 1;
        padding: $spacer-xxl $spacer-md 0;
      }
    
      .staff-header-image {
        min-width: $default-page-layout-content-width-xl / 2;
        max-width: $default-page-layout-content-width-xl / 2;
        min-height: $default-page-layout-content-width-xl / 2;
        max-height: $default-page-layout-content-width-xl / 2;
      }
    
      .staff-header-quote--text {
        font-size: $font-size-xxxl;
      }
    
      .staff-intro {
        position: relative;
        top: $staff-intro-offset;
        width: $grid-page-layout-content-width;
        max-width: $grid-page-layout-content-width-xl;
        box-sizing: content-box;
        padding: $spacer-lg $spacer-xl 0;
        margin: 0 auto $staff-intro-offset;
      }
    
      .staff-intro--job-title {
        margin-bottom: $spacer-sm;
      }
    
      .staff-intro--text {
        padding-bottom: $spacer-lg;
        font-size: $font-size-lg;
      }
    
      .staff-intro--social {
        padding: $spacer-base 0;
      }
    }
    
  • URL: /components/raw/staff-header/_staff-header.scss
  • Filesystem Path: components/03-organisms/header/staff-header/_staff-header.scss
  • Size: 3 KB
  • Handle: @staff-header
  • Preview:
  • Filesystem Path: components/03-organisms/header/staff-header/staff-header.html

No notes defined.