Label Card

A representation of content uploaded as an attachment.

Plan Cards

<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>

Region Cards

<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>Netherlands</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>Netherlands</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>Netherlands</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>Netherlands</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>Netherlands</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/netherlands.svg"
          width="40"
          height="30"
          class="u-margin-inline-auto"
          alt=""
        />
        <p>Singapore</p>
      </div>
    </label>
  </li>
</ul>