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.
48 lines (46 loc) • 1.93 kB
Markdown
<h2>Greyscale<span class="status approved">Approved</span></h2>
<div class="ndpl-component__colors ndpl-cf">
<div class="ndpl-component__color-container">
<div class="ndpl-component__color" style="background-color: rgb(0, 0, 0);">
<div>
#000<br>rgb(0, 0, 0)<br>$black-120
</div>
</div>
</div><div class="ndpl-component__color-container">
<div class="ndpl-component__color" style="background-color: rgb(51, 51, 51);">
<div>
#333<br>rgb(51, 51, 51)<br>$black-100
</div>
</div>
</div><div class="ndpl-component__color-container">
<div class="ndpl-component__color" style="background-color: rgb(124, 124, 124);">
<div>
#7c7c7c<br>rgb(124, 124, 124)<br>$black-70
</div>
</div>
</div><div class="ndpl-component__color-container">
<div class="ndpl-component__color" style="background-color: rgb(148, 148, 148);">
<div>
#949494<br>rgb(148, 148, 148)<br>$black-60
</div>
</div>
</div><div class="ndpl-component__color-container">
<div class="ndpl-component__color" style="background-color: rgb(220, 220, 220);">
<div class="ndpl-dark-text">
#dcdcdc<br>rgb(220, 220, 220)<br>$black-30
</div>
</div>
</div><div class="ndpl-component__color-container">
<div class="ndpl-component__color ndpl-apply-border ndpl-c-border" style="background-color: rgb(244, 244, 244);">
<div class="ndpl-dark-text">
#f4f4f4<br>rgb(244, 244, 244)<br>$black-20
</div>
</div>
</div><div class="ndpl-component__color-container">
<div class="ndpl-component__color ndpl-apply-border ndpl-c-border" style="background-color: rgb(255, 255, 255);border: 1px solid #ccc;">
<div class="ndpl-dark-text">
#fff<br>rgb(255, 255, 255)<br>$white
</div>
</div>
</div>
</div>