# Contact Person

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

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

`
File:

- 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:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/contact-person/contact-person.html

No notes defined.