Atmos
  • Getting Started
  • Build System
    • Gulp
      • Gulp 4
    • Page Structure
    • Sass Modules
  • UI Elements
    • Colors
    • Buttons
    • Icons
    • Cards
    • Alerts
    • Modals
    • Avatar
    • Tables
    • Mail Templates
  • forms
    • Form Layouts
    • Switch
    • Tag Input
    • Radio Box
    • Select2
    • Datepickers
    • Masked Input
    • Rangeslider
    • Dropzone Fileupload
    • Form Wizard
    • Form Validation
  • Charts
    • Charts
    • Apex Charts
    • Chartjs
    • Google Charts
    • Chartist
  • Maps
    • Google Maps
    • Vector Maps
  • Starter Template
    • blank template Markup
Powered by GitBook
On this page
  1. forms

Radio Box

PreviousTag InputNextSelect2

Last updated 6 years ago

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>