What Are Status Pills?

Status pills are compact visual labels that draw attention to important information without interrupting the surrounding layout. They are useful for identifying item states, categories, versions, featured content, updates, availability, priority levels, or any small piece of information that benefits from quick visual recognition.

[Common Uses]

New or updated content
Featured items
Beta or preview releases
Stable or deprecated versions
Completed, pending, or archived states
Category labels
Priority indicators
Availability badges

Live Template Example - CSS Template Status Pill

[HTML - Status Pill Span Tags]

CFFCS | CarrzSynEdit: | HTML (Hyper Text Markup Language)

<span class="cff-pill cff-pill-red">New</span>
<span class="cff-pill cff-pill-green">Active</span>
<span class="cff-pill cff-pill-blue">Featured</span>
<span class="cff-pill cff-pill-black">Premium</span>
<span class="cff-pill cff-pill-yellow">Warning</span>
<span class="cff-pill cff-pill-orange">Beta</span>
<span class="cff-pill cff-pill-purple">Preview</span>
<span class="cff-pill cff-pill-teal">Updated</span>
<span class="cff-pill cff-pill-gray">Archived</span>

[CSS - Status Pill Span Tags CSS]

CFFCS | CarrzSynEdit: | CSS (Cascading Style Sheets)

.cff-pill-red{background:linear-gradient(#ff5d5d,#cf1c1c);border-color:#a41414}
.cff-pill-green{background:linear-gradient(#54d96a,#23933b);border-color:#1d6f2f}
.cff-pill-blue{background:linear-gradient(#5daeff,#2468d8);border-color:#1d56ae}
.cff-pill-black{background:linear-gradient(#555,#222);border-color:#111}
.cff-pill-yellow{background:linear-gradient(#ffe97a,#f2c100);border-color:#c79a00;color:#333}
.cff-pill-orange{background:linear-gradient(#ffb163,#e96d00);border-color:#b65700}
.cff-pill-purple{background:linear-gradient(#b37cff,#6f38d9);border-color:#5527aa}
.cff-pill-teal{background:linear-gradient(#54d9d2,#0f8f8a);border-color:#0b6d69}
.cff-pill-gray{background:linear-gradient(#d7d7d7,#8d8d8d);border-color:#6f6f6f}