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

<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

<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>