> ## Documentation Index
> Fetch the complete documentation index at: https://docs.omni.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Pills

> The code for this example can be used in a Markdown column to display category values as color-coded pills.

This example uses a Markdown column to display a category value as a color-coded pill in a [table](/visualize-present/visualizations/types/table). The field's value is used as a CSS class name, and the CSS defines a background color, text color, and rounded shape for each possible value.

<img src="https://mintcdn.com/omni-e7402367/yeWZzwadMOqVYKJ6/showcase/visualizations/images/pills.png?fit=max&auto=format&n=yeWZzwadMOqVYKJ6&q=85&s=6737e2dc30af8b76f4af6165d62da1fd" alt="A table column showing each user's role as a color-coded pill: a green Builder pill, a purple Viewer pill, a red Admin pill, and a yellow Analyst pill" width="448" height="157" data-path="showcase/visualizations/images/pills.png" />

## Setup

In the table visualization, select the column you want to format and set **Display as** to **Markdown**. Then add the Markdown template and CSS below.

The template sets the field's value as the `class` of a `<div>` so that the matching CSS rule controls its appearance. Add one CSS class for each possible value in your data—in this example, `Builder`, `Viewer`, `Analyst`, and `Admin`. The class names must match the values exactly, so this pattern works best for fields with a small, fixed set of values that don't contain spaces or special characters.

This example references the `role` field from the `saas__users_detailed` view using [Mustache syntax](/visualize-present/mustache-reference). Replace these references with your own field.

## Example code

**Markdown template**:

```handlebars wrap theme={null}
<div class={{saas__users_detailed.role.value}}>{{saas__users_detailed.role.value}}</div>
```

**CSS styles**:

```css expandable theme={null}
.Viewer {
  background-color: #ede9fe;
  color: #6d28d9;
  border-radius: 20px;
  text-align: center;
}
.Builder {
  background-color: #d1fae5;
  color: #059669;
  border-radius: 20px;
  text-align: center;
}
.Analyst {
  background-color: #fef3c7;
  color: #d97706;
  border-radius: 20px;
  text-align: center;
}
.Admin {
  background-color: #ffe4e6;
  color: #e11d48;
  border-radius: 20px;
  text-align: center;
}
```