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.
86 lines (78 loc) • 4.09 kB
HTML
<div class="sc-content-teaser-list">
<div class="sc-content-teaser">
<a href="#" class="sc-content-teaser__pic">
<picture>
<source srcset="https://placehold.it/480x270" media="(min-width: 768px)">
<source srcset="https://placehold.it/786x432" media="(min-width: 321px)">
<img srcset="https://placehold.it/480x270" alt="My default image">
</picture>
</a>
<div class="sc-content-teaser__content">
<a class="sc-content-teaser__category sc-font-s">extra title</a>
<div class="sc-content-teaser__introtext">
<h3 class="sc-font-m sc-font-bold">Title 1</h3>
<p class="sc-font-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.
</p>
<a href="#" class="sc-content-teaser__linkcover"></a>
</div>
</div>
</div>
<div class="sc-content-teaser sc-content-teaser--highlighted">
<a href="#" class="sc-content-teaser__pic">
<picture>
<source srcset="https://placehold.it/480x270" media="(min-width: 768px)">
<source srcset="https://placehold.it/786x432" media="(min-width: 321px)">
<img srcset="https://placehold.it/480x270" alt="My default image">
</picture>
</a>
<div class="sc-content-teaser__content">
<a class="sc-content-teaser__category sc-font-s">extra title</a>
<div class="sc-content-teaser__introtext">
<h3 class="sc-font-m sc-font-bold">Title 2</h3>
<p class="sc-font-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.
</p>
<a href="#" class="sc-content-teaser__linkcover"></a>
</div>
</div>
</div>
<div class="sc-content-teaser">
<a href="#" class="sc-content-teaser__pic">
<picture>
<source srcset="https://placehold.it/480x270" media="(min-width: 768px)">
<source srcset="https://placehold.it/786x432" media="(min-width: 321px)">
<img srcset="https://placehold.it/480x270" alt="My default image">
</picture>
</a>
<div class="sc-content-teaser__content">
<a class="sc-content-teaser__category sc-font-s">extra title</a>
<div class="sc-content-teaser__introtext">
<h3 class="sc-font-m sc-font-bold">Title 3</h3>
<p class="sc-font-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.
</p>
<a href="#" class="sc-content-teaser__linkcover"></a>
</div>
</div>
</div>
<div class="sc-content-teaser">
<a href="#" class="sc-content-teaser__pic">
<picture>
<source srcset="https://placehold.it/480x270" media="(min-width: 768px)">
<source srcset="https://placehold.it/786x432" media="(min-width: 321px)">
<img srcset="https://placehold.it/480x270" alt="My default image">
</picture>
</a>
<div class="sc-content-teaser__content">
<a class="sc-content-teaser__category sc-font-s">extra title</a>
<div class="sc-content-teaser__introtext">
<h3 class="sc-font-m sc-font-bold">Title 4</h3>
<p class="sc-font-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.
</p>
<a href="#" class="sc-content-teaser__linkcover"></a>
</div>
</div>
</div>
</div>