Atmos
Search
K

Radio Box

adio box can be used for making clear and distinctive labels with more information. radio box does not require additional css and JavaScript apart from atmos defaults.
<div class="option-box">
<input id="radio-new1" name="bigradios" type="radio">
<label for="radio-new1">
<span class="radio-content">
<span class="h6 d-block">Starter Plan
<span class="badge-soft-primary badge">$12 MONTH</span>
</span>
<span class="text-muted d-block m-b-10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis ducimus ipsa provident quae quaerat similique? Consequatur consequuntur cum, inventore nihil porro quis. Ad assumenda eligendi illum impedit quis totam.
</span>
</span>
</label>
</div>

Radio box Columns

Radio box Column is similar to radio-box with a slight variation
<div class="option-box-column">
<input id="radio-column-1" name="column-radio" type="radio">
<label for="radio-column-1">
<span class="radio-content">
<span class="p-all-15 d-block">
<span class="h3 d-block">$15</span>
<span class="list-group">
<span class="list-group-item">Cras justoodio</span>
<span class="list-group-item">Dapibus ac facilisis in</span>
<span class="list-group-item">Morbi leo risus</span>
<span class="list-group-item">Vestibulum ateros</span>
</span>
</span>
<span class="radio-highlight">Basic Plan</span>
</span>
</label>
</div>