# Author Bio Short

Ready

- HTML
- View
- Context
- Info
- Notes

`

    <div class="demo">
        <a rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--md">
                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
            <address>
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </a>

        <a rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--sm">
                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
            </div>
            <address>
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </a>

        <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--xs">
                <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Alexander Hesingfeld" />
            </div>
            <address>
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </div>
    </div>

`
`

    <div class="demo">
        <a rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--md">
                <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
            </div>
            <address>
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </a>

        <a rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--sm">
                <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
            </div>
            <address>
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </a>

        <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
            <div class="author-bio__image avatar avatar--xs">
                <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"
                    alt="Portrait von Alexander Hesingfeld" />
            </div>
            <address>
                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
            </address>
        </div>
    </div>

`
`

    /* No context defined. */

`

- Handle: @author-bio-short
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/author-bio/author-bio-short.html

No notes defined.