Choice Boxes

Choice Boxes can add visual emphasis to radio buttons and checkboxes.
Use along with the grid for positioning.

Choice Boxes As Radio Buttons

Example Title

Example Content
Example Title 2

Example Content 2

<div class="container-full-width">
    <ul class="u-clearfix">
        <li class="ChoiceBox g-1_2__m">
            <input type="radio" class="ChoiceBox__radio hidden" name="example" id="example" value="example">
            <label for="example" class="ChoiceBox__label">
                <div class="ChoiceBox__title">
                    Example Title
                </div>
                <div class="ChoiceBox__content">
                    Example Content
                </div>
            </label>
        </li>
        <li class="ChoiceBox g-1_2__m">
            <input type="radio" class="ChoiceBox__radio hidden" name="example" id="example2" value="example2">
            <label for="example2" class="ChoiceBox__label">
                <div class="ChoiceBox__title">
                    Example Title 2
                </div>
                <div class="ChoiceBox__content">
                    Example Content 2
                </div>
            </label>
        </li>
    </ul>
</div>

Choice Boxes As Checkboxes

Example Title

Example Content
Example Title 2

Example Content 2

<div class="container-full-width">
    <ul class="u-clearfix">
        <li class="ChoiceBox g-1_2__m">
            <input type="checkbox" class="ChoiceBox__radio hidden" name="example" id="example3" value="example">
            <label for="example3" class="ChoiceBox__label">
                <div class="ChoiceBox__title">
                    Example Title
                </div>
                <div class="ChoiceBox__content">
                    Example Content
                </div>
            </label>
        </li>
        <li class="ChoiceBox g-1_2__m">
            <input type="checkbox" class="ChoiceBox__radio hidden" name="example" id="example4" value="example2">
            <label for="example4" class="ChoiceBox__label">
                <div class="ChoiceBox__title">
                    Example Title 2
                </div>
                <div class="ChoiceBox__content">
                    Example Content 2
                </div>
            </label>
        </li>
    </ul>
</div>