showcar-ui/src/06-components/organisms/link-text-box-group/docs/link-text-box-group.html

Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.

<div class="sc-link-text-box-group">
    <div class="sc-link-text-box">
        <div class="sc-link-text-box__text">
            <h3 class="sc-link-text-box__headline">Hybridautos</h3>
            <p class="sc-link-text-box__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt blandit elementum. Nam et orci at lacus
                tincidunt suscipit et vitae tellus. Nam vel ornare dolor, id porta lectus. Curabitur nec dapibus tortor, nec
                sagittis neque. Vivamus bibendum vehicula sapien, pretium tincidunt nulla egestas in.</p>
        </div>
        <div class="sc-link-text-box__links">
            <ul class="sc-unique-link-list">
                <li><a href="#">BMW 1</a></li>
                <li><a href="#">BMW 3</a></li>
                <li><a href="#">Honda</a></li>
                <li><a href="#">Mercedes A</a></li>
                <li><a href="#">Ferrari</a></li>
                <li><a href="#">FCA</a></li>
                <li><a href="#">Land Rover</a></li>
                <li><a href="#">Aprilia</a></li>
                <li><a href="#">Maserati</a></li>
                <li><a href="#">Lamborghini</a></li>
                <li><a href="#">Skora</a></li>
                <li><a href="#">Fiat</a></li>
            </ul>
        </div>
    </div>
    <div class="sc-link-text-box">
        <div class="sc-link-text-box__text">
            <h3 class="sc-link-text-box__headline">Hybridautos 2</h3>
            <p class="sc-link-text-box__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="sc-link-text-box__links">
            <ul class="sc-unique-link-list">
                <li><a href="#">BMW 1</a></li>
                <li><a href="#">BMW 3</a></li>
                <li><a href="#">Honda</a></li>
            </ul>
        </div>
    </div>
    <div class="sc-link-text-box">
        <div class="sc-link-text-box__text">
            <h3 class="sc-link-text-box__headline">Hybridautos 3</h3>
            <p class="sc-link-text-box__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt blandit elementum. Nam et orci at lacus
                tincidunt suscipit et vitae tellus. Nam vel ornare dolor, id porta lectus. Curabitur nec dapibus tortor, nec
                sagittis neque. Vivamus bibendum vehicula sapien, pretium tincidunt nulla egestas in.</p>
        </div>
        <div class="sc-link-text-box__links">
            <ul class="sc-unique-link-list">
                <li><a href="#">BMW 1</a></li>
                <li><a href="#">BMW 3</a></li>
                <li><a href="#">Honda</a></li>
                <li><a href="#">Mercedes A</a></li>
                <li><a href="#">Ferrari</a></li>
                <li><a href="#">FCA</a></li>
                <li><a href="#">Land Rover</a></li>
                <li><a href="#">Aprilia</a></li>
            </ul>
        </div>
    </div>
    <div class="sc-link-text-box">
        <div class="sc-link-text-box__text">
            <h3 class="sc-link-text-box__headline">Hybridautos 4</h3>
            <p class="sc-link-text-box__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt blandit elementum. Nam et orci at lacus
                tincidunt suscipit et vitae tellus. Nam vel ornare dolor, id porta lectus.</p>
        </div>
        <div class="sc-link-text-box__links">
            <ul class="sc-unique-link-list">
                <li><a href="#">BMW 1</a></li>
                <li><a href="#">BMW 3</a></li>
                <li><a href="#">Honda</a></li>
                <li><a href="#">Mercedes A</a></li>
                <li><a href="#">Ferrari</a></li>
                <li><a href="#">FCA</a></li>
            </ul>
        </div>
    </div>
</div>