# Badges

> Content Type and Topic badges and the Announcement pattern on renovare.org, with live examples and when to use each.

*Small, squared, filled.*

## Content Type

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

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

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

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

Site partial: `_components/topic_badges`

Shown on: white background.

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

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
<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](https://styleguide.renovare.org/color-in-use/)).