CSS Components and Styleguide

Checkboxes

Example

What Compensation Do You Expect for Using Your Powers?

Markup: forms/forms-checkbox.html
                    <div class="
    grid__col--lg-5
    grid__col--md-5
    grid__col--sm-12
    grid__col--xs-12
">
    <p>What Compensation Do You Expect for Using Your Powers?</p>
    <div>
        <div class="grid__row grid__row--padded">
            <div class="grid__col grid__col--xs-12">
                <label class="label label--inline label--light" for="checkbox-money">
                    <input class="checkbox" id="checkbox-money" type="checkbox" />
                    Money Money... MONEY!
                </label>
            </div>
        </div>
        <div class="grid__row grid__row--padded">
            <div class="grid__col grid__col--xs-12">
                <label class="label label--inline label--light" for="checkbox-contribution">
                    <input class="checkbox" id="checkbox-contribution" type="checkbox" />
                    My contribution to society is enough compensation.
                </label>
            </div>
        </div>
        <div class="grid__row grid__row--padded">
            <div class="grid__col grid__col--xs-12">
                <label class="label label--inline label--light" for="checkbox-access">
                    <input class="checkbox" id="checkbox-access" type="checkbox" />
                    Access to secrets and elite members of society wouldn't hurt.
                </label>
            </div>
        </div>
        </div>
        <div class="grid__row grid__row--padded">
            <div class="grid__col grid__col--xs-12">
                <label class="label label--inline label--light">
                    <input class="checkbox" type="checkbox" />
                    I WANA BE FAMOUS!
                </label>
            </div>
        </div>
    </div>
</div>
                  
Source: forms/_forms.scss, line 121