Block Header Styles
Apply X-Bar Frontend Recipe group Block Header Styles from the CSS Recipes panel into your X-Bar editor layouts.
Block Header Styles overview
Block Header Styles is a Frontend Recipe group in X-Bar CSS Recipes for styling the headers of your content blocks across a layout.
Use these recipes when you want consistent visual treatment for block titles while still managing all styling from inside X-Bar.
Block Header Styles will host specific header variants once they are finalized. For now, use this page as a reference for how to apply any Block Header Styles recipe from the X-Bar CSS Recipes panel.
How to apply a Block Header Styles recipe
Use this flow whenever you want to add or swap a Block Header Styles recipe in an X-Bar layout.
Open X-Bar and locate CSS Recipes
Open your site in the editor and launch X-Bar.
In the X-Bar interface, open the CSS Recipes panel and navigate to the Frontend Recipes section.
Select a Block Header Styles recipe
In Frontend Recipes, locate the Block Header Styles group.
Choose the header recipe you want to use for your current block layout.
Copy the recipe code
Use the copy control for the selected Block Header Styles recipe in the CSS Recipes panel.
This copies the prepared code snippet to your clipboard.
Paste into the X-Bar editor
Switch back to the X-Bar editor area where you manage custom code or styles.
Paste the copied Block Header Styles recipe into the appropriate code slot or stylesheet region.
Save and verify the header styling
Save or apply your X-Bar changes.
View the page on the front end to confirm that your block headers now use the applied Block Header Styles recipe.
Related frontend recipes
Use these related resources to explore more X-Bar CSS Recipes and additional header-adjacent patterns.
Last updated 2 days ago
Built with Documentation.AI