Skip to main content Skip to navigation


Display an object’s relationships and property values in a small pill.


Inline in Paragraph

Shown as a multi-word pill within a paragraph of text.

<p>Shown as a
    <span class="comet-pill">multi-word pill</span>
    within a paragraph of text.
<p>Shown as a {{ comet.pill("multi-word pill") }} within a paragraph of text.</p>
Macro params reference
Inline as collection
This is a set of sometimes multi-word inline pills
<span class="comet-pill">This</span>
<span class="comet-pill">is</span>
<span class="comet-pill">a</span>
<span class="comet-pill">set</span>
<span class="comet-pill">of sometimes multi-word</span>
<span class="comet-pill">inline</span>
<span class="comet-pill">pills</span>
{{ comet.pill("This") }} {{ comet.pill("is") }} {{ comet.pill("a") }} {{ comet.pill("set") }} {{ comet.pill("of sometimes multi-word") }} {{ comet.pill("inline") }} {{ comet.pill("pills") }}
Macro params reference
As unordered list
  • These
  • are
  • unordered
  • default
  • pills.
<ul class="comet-pills">
    <li class="comet-pill">These</li>
    <li class="comet-pill">are</li>
    <li class="comet-pill">unordered</li>
    <li class="comet-pill">default</li>
    <li class="comet-pill">pills.</li>


Large Pill
<span class="comet-pill comet-pill--large">Large Pill</span>
{{ comet.pill("Large Pill", class="comet-pill--large") }}
Macro params reference


Reverse Color Pill
<span class="comet-pill comet-pill--on-dark">Reverse Color Pill</span>
{{ comet.pill("Reverse Color Pill", class="comet-pill--on-dark") }}
Macro params reference


Use a --ghost pill to display a pill’s off state in a visual structure where that state has comparable meaning to the default pill’s on state, such as in the Release Details page.

Ghost Pill
<span class="comet-pill comet-pill--ghost">Ghost Pill</span>
{{ comet.pill("Ghost Pill", class="comet-pill--ghost") }}
Macro params reference


Display a --status pill associated with an object title formatted as a heading.

<span class="comet-pill comet-pill--status">Deprecated</span>
{{ comet.pill("Deprecated", class="comet-pill--status") }}
Macro params reference
Within heading

Level 2 Heading Dev Ready

Level 3 Heading Design Complete

<div class="comet-long-form-text">
    <h2>Level 2 Heading
        <span class="comet-pill comet-pill--status">Dev Ready</span>
<div class="comet-long-form-text">
    <h3>Level 3 Heading
        <span class="comet-pill comet-pill--status">Design Complete</span>
<div class="comet-long-form-text">
    <h2>Level 2 Heading
        {{ comet.pill("Dev Ready", class="comet-pill--status") }}
<div class="comet-long-form-text">
    <h3>Level 3 Heading
        {{ comet.pill("Design Complete", class="comet-pill--status") }}
Macro params reference


Display a --new status pill in close proximity to new or recently published content.

<span class="comet-pill comet-pill--new">New</span>
{{ comet.pill("New", class="comet-pill--new") }}
Macro params reference


Highlight a brand identity by displaying it with a --promotional modifier class.

Powered by Global Lab
<span class="comet-pill comet-pill--promotional">Powered by Global Lab</span>
{{ comet.pill("Powered by Global Lab", class="comet-pill--promotional") }}
Macro params reference


A semi-transparent pill using the --overlay modifier class.

  • For the primary use case of displaying a video duration, add the comet-screenreader-only caption "Video duration" before the value for screen reader users. If using macros, accomplish this with the variable screenreader_only_label="Video duration ".
Video duration 33:12
<div class="comet-row comet-theme--dark-background" style=" background: url(/images/components/row/cosmos.jpeg) #3c3">
    <div class="comet-row__inner">
        <span class="comet-pill comet-pill--overlay"><span class="comet-screenreader-only">Video duration </span>33:12</span>
{% call comet.row(
) %}
    {{ comet.pill("33:12", class="comet-pill--overlay", screenreader_only_label="Video duration") }}
{% endcall %}
Macro params reference



At this time, avoid triggering interaction with a pill. Instead, use a Tag or a Small Button.


  • Position pills manually as needed.
  • Group a list of pills by applying comet-pill to <li> items within a <ul class=”comet-pills”> container.
  • Apply margin: $space-inline-right-xs in cases where the pills are displayed in a right aligned setting.


  • Minimize pill length to two- to three-words.
  • Separate property-value pairs with a colon (“:”) and bold neither the property nor value.

Class Reference

Class Applies to Outcome


<span> or <li>

Displays element styled as a pill.


<ul> containing Pill list items

Contains list items each styled as a pill.



Displays a pill with a larger font size and inset spacing



Displays a pill with more prominence.



Displas pill colored appropriately for a dark background.



Displays a pill with a prominent orange highlight.



Displays a pill without a background color.



Displays a pill with more prominence intended for partner and brand identities.



Displays a pill overlaid via absolutel positioned above a video or thumbnail.

Macro Reference

Parameter Values Description



Full pill label. Omit styling or additional tags.


Modifier and custom classes

Add custom tags to a pill, including modifier classes.



Prepends a screenreader-only descriptive label to the visible label, particularly for video durations.

Navigation Menu