WP Templater
Eyebrow StylesEyebrow Icon 02
Eyebrow Styles

Eyebrow - Icon 02

Add a circular target-style accent to Kadence eyebrow headings using the Eyebrow Icon 02 X-Bar frontend recipe and shared eyebrow setup.

What Eyebrow Icon 02 does

Eyebrow Icon 02 adds a circular, target-style accent to your eyebrow label by layering two circles behind or beside the text.

The recipe uses both the ::before and ::after pseudo-elements on a Kadence Advanced Heading with the custom class wpt-eyebrow:

  • ::before draws a larger outer circle at about 35% opacity using your first palette color.

  • ::after draws a smaller inner circle at full opacity using the same palette color.

  • Both circles are positioned absolutely so they appear as a compact, layered icon that feels anchored to the eyebrow label.

Use this recipe when you want the eyebrow to feel like a focal “target” marker rather than a simple text label.

All eyebrow recipes share the same basic setup:

  • Use a Kadence Advanced Heading block for the eyebrow text.

  • Assign the custom class wpt-eyebrow to that heading.

  • Open X-Bar, find the eyebrow recipe, and copy the CSS from X-Bar into the X-Bar editor on your site.

Eyebrow Icon 02 only styles elements with the wpt-eyebrow class, so make sure you add it to the correct heading.

Apply Eyebrow Icon 2 to a heading

Use these steps when you want to turn a standard eyebrow label into the Icon 02 target-style variant.

Add or select your eyebrow heading

  • In the WordPress editor, add a Kadence Advanced Heading block where you want the eyebrow to appear (typically above a main heading).

  • Enter your eyebrow text, for example New release or Case study.

You should now see a regular Kadence heading with your eyebrow text, but no special styling yet.

Assign the wpt-eyebrow class

  • With the Kadence Advanced Heading selected, open the Advanced settings panel.

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

The eyebrow heading now has the hook the recipe expects, but the icon styling will only appear after you add the CSS from X-Bar.

Copy the Eyebrow Icon 02 CSS from X-Bar

  • Open X-Bar and locate the Eyebrow Icon 02 frontend recipe.

  • Copy the full CSS snippet for this recipe from X-Bar.

  • In your site, open the X-Bar editor area where you keep custom CSS for frontend recipes.

  • Paste the Eyebrow Icon 02 CSS into the editor and save.

After saving, reload the page with your eyebrow heading. You should see a layered circular icon that sits tightly with the eyebrow text, with a softer outer ring and a solid inner circle.

Adjust spacing and alignment if needed

The recipe positions the circles absolutely relative to the eyebrow label, so fine-tuning happens in the heading’s spacing and alignment:

  • Use Kadence controls to adjust left/right padding on the eyebrow heading if the icon feels too close or too far from the text.

  • Tweak line height or top/bottom padding if the icon looks slightly off vertically compared to nearby headings.

  • If your palette’s first color is very light or dark, adjust colors in the recipe CSS inside X-Bar to maintain enough contrast.

Once dialed in, the icon should feel like a crisp target marker that draws the eye to the eyebrow without overpowering the main heading.

How the icon is constructed

Eyebrow Icon 02 relies on pseudo-elements and positioning rather than extra markup:

  • Outer circle (::before****)
    Draws a slightly larger circle with lower opacity (around 35%) using your first palette color. This creates a soft halo effect.

  • Inner circle (::after****)
    Draws a smaller, fully opaque circle in the same color, centered over the outer circle to create a target-style mark.

  • Absolute positioning
    Both pseudo-elements are positioned absolutely in relation to the eyebrow label, so the circles always travel with the text, even as the layout shifts.

Because the recipe only uses ::before and ::after on wpt-eyebrow, you keep your HTML clean while still getting a graphical accent.

When to use Eyebrow Icon 02

Eyebrow Icon 02 works best when you want the eyebrow to feel like a precise point of focus:

  • Highlighting limited offers or new features

  • Marking an anchor item in a series of cards or sections

  • Drawing attention to key content in long-form pages

If you prefer a softer text-only treatment, use one of the pill-style eyebrow recipes instead.

Use these links to explore other eyebrow options and the full CSS recipe library.

All CSS recipes

Explore the full X-Bar CSS-Recipes library, including editor helpers, badges, separators, and more.

Eyebrow Icon 01

A different icon-style eyebrow using pseudo-elements to add a visual marker to your label.

Eyebrow Pill 01

A solid pill-style eyebrow that wraps the label in a rounded background rather than an icon.

Eyebrow Pill 02

A variant pill eyebrow with an adjusted radius and spacing profile for different layouts.

Block header styles

See how eyebrow recipes fit into complete header compositions built with X-Bar and Kadence.

Was this page helpful?

Last updated today

Built with Documentation.AI