showcar-ui/src/06-components/organisms/benefit-group/docs/benefit-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-benefit-group">
    <div class="sc-benefit">
        <div class="sc-padding-bottom-l"><as24-icon type="heart" class="sc-icon-xxl"></as24-icon></div>
        <h3 class="sc-font-l sc-padding-bottom-s sc-font-bold">Title</h3>
        <h4 class="sc-padding-bottom-s">Item subtitle</h4>
        <p class="sc-padding-bottom-xxl sc-font-m">Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.</p>
        <a class="sc-link" href="#">See more</a>
    </div>

    <div class="sc-benefit">
        <div class="sc-padding-bottom-l"><as24-icon type="info" class="sc-icon-xxl"></as24-icon></div>
        <h3 class="sc-font-l sc-padding-bottom-s sc-font-bold">Title</h3>
        <h4 class="sc-padding-bottom-s">Item subtitle</h4>
        <p class="sc-padding-bottom-xxl sc-font-m">Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.</p>
        <a class="sc-link" href="#">See more</a>
    </div>

    <div class="sc-benefit">
        <div class="sc-padding-bottom-l"><as24-icon type="star" class="sc-icon-xxl"></as24-icon></div>
        <h3 class="sc-font-l sc-padding-bottom-s sc-font-bold"><span class="sc-disruptor sc-font-uppercase">Neu</span> Title</h3>
        <h4 class="sc-padding-bottom-s">Item subtitle</h4>
        <p class="sc-padding-bottom-xxl sc-font-m">Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.</p>
        <a class="sc-link" href="#">See more</a>
    </div>
</div>

<hr>

<div class="sc-benefit-group">
    <div class="sc-benefit">
        <div class="sc-padding-bottom-l"><as24-icon type="info" class="sc-icon-xxl"></as24-icon></div>
        <h3 class="sc-font-l sc-padding-bottom-s sc-font-bold"><span class="sc-disruptor sc-font-uppercase">Neu</span> Title</h3>
        <h4 class="sc-padding-bottom-s">Item subtitle</h4>
        <p class="sc-padding-bottom-xxl sc-font-m">Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.</p>
        <a class="sc-link" href="#">See more</a>
    </div>

    <div class="sc-benefit">
        <div class="sc-padding-bottom-l"><as24-icon type="heart" class="sc-icon-xxl"></as24-icon></div>
        <h3 class="sc-font-l sc-padding-bottom-s sc-font-bold">Title</h3>
        <h4 class="sc-padding-bottom-s">Item subtitle</h4>
        <p class="sc-padding-bottom-xxl sc-font-m">Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.</p>
        <a class="sc-link" href="#">See more</a>
    </div>
</div>