Radio

    2.   <ul>
    3.     <!-- Single radio item -->
    4.     <li>
    5.       <label class="item-radio item-content">
    6.         <!-- Radio input -->
    7.         <input type="radio" name="my-radio" value="radio-1"/>
    8.         <!-- Radio icon -->
    9.         <i class="icon icon-radio"></i>
    10.         <div class="item-inner">
    11.           <!-- Radio Title -->
    12.           <div class="item-title">Books</div>
    13.         </div>
    14.       </label>
    15.     </li>
    16.     <!-- Another radio item -->
    17.     <li>
    18.       <label class="item-radio item-content">
    19.         <!-- Checked by default -->
    20.         <input type="radio" name="my-radio" value="radio-2" checked/>
    21.         <i class="icon icon-radio"></i>
    22.         <div class="item-inner">
    23.           <div class="item-title">Music</div>
    24.         </div>
    25.       </label>
    26.     </li>
    27.   </ul>
    28. </div>
    • item-content must be a **<label>** element with additional **item-radio** class
    • Radio input () must be a first child of item-content
    • Radio icon must be after radio input

    Inline

    1. <div class="block block-strong">
    2.   <p>Lorem <label class="radio"><input type="radio" name="demo-radio-inline"><i class="icon-radio"></i></label> ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi <label class="radio"><input type="radio" name="demo-radio-inline"><i class="icon-radio"></i></label> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla mollitia!</p>
    3. </div>

    Radio Group

    With Media Lists

    1. <div class="list media-list">
    2.   <ul>
    3.     <li>
    4.       <label class="item-radio item-content">
    5.         <input type="radio" name="demo-media-radio" value="1" checked />
    6.         <i class="icon icon-radio" checked></i>
    7.         <div class="item-inner">
    8.           <div class="item-title-row">
    9.             <div class="item-title">Facebook</div>
    10.             <div class="item-after">17:14</div>
    11.           </div>
    12.           <div class="item-subtitle">New messages from John Doe</div>
    13.           <div class="item-text">Lorem ipsum ...</div>
    14.         </div>
    15.       </label>
    16.     </li>
    17.     <li>
    18.       <label class="item-radio item-content">
    19.         <input type="radio" name="demo-media-radio" value="2"/>
    20.         <i class="icon icon-radio"></i>
    21.         <div class="item-inner">
    22.           <div class="item-title-row">
    23.             <div class="item-title">John Doe (via Twitter)</div>
    24.             <div class="item-after">17:11</div>
    25.           </div>
    26.           <div class="item-text">Lorem ipsum ...</div>
    28.       </label>
    29.     </li>
    30.     <li>
    31.       <label class="item-radio item-content">
    32.         <input type="radio" name="demo-media-radio" value="3"/>
    33.         <i class="icon icon-radio"></i>
    34.         <div class="item-inner">
    35.           <div class="item-title-row">
    36.             <div class="item-title">Facebook</div>
    37.             <div class="item-after">16:48</div>
    38.           </div>
    39.           <div class="item-subtitle">New messages from John Doe</div>
    40.           <div class="item-text">Lorem ipsum ...</div>
    41.         </div>
    42.       </label>
    43.     </li>
    44.     <li>
    45.       <label class="item-radio item-content">
    46.         <input type="radio" name="demo-media-radio" value="4"/>
    47.         <i class="icon icon-radio"></i>
    48.         <div class="item-inner">
    49.           <div class="item-title-row">
    50.             <div class="item-title">John Doe (via Twitter)</div>
    51.             <div class="item-after">15:32</div>
    52.           </div>
    53.           <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
    54.           <div class="item-text">Lorem ipsum ...</div>
    55.         </div>
    56.       </label>
    57.     </li>
    58.   </ul>