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.
65 lines (58 loc) • 3.27 kB
HTML
<div class="sc-articles">
<div class="sc-article">
<picture class="sc-article__pic">
<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>
<div class="sc-article__content">
<a href="#" class="sc-article__category sc-font-s">Lorem ipsum dolor sit amet</a>
<h3 class="sc-font-m sc-font-bold sc-padding-bottom-xs">Lorem ipsumn dolor sit amet</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.
</p>
</div>
</div>
<div class="sc-article">
<picture class="sc-article__pic">
<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>
<div class="sc-article__content">
<a href="#" class="sc-article__category sc-font-s">Lorem ipsum dolor sit amet</a>
<h3 class="sc-font-m sc-font-bold sc-padding-bottom-xs">Lorem ipsumn dolor sit amet</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.
</p>
</div>
</div>
<div class="sc-article">
<picture class="sc-article__pic">
<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>
<div class="sc-article__content">
<a href="#" class="sc-article__category sc-font-s">Lorem ipsum dolor sit amet</a>
<h3 class="sc-font-m sc-font-bold sc-padding-bottom-xs">Lorem ipsumn dolor sit amet</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.
</p>
</div>
</div>
<div class="sc-article">
<picture class="sc-article__pic">
<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>
<div class="sc-article__content">
<a href="#" class="sc-article__category sc-font-s">Lorem ipsum dolor sit amet</a>
<h3 class="sc-font-m sc-font-bold sc-padding-bottom-xs">Lorem ipsumn dolor sit amet</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.
</p>
</div>
</div>
</div>