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.
230 lines (197 loc) • 5.93 kB
HTML
<!--
************
EXAMPLE 1
************
-->
<style>
.sc-superhero__imgs {
background-image: url('https://via.placeholder.com/480x270');
}
@media screen and (min-width: 768px) {
.sc-superhero__imgs {
background-image: none;
}
.sc-superhero {
background-image: url('https://via.placeholder.com/768x432');
}
}
@media screen and (min-width: 1024px) {
.sc-superhero {
background-image: url('https://via.placeholder.com/1100x430');
}
}
h2.sc-superhero__title--branded {
margin-bottom: 0 ;
font-size: 20px ;
}
</style>
<div class="sc-superhero">
<div class="sc-superhero__imgs"></div>
<div class="sc-superhero__content">
<h2 class="sc-superhero__title--branded sc-font-l sc-margin-top-m">Fahrzeugbewertung</h2>
<h3 class="sc-font-xl sc-font-bold">Bringen Sie Ihr Auto groß raus.</h3>
<h4 class="sc-font-xl">Mit dem richtigen Preis.</h4>
<p class="s-font-l sc-margin-top-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit, neque eu gravida convallis, libero lorem elementum enim, non sodales arcu erat non tortor.
</p>
</div>
</div>
<!-- -->
<br><br>
<hr>
<br><br>
<!--
************
EXAMPLE 2
************
-->
<style>
.sc-superhero__imgs {
background-image: url('https://via.placeholder.com/480x270');
}
@media screen and (min-width: 768px) {
.sc-superhero__imgs {
background-image: none;
}
.sc-superhero {
background-image: url('https://via.placeholder.com/768x432');
}
}
@media screen and (min-width: 1024px) {
.sc-superhero {
background-image: url('https://via.placeholder.com/1100x430');
}
}
h2.sc-superhero__title--branded {
margin-bottom: 0 ;
font-size: 20px ;
}
</style>
<div class="sc-superhero">
<div class="sc-superhero__imgs"></div>
<div class="sc-superhero__content">
<h2 class="sc-superhero__title--branded sc-font-l sc-margin-top-m">Fahrzeugbewertung</h2>
<h3 class="sc-font-xl sc-font-bold">Bringen Sie Ihr Auto groß raus.</h3>
<p class="s-font-l sc-margin-top-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit, neque eu gravida convallis, libero lorem elementum enim, non sodales arcu erat non tortor.
</p>
<p>
<a href="#superhero" class="sc-btn-bob sc-margin-top-xl">I am Bob!</a>
</p>
</div>
</div>
<!-- -->
<br><br>
<hr>
<br><br>
<!--
************
EXAMPLE 3
************
-->
<style>
.sc-superhero__imgs {
background-image: url('https://via.placeholder.com/480x270');
}
@media screen and (min-width: 768px) {
.sc-superhero__imgs {
background-image: none;
}
.sc-superhero {
background-image: url('https://via.placeholder.com/768x432');
}
}
@media screen and (min-width: 1024px) {
.sc-superhero {
background-image: url('https://via.placeholder.com/1100x430');
}
}
h2.sc-superhero__title--branded {
margin-bottom: 0 ;
font-size: 20px ;
}
</style>
<div class="sc-superhero">
<div class="sc-superhero__imgs"></div>
<div class="sc-superhero__content sc-superhero__content--light">
<h2 class="sc-superhero__title--branded sc-font-l sc-margin-top-m">Fahrzeugbewertung</h2>
<h3 class="sc-font-xl sc-font-bold">Bringen Sie Ihr Auto groß raus.</h3>
<h4 class="sc-font-xl">Mit dem richtigen Preis.</h4>
<ul class="sc-list sc-list--disc sc-margin-top-m">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<!-- -->
<br><br>
<hr>
<br><br>
<!--
************
EXAMPLE 4
************
-->
<style>
.sc-superhero__imgs {
background-image: url('https://via.placeholder.com/480x270');
}
@media screen and (min-width: 768px) {
.sc-superhero__imgs {
background-image: none;
}
.sc-superhero {
background-image: url('https://via.placeholder.com/768x432');
}
}
@media screen and (min-width: 1024px) {
.sc-superhero {
background-image: url('https://via.placeholder.com/1100x430');
}
}
h2.sc-superhero__title--branded {
margin-bottom: 0 ;
font-size: 20px ;
}
</style>
<div class="sc-superhero">
<div class="sc-superhero__imgs"></div>
<div class="sc-superhero__wrapper">
<div class="sc-superhero__content">
<h2 class="sc-superhero__title--branded sc-font-l sc-margin-top-m">Fahrzeugbewertung</h2>
<h3 class="sc-font-xl sc-font-bold">Bringen Sie Ihr Auto groß raus.</h3>
<h4 class="sc-font-xl">Mit dem richtigen Preis.</h4>
<p class="s-font-l sc-margin-top-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit, neque eu gravida convallis, libero lorem elementum enim, non sodales arcu erat non tortor.
</p>
</div>
<div class="sc-superhero__input--wrapper">
<div class="sc-superhero__input--content">
<label class="sc-label">Marke</label>
<select class="sc-input">
<option>Please select</option>
<option>...</option>
</select>
<label class="sc-label">Modell</label>
<select class="sc-input" disabled>
<option>Please select</option>
<option>...</option>
</select>
<label class="sc-label">Erstzulassung</label>
<select class="sc-input" disabled>
<option>Jahr</option>
<option>...</option>
</select>
<label class="sc-label">Kraftstoff</label>
<select class="sc-input" disabled>
<option>Please select</option>
<option>...</option>
</select>
<label class="sc-label">Ort</label>
<input type="text" class="sc-input" placeholder="Stadt/PLZ">
<button class="sc-btn-bob sc-btn-block sc-margin-top-xxl">Absenden</button>
</div>
</div>
</div>
</div>