Portfolio Card

<div class="portfolio-card">
    <div class="portfolio-card__body">
        <div class="portfolio-card__caption">Artikel</div>
        <h2 class="portfolio-card__headline">Artikel Headline</h2>
        <div class="portfolio-card__text">
            <p>Lorem gibson dermatrodes boy nodality neural office sprawl futurity Lado-Acheson count zero interrupt
                Night
                City tanto papier-mache kanji corporation meta-lights neurosurgery.</p>
            <p>Lorem gibson Chiba neon neon motion Mycotoxin Metro Holografix boat RAM AI disposable lights saturation
                point stimulate boat systemic vehicle.</p>
            <h3>Unordered List</h3>
            <ul>
                <li>
                    Unordered List item
                </li>
                <li>
                    Unordered List item with nested unordered list
                    <ul>
                        <li>
                            Nested unordered list item
                        </li>
                        <li>
                            Nested unordered list item with a nested unordered list
                            <ul>
                                <li>
                                    Another Nested unordered list item
                                </li>
                            </ul>
                        </li>
                        <li>
                            Nested unordered list item with a nested ordered list
                            <ol>
                                <li>
                                    Another Nested ordered list item
                                </li>
                                <li>
                                    Another Nested ordered list item
                                </li>
                            </ol>
                        </li>
                    </ul>
                </li>
                <li>
                    <p>{{text}}</p>
            <p>Lorem gibson dermatrodes boy nodality neural office sprawl futurity Lado-Acheson count zero interrupt
                Night
                City tanto papier-mache kanji corporation meta-lights neurosurgery.</p>
            <p>Lorem gibson Chiba neon neon motion Mycotoxin Metro Holografix boat RAM AI disposable lights saturation
                point stimulate boat systemic vehicle.</p>
                </li>
            </ul>
            <ol>
                <li>
                    Ordered List item
                </li>
                <li>
                    Ordered List item
                </li>
                <li>
                    Ordered List item
                </li>
                <li> Ordered List item with a nestet ordered list
                    <ol>
                        <li>
                            Another Nested ordered list item
                        </li>
                        <li>
                            Another Nested ordered list item
                        </li>
                    </ol>
                </li>
                <li>
                    Ordered List item
                </li>
                <li>
                    Ordered List item
                </li>

                <li>
                    Ordered List item
                </li>
                <li>
                    Ordered List item
                </li>
                <li>
                    Ordered List item
                </li>

                <li>
                    Ordered List item
                </li>
                <li>
                    Ordered List item
                </li>
                <li>
                    Ordered List item
                </li>
            </ol>
            <ol>
                <li>
                    Ordered List with nested unordered List
                    <ul>
                        <li>
                            Nested unordered list item
                        </li>
                        <li>
                            Nested unordered list item
                        </li>
                    </ul>
                </li>
                <li>
                    Ordered List item
                </li>
                <li>
                    Ordered List item
                </li>
            </ol>
        </div>
    </div>
    <div class="portfolio-card__footer">
        <div rel="author" class="author-bio author-bio--short" 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>
        </div>
        <div rel="author" class="author-bio author-bio--short" 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>
        </div>
    </div>
</div>