Website

Small, squared, filled.

Content Type

Article Podcast Episode Free Webinar Book

On the page background or over photos. One per card.

Site partial: _components/badge with bg: "bg-white", color: "text-neutral-700"

HTML + Tailwind 
<div class="flex flex-wrap gap-3"><span class="inline-flex px-2 py-1 rounded-md bg-white text-neutral-700 text-2xs font-bold leading-tight tracking-wider uppercase">Article</span>
<span class="inline-flex px-2 py-1 rounded-md bg-white text-neutral-700 text-2xs font-bold leading-tight tracking-wider uppercase">Podcast Episode</span>
<span class="inline-flex px-2 py-1 rounded-md bg-white text-neutral-700 text-2xs font-bold leading-tight tracking-wider uppercase">Free Webinar</span>
<span class="inline-flex px-2 py-1 rounded-md bg-white text-neutral-700 text-2xs font-bold leading-tight tracking-wider uppercase">Book</span></div>

Topic

Prayer Solitude Scripture

Topic tags at the end of a card or article. They link to the topic page.

Site partial: _components/topic_badges

HTML + Tailwind 
<div class="flex flex-wrap gap-2"><a href="#" class="inline-flex px-2 py-1 rounded-md bg-neutral-200 text-neutral-700 hover:text-neutral-900 text-2xs font-bold leading-tight tracking-wider uppercase transition">Prayer</a>
<a href="#" class="inline-flex px-2 py-1 rounded-md bg-neutral-200 text-neutral-700 hover:text-neutral-900 text-2xs font-bold leading-tight tracking-wider uppercase transition">Solitude</a>
<a href="#" class="inline-flex px-2 py-1 rounded-md bg-neutral-200 text-neutral-700 hover:text-neutral-900 text-2xs font-bold leading-tight tracking-wider uppercase transition">Scripture</a></div>

Announcement

Update Registration for the 2027 Book Club is open

A small tag, the line as an underlined link, and an arrow. Used above a hero title and in the top announcement bar (where the tag is Neutral 300 on Green).

Site partial: _components/hero_callout (Badge style) · _modules/header/announcement_bar

HTML + Tailwind 
<a href="#" class="group inline-flex flex-wrap justify-center items-center gap-x-3 gap-y-2 text-sm font-medium text-center text-neutral-800 hover:text-neutral-900">
  <span class="bg-primary-700 text-white inline-block rounded-md px-2 py-1 text-xs font-semibold leading-none">Update</span>
  <span class="underline decoration-neutral-400 underline-offset-4 group-hover:decoration-neutral-800 transition">Registration for the 2027 Book Club is open</span>
  <span class="w-3 h-3 opacity-60 group-hover:opacity-100 group-hover:translate-x-0.5 transition duration-200"><svg class="w-3 h-3 fill-current" viewBox="0 0 18 16" aria-hidden="true"><path fill-rule="evenodd" d="M17.4971 7.98964L10.0085 15.4783L8.59425 14.0641L13.6687 8.98964L0 8.98964L0 6.98964L13.6687 6.98964L8.59425 1.91519L10.0085 0.500976L17.4971 7.98964Z"/></svg></span>
</a>

Rules

  • At most one Content Type badge per card.
  • Badges are filled and squared (rounded-md), never outlined and never pill-shaped. Text is bold small caps: a noun or short phrase, uppercase with wide tracking.
  • Announcement lines are sentence case; the tag is one word (“Update,” “New”).
  • Badges never use accent colors; color doesn’t carry meaning (see Color in Use).