Eyebrow – Pill 02
Create a bordered, glowing pill eyebrow label that uses your first palette color, with a graceful fallback to a simple border-only pill.
What Eyebrow – Pill 02 does
Eyebrow – Pill 02 turns your eyebrow text into a bordered pill with a soft inner glow that feels lit from the edges. It frames short labels so they stand out above hero headings or feature blocks without overpowering the main content.
The pill draws a 1px solid border using your first palette color, then adds a radial gradient that starts with the same color at the pill edges and fades to transparent toward the center. When the gradient effect is not supported, it falls back to a clean border-only pill so the label still looks intentional.
All eyebrow styles share the same basic setup:
- Use a Kadence Advanced Heading block for the eyebrow text
- Add the eyebrow class
wpt-eyebrowin the block's Advanced CSS class field - Then apply the specific X-Bar recipe for the eyebrow variant you want
Use this recipe when you want an eyebrow label that feels more dimensional than a flat pill, especially on dark hero backgrounds or above premium feature sections where a subtle glow helps the label catch the eye.
Apply the Eyebrow – Pill 02 recipe
Use these steps to wire up the Eyebrow – Pill 02 look from X-Bar onto your Kadence Advanced Heading eyebrow.
Set up your eyebrow heading
- Add a Kadence Advanced Heading block where you want the eyebrow label, typically above a hero title or feature heading.
- Enter your eyebrow text (for example, "New", "Featured", or "Case Study").
- In the block settings, open the Advanced panel and add
wpt-eyebrowto the CSS class field.
Copy the Eyebrow – Pill 02 recipe from X-Bar
- Open X-Bar and locate the Frontend Recipe for Eyebrow – Pill 02.
- Use the copy action in X-Bar to copy the full recipe code to your clipboard.
Paste the recipe into the X-Bar editor
- Go to the X-Bar editor in your site.
- Paste the copied Eyebrow – Pill 02 recipe into the appropriate editor area where you keep your frontend recipes.
- Save or update X-Bar so the styling applies sitewide.
Confirm the pill glow appearance
- Refresh your page with the Kadence Advanced Heading eyebrow.
- Verify that the eyebrow text now appears inside a pill with a 1px border in your first palette color and a soft inner glow that fades toward the center.
- Check the same eyebrow in a browser or device with more limited effects; it should still appear as a clean border-only pill.
When everything is connected correctly, your eyebrow labels will automatically pick up this pill-glow treatment wherever you use the wpt-eyebrow class.
How Eyebrow – Pill 02 works
Eyebrow – Pill 02 is built to feel rich while staying tied to your color system. The border uses your first palette color so the pill always matches your primary brand tone.
On capable browsers, the recipe adds a radial gradient that concentrates that same palette color at the pill edges and then fades to transparent as it moves toward the center. This creates the soft inner glow effect that makes the pill feel like it is gently lit around the border.
When a browser cannot render that gradient as intended, the recipe falls back to showing only the 1px border. The eyebrow still reads as a pill-shaped label, just without the glow, so the design remains consistent and readable across environments.
Related recipes and resources
Use these related pages to explore other eyebrow looks and the rest of the X-Bar CSS recipes.
CSS-Recipes overview
See all available X-Bar recipes and learn how they fit together in your design system.
Eyebrow – Pill 01
A simpler pill eyebrow variant that focuses on a clean border treatment without the inner glow effect.
Eyebrow – Icon 01
Add an icon-based eyebrow style that pairs well with pill labels in feature sections.
Last updated 2 days ago
Built with Documentation.AI