Exploring XM Cloud Component Builder: Add Styling To Your Component Part 2

 

In my previous blog, I discussed on how we can add basic style and rules in Sitecore XM Cloud Components style library. In the current blog, I'll discuss on how to apply rules to the elements and how to implement theme.

Applying Style Rules to Elements in XM Cloud Components

Once you have added the basic styles (colors, fonts, graphics, and breakpoints) to your Styles library and bundled them into style rules, you must specify which style rules can be applied to specific elements. This ensures that only on-brand and curated style options are available in the Styles library, which will be used in the Components builder. Custom CSS styles can also be added to elements for greater flexibility.

Add a Text Element Style

Text elements come with six default collections: Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, and Paragraph. Each text element is automatically assigned the corresponding HTML tag (e.g., adding a text element from the Heading 1 collection assigns an <h1> tag).

To add a text element style:

1. In the Styles builder, click Text elements in the left pane.
2. Click Add style (+ icon) for the type of text element you want to add.
3. Enter a name for the text element.
4. On the Typography and Color tabs, select the styles you want available for this text element.
5. Optionally, add custom CSS in the Custom CSS tab.
6. Click Save.

Add an Inline Element Style

Inline elements include links, buttons, and badges.

To add a style to an inline element:

1. In the Styles builder, click Inline elements in the left pane.
2. Scroll to the type of inline element you want to style.
3. Click Add style.
4. Enter a name and optionally a description for the style.
5. On the Typography, Spacing, Decoration, Fill, and Text color tabs, select only the styles you want for the inline element.
6. Optionally, add custom CSS in the Custom CSS tab.
7. Click Save.

Add a Block Element Style

Block elements include sections, cards, block quotes, and image blocks. Sections are typically top-level blocks (like full-width panels), while cards are nestable boxes within sections that frame content visually.

To add a style to a section or card:

1. In the Styles builder, click Block elements in the left pane.
2. Scroll to the element type you want to style.
3. Click Add style.
4. Enter a name for your block element.
5. On the Fill, Decoration, and Spacing tabs, select only the styles you want to apply to this block element.
6. Optionally, add custom CSS in the Custom CSS tab.
7. Click Save.

Create Custom Inline and Block Elements

By default, inline elements come with Buttons, Badges, and Links collections, while block elements come with Sections and Cards collections. You can also create custom inline or block elements tailored to your project.

To create a custom block or inline element:

1. In the Styles builder, click Add custom type in the top-right corner.
2. Enter a name for your custom element.
3. Click Save.

Themes in XM Cloud Components

Creating themes is the final step in building an atomic styles library within XM Cloud Components. Themes are composed of a combination of elements and style rules you've already defined. Their purpose is to streamline the styling process by allowing multiple styles to be applied at once—for example, applying a light section, dark card, and light text block with a single click.

How to Add a Theme

To add a theme to your style library:

1. In the Styles builder, click Themes in the left pane.
2. Click Add theme.
3. Enter a name for your theme.
4. Navigate to the Block elements, Inline elements, and Text elements tabs.
   • For each tab, add the appropriate styles for the various elements.
   • For example, in the Block elements tab, click Add section to add a style for sections, and select the desired rules from the drop-down menu.
5. You can assign multiple styles to each element. If you assign more than one style, choose a default style for the element.
6. Click Save to add the theme to the Styles library.

In my upcoming blog, I’ll discuss about the how to apply these style in components.

References: Creating your styles library