showcar-ui
Version:
Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.
77 lines (70 loc) • 3.46 kB
HTML
<div class="sc-media-section-list">
<div class="sc-media-section">
<picture class="sc-media-section__pic">
<source srcset="https://placehold.it/480x270" media="(min-width: 1024px)">
<source srcset="https://placehold.it/768x432" media="(min-width: 600px)">
<img srcset="https://placehold.it/480x270" alt="My default image">
</picture>
<div class="sc-media-section__content sc-margin-top-l">
<h3 class="sc-font-l sc-padding-bottom-m sc-font-bold">Title</h3>
<p class="sc-padding-bottom-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce volutpat quis ex a varius.
</p>
<a href="#">Link to section</a>
</div>
</div>
<div class="sc-media-section sc-media-section--reverse">
<picture class="sc-media-section__pic">
<source srcset="https://placehold.it/480x270" media="(min-width: 1024px)">
<source srcset="https://placehold.it/768x432" media="(min-width: 600px)">
<img srcset="https://placehold.it/480x270" alt="My default image">
</picture>
<div class="sc-media-section__content sc-margin-top-l">
<h3 class="sc-font-l sc-padding-bottom-m sc-font-bold">Title</h3>
<ul class="sc-list sc-list--disc">
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li>
Fusce volutpat quis ex a varius.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce volutpat quis ex a varius.
</li>
</ul>
</div>
</div>
<div class="sc-media-section">
<picture class="sc-media-section__pic">
<source srcset="https://placehold.it/480x270" media="(min-width: 1024px)">
<source srcset="https://placehold.it/768x432" media="(min-width: 600px)">
<img srcset="https://placehold.it/480x270" alt="My default image">
</picture>
<div class="sc-media-section__content sc-margin-top-l">
<p class="sc-padding-bottom-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce volutpat quis ex a varius.
</p>
<button class="sc-btn-bob">I am Bob!</button>
<button class="sc-btn-ross">I am Ross!</button>
</div>
</div>
<div class="sc-media-section sc-media-section--reverse">
<picture class="sc-media-section__pic">
<source srcset="https://placehold.it/480x270" media="(min-width: 1024px)">
<source srcset="https://placehold.it/768x432" media="(min-width: 600px)">
<img srcset="https://placehold.it/480x270" alt="My default image">
</picture>
<div class="sc-media-section__content sc-margin-top-l">
<h3 class="sc-font-l sc-padding-bottom-m sc-font-bold">Title</h3>
<span class="sc-disruptor sc-font-uppercase">Neu</span>
<span class="sc-disruptor">Bereits über 20 Mio. Downloads!</span>
<p class="sc-padding-bottom-xl sc-margin-top-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce volutpat quis ex a varius.
</p>
</div>
</div>
</div>