# Pill / Badge

TIP

A pill (or badge) can be used for displaying filters or highlighting links on top of images.

.c-pill

# Default Pill

hide code

<div class="h-highlight-block h-flex h-space-around">
    <a href="#" title="Title" class="c-pill">I'm a Pill</a>
    <a href="#" title="Title" class="c-pill">I'm a Pill</a>
    <a href="#" title="Title" class="c-pill">I'm a Pill</a>
</div>

# Modifiers

.c-pill.-small

I'm a small Pill 42 0

hide code

<div class="h-highlight-block h-flex h-space-around">
    <a href="#" title="Filter anzeigen" class="c-pill -small">I'm a small Pill</a>
    <a href="#" title="Filter anzeigen" class="c-pill -primary -small">42</a>
    <a href="#" title="Filter anzeigen" class="c-pill -primary -small">0</a>
</div>

.c-pill.-primary

I'm a primary small Pill 42 I'm a primary Pill

hide code

<div class="h-highlight-block h-flex h-space-around">
    <a href="#" title="Filter anzeigen" class="c-pill -primary -small">I'm a primary small Pill</a>
    <a href="#" title="Filter anzeigen" class="c-pill -primary -small">42</a>
    <a href="#" title="Filter anzeigen" class="c-pill -primary ">I'm a primary Pill</a>
</div>

.c-pill.-step

1. 2.

hide code

<span class="c-pill -step">1.</span>
<span class="c-pill -step">2.</span>

← Logos Radio Button →