Contact Person 

<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.