showcar-ui/src/01-settings/docs/spacings.md

Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.

<br>
<h2>Spacings<span class="status approved">Approved</span></h2>

There are several variables that should be used for the spacing inside and between elements.  
Use the variables only for the spacing and not for other properties like e.g. font-sizes.  

<table class="docs-table">
    <thead>
    <tr>
        <th>variable</th>
        <th>value</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>$XS</td>
        <td>4px</td>
    </tr>
    <tr>
        <td>$S</td>
        <td>8px</td>
    </tr>
    <tr>
        <td>$M</td>
        <td>12px</td>
    </tr>
    <tr>
        <td>$L</td>
        <td>16px</td>
    </tr>
    <tr>
        <td>$XL</td>
        <td>20px</td>
    </tr>
    <tr>
        <td>$XXL</td>
        <td>28px</td>
    </tr>
    <tr>
        <td>$XXXL</td>
        <td>40px</td>
    </tr>
    <tr>
        <td>$XXXXL</td>
        <td>60px</td>
    </tr>
    </tbody>
</table>