Default
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<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- 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
<span class="comet-pill comet-pill--large">Large Pill</span>
{{ comet.pill("Large Pill", class="comet-pill--large") }}
Macro params referenceReverse
<span class="comet-pill comet-pill--on-dark">Reverse Color Pill</span>
{{ comet.pill("Reverse Color Pill", class="comet-pill--on-dark") }}
Macro params referenceGhost
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.
<span class="comet-pill comet-pill--ghost">Ghost Pill</span>
{{ comet.pill("Ghost Pill", class="comet-pill--ghost") }}
Macro params referenceStatus
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 referenceLevel 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 referenceNew
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 referencePromotional
Highlight a brand identity by displaying it with a --promotional modifier class.
<span class="comet-pill comet-pill--promotional">Powered by Global Lab</span>
{{ comet.pill("Powered by Global Lab", class="comet-pill--promotional") }}
Macro params referenceOverlay
A semi-transparent pill using the --overlay modifier class.
- For the primary use case of displaying a video duration, add the
comet-screenreader-onlycaption "Video duration" before the value for screen reader users. If using macros, accomplish this with the variablescreenreader_only_label="Video duration ".
<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>
</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", screenreader_only_label="Video duration") }}
{% endcall %}
Macro params referenceGuidelines
Interaction
At this time, avoid triggering interaction with a pill. Instead, use a Tag or a Small Button.
Code
- Position pills manually as needed.
- Group a list of pills by applying
comet-pillto<li>items within a<ul class=”comet-pills”>container. - Apply
margin: $space-inline-right-xsin 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 |
|---|---|---|
|
|
|
Displays element styled as a pill. |
|
|
|
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 |
|---|---|---|
|
label |
|
Full pill label. Omit styling or additional tags. |
|
class |
Modifier and custom classes |
Add custom tags to a pill, including modifier classes. |
|
screenreader_only_label |
|
Prepends a screenreader-only descriptive label to the visible label, particularly for video durations. |