Radio Input
Default
html
<div class="radio-group">
<div class="radio-row">
<input type="radio" checked name="card" id="radio-card-a1">
<label for="radio-card-a1">
<div class="mb-1 text-bold">Title</div>
<p>Description could be as long as it comes and you can just do whatever with it</p>
</label>
</div>
<div class="radio-row">
<input type="radio" name="card" id="radio-card-a2">
<label for="radio-card-a2">
<div class="mb-1 text-bold">Title</div>
<p>Description could be as long as it comes and you can just do whatever with it</p>
</label>
</div>
</div>Colored
html
<div class="radio-group">
<div class="radio-row colored">
<input type="radio" checked name="card-2" id="radio-card-b1">
<label for="radio-card-b1">
<div class="mb-1 text-bold">Title</div>
<p>Description could be as long as it comes and you can just do whatever with it</p>
</label>
</div>
<div class="radio-row colored">
<input type="radio" name="card-2" id="radio-card-b2">
<label for="radio-card-b2">
<div class="mb-1 text-bold">Title</div>
<p>Description could be as long as it comes and you can just do whatever with it</p>
</label>
</div>
</div>With Icon
The blue borders on the active radio can be set by adding the active class to this <div class="radio-row colored"> element.
html
<div class="radio-group">
<label for="radio-card-c1">
<div class="radio-row colored active">
<input type="radio" checked name="card-3" id="radio-card-c1">
<label for="radio-card-c1">
<div class="mb-1 text-bold">Title</div>
<p>Description could be as long</p>
</label>
<span class="u-icon u-icon-24">card</span>
</div>
</label>
<label>
<div class="radio-row colored">
<input type="radio" name="card-3" id="radio-card-c2">
<label for="radio-card-c2">
<div class="mb-1 text-bold">Title</div>
<p>Description could be</p>
</label>
<span class="u-icon u-icon-24">card</span>
</div>
</label>
</div>