CheckboxCard

<label class="bf-checkboxcard">
  <input type="checkbox" />
  <div class="bf-checkboxcard-content">
    <span class="bf-checkboxcard-label-text">
      <span class="bf-checkbox-icon">
        <i class="bf-checkbox-checked fa-solid fa-square-check"></i>
        <i class="bf-checkbox-unchecked fa-regular fa-square"></i>
      </span>
      Label text
    </span>
    Descriptive description describing the option.
  </div>
</label>

<label class="bf-checkboxcard bf-switch-wrapper">
  <input type="checkbox" />
  <div class="bf-checkboxcard-content">
    <span class="bf-checkboxcard-label-text">
      <span class="bf-switch">
        <span class="bf-switch-thumb">
          <i class="bf-checkbox-checked fa-solid fa-check"></i>
        </span>
      </span>
      Label text
    </span>
    Descriptive description describing the option.
  </div>
</label>

<label class="bf-checkboxcard">
  <input type="radio" name="radioCardDemo" checked />
  <div class="bf-checkboxcard-content">
    <span class="bf-checkboxcard-label-text">
      <span class="bf-checkbox-icon">
        <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
        <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
      </span>
      Dr. Emmet Brown
    </span>
    In the original timeline, in contrast with Marty's shy and unassertive
    father, George McFly, Doc is a supportive and open-minded mentor for Marty.
  </div>
</label>
<label class="bf-checkboxcard">
  <input type="radio" name="radioCardDemo" />
  <div class="bf-checkboxcard-content">
    <span class="bf-checkboxcard-label-text">
      <span class="bf-checkbox-icon">
        <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
        <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
      </span>
      Rick Sanchez
    </span>
    Known for his reckless, nihilistic behavior, pragmatic moral ambiguity and
    pessimistic personality, the character has been well received.
  </div>
</label>

<label class="bf-checkboxcard bf-checkbox-alert">
  <input type="checkbox" />
  <div class="bf-checkboxcard-content">
    <span class="bf-checkboxcard-label-text">
      <span class="bf-checkbox-icon">
        <i class="bf-checkbox-checked fa-solid fa-square-check"></i>
        <i class="bf-checkbox-unchecked fa-regular fa-square"></i>
      </span>
      Alert checkbox card
    </span>
    Use for alert state styling of the checkbox card.
  </div>
</label>
<label class="bf-checkboxcard bf-checkbox-alert">
  <input type="radio" name="radioCardDemo" checked />
  <div class="bf-checkboxcard-content">
    <span class="bf-checkboxcard-label-text">
      <span class="bf-checkbox-icon">
        <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
        <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
      </span>
      Alert radio card
    </span>
    Use for alert state styling of the radio card.
  </div>
</label>
<label class="bf-checkboxcard bf-switch-wrapper bf-checkbox-alert">
  <input type="checkbox" />
  <div class="bf-checkboxcard-content">
    <span class="bf-checkboxcard-label-text">
      <span class="bf-switch">
        <span class="bf-switch-thumb">
          <i class="bf-checkbox-checked fa-solid fa-check"></i>
        </span>
      </span>
      Alert switch card
    </span>
    Use for alert state styling of the switch card.
  </div>
</label>

<label class="bf-checkboxcard">
  <input type="checkbox" checked />
  <header class="bf-checkboxcard-header">
    <div style="height: 200px; overflow: hidden">
      <img
        src="/seal.jpg"
        style="width: 100%; display: block"
        alt="Grumpy-looking seal"
      />
    </div>
  </header>
  <div class="bf-checkboxcard-content">
    <span class="bf-checkboxcard-label-text">
      <span class="bf-checkbox-icon">
        <i class="bf-checkbox-checked fa-solid fa-square-check"></i>
        <i class="bf-checkbox-unchecked fa-regular fa-square"></i>
      </span>
      Seal is grumpy
    </span>
    Plsease mark this as checked if you feel like the seal is gumpy-looking.
  </div>
</label>