Staff Header 

<header class="staff-header">
    <div class="staff-header__body">
        <div class="staff-header__profile" itemscope itemtype="http://schema.org/Person">
            <div class="staff-header__profile__person">
                <h1 class="staff-header__profile__person__name" itemprop="fullName">Dr. Heribert Innoq</h1>
                <p class="staff-header__profile__person__role" itemprop="jobTitle">Fellow</p>
                <p class="staff-header__profile__person__link" itemprop="url"><a class="link-teaser" href="#">Trainerprofil</a> bei Socreatory</p>
            </div>
            <div class="avatar avatar--xxl">
                <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
        </div>
        <p class="staff-header__text">Heribert ist Senior Consultant bei INNOQ in München und ist interessiert
            an Programmiersprachen (insbesondere funktionale), Webentwicklung und theoretischer Informatik.
            Lars schreibt Artikel und spricht auf Konferenzen über eine Vielzahl von Themen.</p>
        <ul class="social-media-bar">
            <li class="social-media-bar__item">
                <a href="#" class="social-media-bar__link" title="Twitter">
                    <span class="icon icon-twitter icon--brand-secondary"></span>
                </a>
            </li>
            <li class="social-media-bar__item">
                <a href="#" class="social-media-bar__link" title="Youtube">
                    <span class="icon icon-youtube icon--brand-secondary"></span>
                </a>
            </li>
            <li class="social-media-bar__item">
                <a href="#" class="social-media-bar__link" title="Linkedin">
                    <span class="icon icon-linkedin icon--brand-secondary"></span>
                </a>
            </li>
            <li class="social-media-bar__item">
                <a href="#" class="social-media-bar__link" title="Xing">
                    <span class="icon icon-xing icon--brand-secondary"></span>
                </a>
            </li>
        </ul>
    </div>
</header>
 
<header class="staff-header">
    <div class="staff-header__body">
        <div class="staff-header__profile" itemscope itemtype="http://schema.org/Person">
            <div class="staff-header__profile__person">
                <h1 class="staff-header__profile__person__name" itemprop="fullName">Dr. Heribert Innoq</h1>
                <p class="staff-header__profile__person__role"itemprop="jobTitle">Fellow</p>
                <p class="staff-header__profile__person__link" itemprop="url"><a class="link-teaser" href="#">Trainerprofil</a> bei Socreatory</p>
            </div>
            <div class="avatar avatar--xxl">
                <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
            </div>
        </div>
        <p class="staff-header__text">Heribert ist Senior Consultant bei INNOQ in München und ist interessiert
            an Programmiersprachen (insbesondere funktionale), Webentwicklung und theoretischer Informatik.
            Lars schreibt Artikel und spricht auf Konferenzen über eine Vielzahl von Themen.</p>
        <ul class="social-media-bar">
            <li class="social-media-bar__item">
                <a href="#" class="social-media-bar__link" title="Twitter">
                    <span class="icon icon-twitter icon--brand-secondary"></span>
                </a>
            </li>
            <li class="social-media-bar__item">
                <a href="#" class="social-media-bar__link" title="Youtube">
                    <span class="icon icon-youtube icon--brand-secondary"></span>
                </a>
            </li>
            <li class="social-media-bar__item">
                <a href="#" class="social-media-bar__link" title="Linkedin">
                    <span class="icon icon-linkedin icon--brand-secondary"></span>
                </a>
            </li>
            <li class="social-media-bar__item">
                <a href="#" class="social-media-bar__link" title="Xing">
                    <span class="icon icon-xing icon--brand-secondary"></span>
                </a>
            </li>
        </ul>
    </div>
</header>
 
/* No context defined. */
  • Content: 
    .staff-header {
  background: $gradient-2;
}

.staff-header__body {
  display: grid;
  gap: $spacer-base;
  place-items: center;

  max-width: $default-page-layout-content-width-md;
  margin: 0 auto;
  padding: $spacer-base $spacer-sm;

  color: $staff-header-text-color;

  .social-media-bar__item {
    .icon:hover,
    .icon:focus {
      background: $staff-header-icon-hover-color;
    }
  }
}

.staff-header__profile {
  display: grid;
  gap: $spacer-base;
  place-items: center;

  width: 100%;

  hyphens: none;
}

.staff-header__profile__name {
  > * + * {
    margin-top: $spacer-xs;
  }
}

.staff-header__profile__person__name {
  @extend %h3;
}

.staff-header__profile__person__role {
  @extend %heading-font-regular;
}

.staff-header__profile__person__link {
  @extend %heading-font-heavy;
  @extend %link-unstyled;

  font-size: $font-size-xs;
}

.staff-header__text {
  @extend %heading-font-regular;

  padding-bottom: $spacer-md;
  border-bottom: $staff-header-text-color solid 2px;
}

@media screen and (min-width: $grid-breakpoint-sm) {
  .staff-header__profile {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    align-items: center;
    text-align: left;
  }
}
  • URL: /components/raw/staff-header/_staff-header.scss
  • Filesystem Path: components/03-organisms/header/staff-header/_staff-header.scss
  • Size: 1.2 KB
  • Handle: @staff-header
  • Preview:
  • Filesystem Path: components/03-organisms/header/staff-header/staff-header.html

No notes defined.