WP Templater
Eyebrow StylesEyebrow Pill 01
Eyebrow Styles

Eyebrow - Pill 01

Turn your eyebrow label into a soft, filled pill badge that tints from your first accent color while staying readable across backgrounds.

What Eyebrow – Pill 01 does

Eyebrow – Pill 01 turns your eyebrow label into a filled pill-style badge that sits behind the text rather than underlining or framing it.

Use this recipe when you want:

  • A badge-style label that visually separates the eyebrow from the main heading

  • A subtle, on-brand fill color that adapts to your first palette color

  • Good readability on light and medium backgrounds without manually tweaking colors

The recipe keeps typography consistent with other eyebrow styles, so you can swap between them without reconfiguring the Kadence block.

All eyebrow recipes share the same basic setup:

  • Add a Kadence Advanced Heading block for your eyebrow text.

  • In the block settings, add the custom class wpt-eyebrow.

  • Open X-Bar, copy the eyebrow CSS recipe you want, and paste it into the X-Bar editor.

Once this base is in place, you can switch between eyebrow recipes by updating only the CSS in X-Bar.

Apply the Eyebrow – Pill 01 recipe

Add your eyebrow text

  • Insert a Kadence Advanced Heading block where you want the eyebrow label.

  • Enter your eyebrow text, for example: Featured insight or New.

Your page should now show the plain text eyebrow above or beside your main heading.

Add the shared eyebrow class

  • With the Advanced Heading block selected, open the Advanced settings.

  • In the Additional CSS class(es) field, add wpt-eyebrow.

After this step, the block is ready to pick up any eyebrow recipe you load through X-Bar.

Paste the Eyebrow – Pill 01 CSS into X-Bar

  • Open X-Bar from your WordPress admin.

  • In the X-Bar editor, locate the area where you manage Frontend Recipes or custom CSS.

  • Paste the Eyebrow – Pill 01 CSS recipe into the editor.

  • Save or update your changes.

Reload a page that uses the wpt-eyebrow heading. You should now see a rounded, filled pill behind the eyebrow text.

Confirm appearance and adjust spacing

  • Check that the eyebrow appears as a rounded pill with a soft, on-brand background.

  • Verify the text is still easy to read against your page background.

  • If needed, fine-tune surrounding spacing using your block layout controls (margin, padding) without editing the recipe CSS.

When everything looks balanced, your Eyebrow – Pill 01 setup is complete.

How Eyebrow – Pill 01 works

Eyebrow – Pill 01 wraps the eyebrow text in a rounded background, turning it into a pill-shaped badge that sits directly behind the label.

At the color level, the recipe:

  • Uses the CSS color-mix() function to generate a ~15% tint of your first palette color

  • Applies that tint as the eyebrow background so the pill automatically matches your global palette

  • Keeps typography consistent with other eyebrow recipes, so only the background style changes

To stay compatible with older or limited browsers, the CSS includes a fallback: if color-mix() is not supported, the background falls back to transparent, so you still get a clean eyebrow label without a broken or mismatched color.

This combination gives you a badge-style eyebrow that feels intentional and on-brand without manual color picking for every site.

All CSS-Recipes

See the full catalog of X-Bar Frontend and Editor Recipes you can mix and match across your site.

Eyebrow Pill 02

Explore an alternative pill-style eyebrow recipe with a different visual emphasis.

Eyebrow Icon 01 & 02

Add icons to your eyebrow labels with the icon-based eyebrow recipes.

Was this page helpful?

Last updated today

Built with Documentation.AI