Headline Pills in Global Styling

The Headline Pill section in Global Styling lets you create reusable style presets for Headline Pill widgets.

Headline pills are compact labels that can be placed above or alongside headings to add context, categorize a section, or draw attention to a short message.

By defining their appearance centrally, you can reuse the same headline pill styles throughout your site without manually rebuilding the design each time.

Each preset can also have separate desktop and mobile settings.

To open the settings, go to:

Web Studio > Global Styling > Headline Pill

Headline Pill presets

Use the Preset dropdown to choose the Headline Pill style you want to edit.

You can create multiple presets for different purposes.

For example:

  • Standard
  • Category label
  • New
  • Featured
  • Eyebrow heading
  • Announcement

Edit an existing preset

Select the preset from the Preset dropdown and adjust its styling.

The preview area shows how the current preset looks as you make changes.

Create a new preset

To create another reusable Headline Pill style:

  1. Enter a name under New Preset Name
  2. Configure the styling
  3. Click Create New Preset
  4. Click Confirm when finished

Use a name that describes how the preset should be used rather than simply describing its color.

Delete a preset

Select the preset you want to remove and click Delete Preset.

Be careful when deleting presets that may already be used by Headline Pill widgets.

💡 Tip

Create presets around recurring use cases. A small set of consistent pill styles is easier to maintain than many slightly different versions.

Desktop and mobile styling

Each preset can have separate styling for desktop and mobile.

Use the device icons above the style controls to switch between the two views.

This lets you adjust settings such as:

  • Font size
  • Padding
  • Border radius

independently for smaller screens.

💡 Tip

Headline pills are usually compact elements. Check the mobile version carefully so the pill does not become disproportionately large compared with the heading below it.

Style

The Style setting controls the basic appearance of the pill.

Available options:

  • Solid Color
  • Border

Solid Color

Displays the pill using a filled background.

This creates a stronger visual label and works well for:

  • Categories
  • Highlights
  • Announcements
  • Section labels

Border

Displays the pill as an outlined element rather than a solid fill.

This creates a lighter visual treatment that can work well when the label should support the heading without competing with it.

Colors

Background / Border

Controls either the background or border color depending on the selected style.

  • With Solid Color, it controls the pill background
  • With Border, it controls the border

Use Global Colors whenever possible to keep the Headline Pill consistent with your wider brand styling.

Text

Controls the color of the text inside the pill.

Make sure there is enough contrast between the text and the selected background or surrounding page.

💡 Tip

If you use a strong background color, keep the text simple and highly readable. Decorative styling should never make the label harder to understand.

Font family

Use Font family to select the typeface used inside the Headline Pill.

For consistency, it is usually best to use a font already included in your site's typography system.

Border Radius

Controls how rounded the pill is.

  • Lower values create a more rectangular label
  • Higher values create a softer, pill-shaped appearance

A larger radius is typically used when you want the classic rounded "pill" look.

Font Size

Controls the size of the Headline Pill text.

Headline pills usually work best when they are smaller than the heading they support.

This helps preserve a clear visual hierarchy:

Headline Pill → Heading → Supporting content

Padding Size

Controls the amount of space around the text inside the pill.

Increase the padding for a larger, more prominent label.

Reduce it for a more compact appearance.

Because desktop and mobile styling are separate, you can use slightly tighter spacing on smaller screens if needed.

Using a preset in a Headline Pill widget

Once you have created a preset, select it from the styling options inside a Headline Pill widget.

This lets you reuse the same style wherever Headline Pill widgets are added.

Instead of manually matching:

  • Colors
  • Font
  • Border radius
  • Font size
  • Padding

you can apply the appropriate preset and keep your styling consistent.

Common use cases

Headline pills work particularly well for:

  • Section labels
  • Category names
  • "New" or "Featured" labels
  • Eyebrow headings
  • Product or feature categories
  • Short announcements
  • Context above a main heading
  • Highlighting a specific type of content

For example:

NEW

FOR COACHES

MOST POPULAR

GET STARTED

MEMBERSHIP

Best practices

  • Keep the text short
  • Use Headline Pills to support headings, not replace them
  • Create reusable presets rather than styling each pill manually
  • Use Global Colors where possible
  • Maintain strong color contrast
  • Keep font sizes smaller than the associated heading
  • Use consistent border radii throughout your site
  • Check desktop and mobile versions separately
  • Avoid creating too many visually competing pill styles

💡 Tip

Headline Pills work best as a small piece of context before the main message. If the text needs several words or a full sentence to make sense, it may be better presented as normal text instead.

Summary

  • Headline Pill in Global Styling lets you create reusable pill presets
  • Create, edit, or delete presets centrally
  • Each preset can have separate desktop and mobile settings
  • Choose between Solid Color and Border
  • Control background/border color and text color
  • Select the font family
  • Adjust border radius, font size, and padding
  • Apply presets inside Headline Pill widgets throughout your site
  • Keep pills short and visually secondary to the heading they support

Used consistently, Headline Pill presets provide an easy way to add contextual labels and visual hierarchy while keeping the styling cohesive across your site.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.