Editor Recipes

Container Badge editor recipe

Add a corner badge like Featured or On Sale to specific child blocks using the Container Badge editor recipe in the X-Bar.

What the Container Badge recipe does

Use the Container Badge recipe to place a small badge in the corner of selected child elements inside a Kadence Row Layout or Section.

The recipe uses a ::before pseudo-element to draw a badge (for example FEATURED, ON SALE, NEW) in the top‑right corner of child elements that match a class you choose and mark as position: relative.

The Container Badge and Inline Badge recipes ship with placeholder selectors and text so you can see where to customize:

.replace-me-class target selector
content value like "NEW", "BETA", or "PRO"

How the Container Badge works

The recipe attaches to a specific Kadence Row Layout or Section via the X-Bar editor. Inside that block, it:

Targets child elements matching your chosen class selector (shipped as .replace-me-class).
Assumes those child elements use position: relative so the ::before pseudo-element can anchor to their corners.
Positions the badge in the top‑right corner by default, with uppercase text and a distinct background color so it reads clearly as a flag.

You can create variations of the recipe that pin the badge to a different corner, change the background color, or adjust padding and font styles while keeping the same ::before pattern.

Apply the Container Badge recipe in the block editor

Use these steps when you want to badge specific cards or elements (for example, a featured pricing plan) inside a Kadence Row Layout or Section.

Select the Kadence Row Layout or Section

Open the page or template in the block editor.
Click the Kadence Row Layout or Section block that contains the elements you want to badge.
Confirm the block is selected so the X-Bar shows controls for that specific block.

Open X-Bar and paste the Container Badge recipe

Open the X-Bar editor panel for the selected Kadence Row Layout or Section.
Locate the area where you add CSS recipes scoped to the current block.
Paste the Container Badge ::before recipe into the X-Bar editor while the block is still selected so the CSS attaches to this block only.

Attach the badge to specific child elements

In the block editor, add the target class (shipped as .replace-me-class) to the inner blocks you want to badge (for example, individual card containers).
Ensure those child elements use position: relative so the ::before badge can anchor to their top‑right corner.
Update or preview the page to verify that only the elements with your chosen class show the badge.

Update the placeholder pieces in the recipe before you rely on it in production:

Replace .replace-me-class with a meaningful class name that matches your target child elements (for example, .plan--featured or .card--promo).
Change the content value from the placeholder text ("NEW", "BETA", "PRO") to the label you want visitors to see, such as "FEATURED" or "LIMITED".

What success looks like

After you save and reload the page:

Only child elements with your chosen class display a small badge in the corner.
The badge text appears in uppercase with a distinct background.
Layout and spacing remain intact because the badge anchors to relatively positioned child elements using ::before.

If the badge does not appear, double‑check that the class name in your CSS matches the class on the child block and that the child element is set to position: relative.

Customize badge position and style

The base recipe pins the badge to the top‑right corner of each matching child element. You can adapt the recipe for different visual treatments while keeping the same editor workflow.

Use these related pages to combine the Container Badge with other X-Bar recipes or explore additional options.

All CSS recipes

Explore every available X-Bar recipe, including badges, borders, separators, and more.

Inline Badge (::after)

Add inline badges directly after text elements using the ::after pseudo-element.

Gradient Section Border (::before)

Wrap a Kadence Row Layout or Section with a decorative gradient border via ::before.

Separator Line

Insert a visual separator line between content areas using an editor-scoped recipe.

Was this page helpful?

Last updated today

Built with Documentation.AI