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>