<header class="staff-header">
    <div class="staff-header-left"></div>
    <img class="staff-header-image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
    <address class="staff-header-info">
        <h2 class="staff-header-info__name" itemprop="fullName">Heribert Innoq</h2>
        <h3 class="staff-header-info__job-title" itemprop="jobTitle">Senior Consultant</h3>
    </address>
    <div class="staff-header-right"></div>
    <section class="staff-header-bio">
        <div class="staff-header-bio__text">
            <p>
                Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
                ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket Dies ist <a href="#!">ein Link</a> prosciutto buffalo drumstick strip steak capicola short loin.
                Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
                chuck doner.
            </p>
        </div>
        <div class="staff-header-bio__social">
            <ul class="share-section__list">
                <li>
                    <a class="share-section__link" target="_blank" href="" title="Twitter">
                        <span class="icon icon-twitter icon--brand-white"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" target="_blank" href="" title="Github">
                        <span class="icon icon-github icon--brand-white"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" href="">
                        <span class="icon icon-email icon--brand-white" title="Email"></span>
                    </a>
                </li>
            </ul>
        </div>
    </section>
</header>
<header class="staff-header">
    <div class="staff-header-left"></div>
    <img class="staff-header-image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
    <address class="staff-header-info">
        <h2 class="staff-header-info__name" itemprop="fullName">Heribert Innoq</h2>
        <h3 class="staff-header-info__job-title" itemprop="jobTitle">Senior Consultant</h3>
    </address>
    <div class="staff-header-right"></div>
    <section class="staff-header-bio">
        <div class="staff-header-bio__text">
            <p>
            Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
            ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket Dies ist <a href="#!">ein Link</a> prosciutto buffalo drumstick strip steak capicola short loin.
            Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
            chuck doner.
            </p>
        </div>
        <div class="staff-header-bio__social">
            <ul class="share-section__list">
                <li>
                    <a class="share-section__link" target="_blank" href="" title="Twitter">
                        <span class="icon icon-twitter icon--brand-white"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" target="_blank" href="" title="Github">
                        <span class="icon icon-github icon--brand-white"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" href="">
                        <span class="icon icon-email icon--brand-white" title="Email"></span>
                    </a>
                </li>
            </ul>
        </div>
    </section>
</header>
/* No context defined. */
  • Content:
    .staff-header {
      display: flex;
      flex-flow: row wrap;
    }
    
    .staff-header-image {
      width: 100%;
      // Fix for bug in mobile Safari
      height: 100%;
    }
    
    .staff-header-info {
      flex-grow: 1;
      padding: $spacer-md $spacer-md $spacer-xs;
      background-color: $staff-header-info-bg-color;
    
      &__name {
        margin-bottom: $spacer-xs;
        text-transform: uppercase;
      }
    
      &__job-title {
        @extend %heading-font-regular;
    
        margin-bottom: $spacer-xs;
        font-size: $font-size-lg;
      }
    }
    
    .staff-header-bio {
      padding: $spacer-lg $spacer-md $spacer-md;
      background-color: $staff-header-bio-bg-color;
    
      &__text p {
        @extend %heading-font-regular;
    
        padding-bottom: $spacer-md;
        color: $staff-header-bio-color;
        font-size: $font-size-sm;
        line-height: $paragraph-line-height;
    
        a {
          @extend %link-unstyled;
    
          color: $staff-header-bio-link-color;
    
          &:hover {
            @extend %heading-font-bold;
          }
        }
      }
    
      &__social {
        padding-top: $spacer-lg;
        border-top: 1px solid $staff-header-bio-color;
    
        .icon:hover,
        .icon: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 {
        display: grid;
        grid-template-columns: auto calc($default-page-layout-content-width-xl / 3) calc($default-page-layout-content-width-xl / 3) auto;
        grid-template-rows: auto;
      }
    
      .staff-header-left {
        background-color: $staff-header-bg-color;
        grid-column: 1 / 2;
      }
    
      .staff-header-right {
        background-color: $staff-header-bg-color;
        grid-column: 4 / 5;
      }
    
      .staff-header-bio {
        padding: $spacer-lg $spacer-lg $spacer-md;
        margin: 0;
        grid-column: 2 / 4;
      }
    
      .staff-header-info {
        padding: $spacer-xxl $spacer-md 0;
        margin: 0;
        grid-column: 2 / 3;
        grid-row-start: 1;
      }
    
      .staff-header-image {
        min-width: calc($default-page-layout-content-width-xl / 3);
        // Fix for bug in mobile Safari
        height: auto;
        min-height: auto;
        grid-column: 3 / 4;
      }
    }
    
  • URL: /components/raw/staff-header/_staff-header.scss
  • Filesystem Path: components/03-organisms/header/staff-header/_staff-header.scss
  • Size: 2.2 KB
  • Handle: @staff-header
  • Preview:
  • Filesystem Path: components/03-organisms/header/staff-header/staff-header.html

No notes defined.