Staff Header

WIP

HTML
View
Context
Assets
Info
Notes


        
        <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="Bluesky">
                    <span class="icon icon-bluesky 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>
            <li class="social-media-bar__item">
                <a href="#" class="social-media-bar__link" title="Speakerdeck">
                    <span class="icon icon-speakerdeck 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="Bluesky">
                    <span class="icon icon-bluesky 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>
            <li class="social-media-bar__item">
                <a href="#" class="social-media-bar__link" title="Speakerdeck">
                    <span class="icon icon-speakerdeck icon--brand-secondary"></span>
                </a>
            </li>
        </ul>
    </div>
</header>


        
            
            /* No context defined. */

File:

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:
- With layout
- Component only
Filesystem Path: components/03-organisms/header/staff-header/staff-header.html

No notes defined.