PDJ Brandbox

radio-form 

<div class="radio-item">
    <input class="custom-radio custom-radio--warranty" name="care" id="care-no" type="radio" value="care-no" checked>
    <label for="care-no">Without extended warranty</label>
</div>

<div class="radio-item">
    <input class="custom-radio custom-radio--warranty" name="care" id="care-plus" type="radio" value="care-plus" data-title="AlphaTheta Care Plus">
    <label for="care-plus">AlphaTheta Care Plus (+ €20)</label>
</div>

<div class="radio-item">
    <input class="custom-radio custom-radio--warranty" name="care" id="care-pro" type="radio" value="care-pro" data-title="AlphaTheta Care Pro">
    <label for="care-pro">AlphaTheta Care Pro (+ €25)</label>
</div>
 
{{!-- Radio options for Alpha Theta Care --}}
<div class="radio-item">
  <input class="custom-radio custom-radio--warranty" name="care" id="care-no" type="radio" value="care-no" checked>
  <label for="care-no">Without extended warranty</label>
</div>

<div class="radio-item">
  <input class="custom-radio custom-radio--warranty" name="care" id="care-plus" type="radio" value="care-plus" data-title="AlphaTheta Care Plus">
  <label for="care-plus">AlphaTheta Care Plus (+ €20)</label>
</div>

<div class="radio-item">
  <input class="custom-radio custom-radio--warranty" name="care" id="care-pro" type="radio" value="care-pro" data-title="AlphaTheta Care Pro">
  <label for="care-pro">AlphaTheta Care Pro (+ €25)</label>
</div>
 
/* No context defined. */
  • Content: 
    // Radio buttons and labels
.radio-item {
  display: flex;

  input,
  label {
    cursor: pointer;
  }

  label {
    font-weight: 600;
    line-height: var(--gap--8);
  }

  input[type="radio"] {
    width: 25px;
    height: 25px;
    margin-right: var(--gap--2);
    border-radius: 50% !important;
  }
}
  • URL: /components/raw/radio-form/_radio-form.scss
  • Filesystem Path: ../src/02_atoms/radio-form/_radio-form.scss
  • Size: 307 Bytes

No notes defined.