Basic Example
A simple muted option component, which provides an alternate choice style for options.
<div class="c-options | t-options--muted">
<ul class="c-options__wrapper">
<li class="c-options__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input type="radio" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
</div>
</label>
</li>
<li class="c-options__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input type="radio" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
</div>
</label>
</li>
<li class="c-options__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input type="radio" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
</div>
</label>
</li>
<li class="c-options__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input type="radio" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
</div>
</label>
</li>
</ul>
</div>Heading Example
An active header state, with 2 options.
<div class="c-options | t-options--muted">
<ul class="c-options__wrapper">
<li class="c-options__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body" for="header_option_1">
<input type="radio" name="example_2" id="header_option_1" checked>
<div class="c-options__item-content">
<span class="u-heading u-epsilon u-tc-primary u-mb-xs">Heading Option 1</span>
<span class="u-tc-info u-fs-sm">Sub Content 1</span>
</div>
</label>
</li>
<li class="c-options__item | u-w-100% u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body" for="header_option_2">
<input type="radio" name="example_2" id="header_option_2">
<div class="c-options__item-content">
<span class="u-heading u-epsilon u-tc-primary u-mb-xs">Heading Option 2</span>
<span class="u-tc-info u-fs-sm">Sub Content 2</span>
</div>
</label>
</li>
</ul>
</div>