Pills

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

Default

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>
                
<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>
</ul>
                

Large

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

Reverse

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

Ghost

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

Status

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

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

New

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

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

Promotional

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

Overlay

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

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">33:12</span>
    </div>
</div>
                
{% call comet.row(
    background_color="#3c3",
    background_image="/images/components/row/cosmos.jpeg",
    class="comet-theme--dark-background"
) %}
    {{ comet.pill("33:12", class="comet-pill--overlay") }}
{% endcall %}
                
Macro params reference

Guidelines

Interaction

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

Code

  • 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.

Editorial

  • 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

.comet-pill

<span> or <li>

Displays element styled as a pill.

.comet-pills

<ul> containing Pill list items

Containslist items each styled as a pill.

.comet-pill--large

.comet-pill

Displays a pill with a larger font size and inset spacing

.comet-pill--status

.comet-pill

Displays a pill with more prominence.

.comet-pill--on-dark

.comet-pill

Displas pill colored appropriately for a dark background.

.comet-pill--new

.comet-pill

Displays a pill with a prominent orange highlight.

.comet-pill--ghost

.comet-pill

Displays a pill without a background color.

.comet-pill--promotional

.comet-pill

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

.comet-pill--overlay

.comet-pill

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

Macro Reference

Parameter Values Description

label

Value

Full pill label. Omit styling or additional tags.

class

Modifier and custom classes

Add custom tags to a pill, including modifier classes.