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>