<section class="contact-person">
    <h3 class="section-heading--primary">Noch Fragen?</h3>
    <h4 class="contact-person__subheading">Du möchtest dich bewerben, hast aber noch Fragen?</h4>
    <h4 class="contact-person__subheading">Sprich mit uns!</h4>
    <div class="contact-person__wrapper">
        <a rel="author" class="author-bio author-bio--large" href="#mailto:contact-person@innoq.com" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--xl">
                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert INNOQ</span>
                <p class="author-bio__expertise" itemprop="knowsAbout">Fachgebiet1, Fachgebiet2</p>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                <p class="author-bio__info" itemprop="description">seit 10 Jahren dabei.</p>
                <span class="link-teaser" href="#">Email an Heribert</span>
            </address>
        </a>
        <a rel="author" class="author-bio author-bio--large" href="#mailto:contact-person@innoq.com" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--xl">
                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert INNOQ</span>
                <p class="author-bio__expertise" itemprop="knowsAbout">Fachgebiet1, Fachgebiet2</p>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                <p class="author-bio__info" itemprop="description">seit 10 Jahren dabei.</p>
                <span class="link-teaser" href="#">Email an Heribert</span>
            </address>
        </a>
    </div>
</section>

<section class="contact-person contact-person--inverted bg-image-edition-12">
    <h3 class="section-heading--primary">Bewirb Dich</h3>
    <h4 class="contact-person__subheading">Lorem Ipsum</h4>
    <div class="contact-person__wrapper">
        <a rel="author" class="author-bio author-bio--large" href="#mailto:contact-person@innoq.com" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--xl">
                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert INNOQ</span>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                <p class="author-bio__info" itemprop="description">seit 10 Jahren dabei.</p>
                <span class="link-teaser inverted-interaction-color" href="#">Email an Heribert</span>
            </address>
        </a>
    </div>
</section>
<section class="contact-person">
    <h3 class="section-heading--primary">Noch Fragen?</h3>
    <h4 class="contact-person__subheading">Du möchtest dich bewerben, hast aber noch Fragen?</h4>
    <h4 class="contact-person__subheading">Sprich mit uns!</h4>
    <div class="contact-person__wrapper">
        <a rel="author" class="author-bio author-bio--large" href="#mailto:contact-person@innoq.com" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--xl">
                <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg'}}" alt="Portrait von Heribert Innoq"/>
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert INNOQ</span>
                <p class="author-bio__expertise" itemprop="knowsAbout">Fachgebiet1, Fachgebiet2</p>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                <p class="author-bio__info" itemprop="description">seit 10 Jahren dabei.</p>
                <span class="link-teaser" href="#">Email an Heribert</span>
            </address>
        </a>
        <a rel="author" class="author-bio author-bio--large" href="#mailto:contact-person@innoq.com" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--xl">
                <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg'}}" alt="Portrait von Heribert Innoq"/>
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert INNOQ</span>
                <p class="author-bio__expertise" itemprop="knowsAbout">Fachgebiet1, Fachgebiet2</p>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                <p class="author-bio__info" itemprop="description">seit 10 Jahren dabei.</p>
                <span class="link-teaser" href="#">Email an Heribert</span>
            </address>
        </a>
    </div>
</section>

<section class="contact-person contact-person--inverted bg-image-edition-12">
    <h3 class="section-heading--primary">Bewirb Dich</h3>
    <h4 class="contact-person__subheading">Lorem Ipsum</h4>
    <div class="contact-person__wrapper">
        <a rel="author" class="author-bio author-bio--large" href="#mailto:contact-person@innoq.com" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--xl">
                <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg'}}" alt="Portrait von Heribert Innoq"/>
            </div>
            <address class="author-bio__text">
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert INNOQ</span>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                <p class="author-bio__info" itemprop="description">seit 10 Jahren dabei.</p>
                <span class="link-teaser inverted-interaction-color" href="#">Email an Heribert</span>
            </address>
        </a>
    </div>
</section>
/* No context defined. */
  • Content:
    .contact-person {
      @extend %container-xl;
      @extend %container-vertical-spacing-xl;
    
      .author-bio--large {
        color: $brand-secondary;
      }
    }
    
    .contact-person--inverted {
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      background-blend-mode: multiply;
    
      * {
        color: $brand-white;
      }
    }
    
    .contact-person__wrapper {
      display: grid;
      grid-gap: $spacer-base;
      grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
      width: 100%;
    }
    
    .contact-person__subheading {
      @extend %heading-font-regular;
    
      margin-bottom: $spacer-lg;
      font-size: $font-size-md;
      line-height: $heading-line-height;
      text-align: center;
    }
    
  • URL: /components/raw/contact-person/_contact-person.scss
  • Filesystem Path: components/04-molecules/contact-person/_contact-person.scss
  • Size: 687 Bytes
  • Handle: @contact-person
  • Preview:
  • Filesystem Path: components/04-molecules/contact-person/contact-person.html

No notes defined.