<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-svg icon-twitter icon--brand-white"></span></a>
                </li>
                <li>
                    <a class="share-section__link" target="_blank" href="" title="Github"><span class="icon-svg icon-github icon--brand-white"></span></a>
                </li>
                <li>
                    <a class="share-section__link" href=""><span class="icon-svg 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={context.app.uri("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-svg icon-twitter icon--brand-white"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" target="_blank" href="" title="Github">
                        <span class="icon-svg icon-github icon--brand-white"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" href="">
                        <span class="icon-svg 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 {
          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 {
        display: grid;
        grid-template-columns: auto $default-page-layout-content-width-xl / 3 $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: $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.