VA Pattern Library

Type: Spacing And Vertical Rhythm 

<!-- SASS: src/stylesheets/_objects/spacing.scss -->

<table>
    <thead>
        <tr>
            <th scope="col">Variable Name</th>
            <th scope="col">Size</th>
            <th scope="col">Example</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$spacing-x-small</td>
            <td>5px</td>
            <td>
                <div class="x-small"></div>
            </td>
        </tr>
        <tr>
            <td>$spacing-small</td>
            <td>10px</td>
            <td>
                <div class="small"></div>
            </td>
        </tr>
        <tr>
            <td>$spacing-medium</td>
            <td>15px</td>
            <td>
                <div class="medium"></div>
            </td>
        </tr>
        <tr>
            <td>$spacing-large</td>
            <td>20px</td>
            <td>
                <div class="large"></div>
            </td>
        </tr>
        <tr>
            <td>$spacing-x-large</td>
            <td>30px</td>
            <td>
                <div class="x-large"></div>
            </td>
        </tr>
        <tr>
            <td>$spacing-xx-large</td>
            <td>40px</td>
            <td>
                <div class="xx-large"></div>
            </td>
        </tr>
    </tbody>
</table>

<style scoped>
    table {
        display: block;
    }

    .x-small,
    .small,
    .medium,
    .large,
    .x-large,
    .xx-large {
        display: block;
        background-color: #0071bc;
    }

    .x-small {
        height: 5px;
        width: 5px;
    }

    .small {
        height: 10px;
        width: 10px;
    }

    .medium {
        height: 15px;
        width: 15px;
    }

    .large {
        height: 20px;
        width: 20px;
    }

    .x-large {
        height: 30px;
        width: 30px;
    }

    .xx-large {
        height: 40px;
        width: 40px;
    }
</style>