Label Card

<ul class="u-flex u-flex-vertical u-gap-24 u-max-width-350">

  <li>

    <label

      class="card is-allow-focus u-cursor-pointer"

      style="--card-padding:1rem; --card-border-radius:var(--border-radius-small);"

    >

      <div class="u-flex u-gap-16">

        <input class="is-small u-margin-block-start-2" type="radio" name="plan" />

        <div class="u-flex u-flex-vertical u-gap-4">

          <h4 class="body-text-2 u-bold">Pro plan</h4>

          <p class="u-color-text-gray">

            For projects you want to scale easily.

            <b>$25/month + Add-ons</b>

          </p>

        </div>

        <span class="icon-lightning-bolt u-margin-inline-start-auto" aria-hidden="true"></span>

      </div>

    </label>

  </li>

  <li>

    <label

      class="card is-allow-focus u-cursor-pointer"

      style="--card-padding:1rem; --card-border-radius:var(--border-radius-small);"

    >

      <div class="u-flex u-gap-16">

        <input class="is-small u-margin-block-start-2" type="radio" name="plan" />

        <div class="u-flex u-flex-vertical u-gap-4">

          <h4 class="body-text-2 u-bold">Free plan</h4>

          <p class="u-color-text-gray">

            For personal, passion projects.

            <b>Totally free</b>

          </p>

        </div>

        <span class="icon-lightning-bolt u-margin-inline-start-auto" aria-hidden="true"></span>

      </div>

    </label>

  </li>

  <li>

    <label

      class="card"

      style="--card-padding:1rem; --card-border-radius:var(--border-radius-small);"

    >

      <div class="u-flex u-gap-16">

        <input class="is-small u-margin-block-start-2" type="radio" name="plan" disabled />

        <div class="u-flex u-flex-vertical u-gap-4 u-opacity-50">

          <h4 class="body-text-2 u-bold">Disabled plan</h4>

          <p class="u-color-text-gray"><b>Unlimited</b></p>

        </div>

        <span

          class="icon-lightning-bolt u-margin-inline-start-auto u-opacity-50"

          aria-hidden="true"

        ></span>

      </div>

    </label>

  </li>

</ul>

<ul class="grid-box" style="--p-grid-item-size:10em; --p-grid-item-size-small-screens:10rem;">

  <li>

    <label

      class="card u-height-100-percent u-flex u-flex-vertical u-gap-16"

      style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-small);"

    >

      <input class="is-small u-margin-block-start-2" type="radio" name="country" disabled />

      <div class="u-flex u-flex-vertical u-gap-12 u-text-center">

        <img

          src="/flags/netherlands.svg"

          width="40"

          height="30"

          class="u-margin-inline-auto u-opacity-20"

          alt=""

        />

        <p class="u-opacity-20">Netherlands</p>

        <button class="tag u-cross-child-center">

          <span class="icon-bell" aria-hidden="true"></span>

          <span class="text">Notify me</span>

        </button>

      </div>

    </label>

  </li>

  <li>

    <label

      class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer"

      style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-small);"

    >

      <input class="is-small u-margin-block-start-2" type="radio" name="country" />

      <div class="u-flex u-flex-vertical u-gap-12 u-text-center">

        <img

          src="/flags/united-kingdom.svg"

          width="40"

          height="30"

          class="u-margin-inline-auto"

          alt=""

        />

        <p>UK</p>

      </div>

    </label>

  </li>

  <li>

    <label

      class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer"

      style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-small);"

    >

      <input class="is-small u-margin-block-start-2" type="radio" name="country" />

      <div class="u-flex u-flex-vertical u-gap-12 u-text-center">

        <img src="/flags/canada.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />

        <p>Canada</p>

      </div>

    </label>

  </li>

  <li>

    <label

      class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer"

      style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-small);"

    >

      <input class="is-small u-margin-block-start-2" type="radio" name="country" />

      <div class="u-flex u-flex-vertical u-gap-12 u-text-center">

        <img src="/flags/usa.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />

        <p>US</p>

      </div>

    </label>

  </li>

  <li>

    <label

      class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer"

      style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-small);"

    >

      <input class="is-small u-margin-block-start-2" type="radio" name="country" />

      <div class="u-flex u-flex-vertical u-gap-12 u-text-center">

        <img src="/flags/germany.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />

        <p>Germany</p>

      </div>

    </label>

  </li>

  <li>

    <label

      class="card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer"

      style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-small);"

    >

      <input class="is-small u-margin-block-start-2" type="radio" name="country" />

      <div class="u-flex u-flex-vertical u-gap-12 u-text-center">

        <img src="/flags/india.svg" width="40" height="30" class="u-margin-inline-auto" alt="" />

        <p>India</p>

      </div>

    </label>

  </li>

</ul>