CSS Recipes in X-Bar
Use X-Bar CSS Recipes to apply reusable Kadence-ready styles, from eyebrow headings to pseudo-element utilities, in both the frontend X-Bar and block editor.
What CSS Recipes are
CSS Recipes are curated, ready-made CSS snippets built for Kadence that you copy from X-Bar and apply to your blocks. Each recipe matches a common pattern such as styled eyebrows, badges, separators, or gradient borders so you do not have to hand-write the CSS.
Every recipe works the same way:
- X-Bar copies the full CSS snippet to your clipboard when you click a recipe.
- You choose where that CSS lives by pasting it into either the frontend X-Bar editor or the X-Bar editor that scopes to a specific Kadence block.
- You can then tweak colors, spacing, or classes directly in the pasted CSS if you want to customize the look.
CSS Recipes never modify your theme or plugin files directly. You stay in control of where each snippet lives by choosing where you paste the CSS.
Frontend vs. Block Editor recipes
CSS Recipes come in two main types, depending on where you apply them and what they target.
Frontend Recipes
Frontend Recipes apply to what you see on the live page when you open X-Bar on the frontend.
Use Frontend Recipes when you want to:
- Style content that already exists on the page, such as eyebrows above headings or block header styles.
- Target elements by selectors and custom classes that you add in the block settings (for example, a shared eyebrow class used across multiple headings).
- Make changes that affect all matching elements on that page or across templates where the same structure and classes exist.
Typical use cases:
- Eyebrow styles for section labels or category tags.
- Block header styles that visually separate sections or groups of content.
Explore the available Frontend Recipes:
Block Editor Recipes
Block Editor Recipes attach directly to specific Kadence Row Layout and Section blocks via the X-Bar editor inside the block editor.
Use Block Editor Recipes when you want to:
- Scope styles tightly to a single row, section, or set of columns.
- Add structural decorations such as separator lines, badges, or gradient borders that belong to one layout block, not the whole page.
- Reuse utilities by copying the same recipe into multiple blocks, each scoped via Kadence’s selector keyword.
Typical use cases:
- Separator lines under a specific section.
- Corner badges on selected cards or pricing tiers.
- Gradient borders around columns in a feature grid.
Explore the available Block Editor Recipes:
How to use CSS Recipes
Use the Recipes panel to browse, preview, and copy CSS in a few clicks, then paste it where it should apply.
Open the Recipes panel
- Click the stars button (✨) in the footer of X-Bar.
- X-Bar opens the Recipes panel on the side, grouped by recipe type (for example, Eyebrow Styles, Pseudo-Element Utilities).
Choose a recipe
- Expand a recipe group by clicking its title.
- Scan the recipe names and short descriptions to find the pattern you want (such as an eyebrow pill or a separator line).
Copy the CSS to your clipboard
- Click a recipe name once.
- X-Bar copies the full CSS snippet to your clipboard; you do not see or edit the code inside the panel.
Paste into the right editor
- For Frontend Recipes, paste into the X-Bar editor on the frontend so the CSS targets what you are currently viewing.
- For Block Editor Recipes, select the Kadence Row Layout or Section block you want to style, then paste into the X-Bar editor for that selected block in the editor.
- Adjust classes or content in the CSS as indicated in the individual recipe page if you need to target specific elements.
Last updated 2 days ago
Built with Documentation.AI