Add Styling to Components | XM Cloud Component Builder Guide

In XM Cloud Components, style design begins with defining the basic category, which includes fonts, colors, graphics, and breakpoints.

Defining graphics in the Styles Library ensures that all visual assets, such as logos and icons, are used consistently across your website. This helps maintain User Experience, Brand Consistency, and Optimized Graphics.

It is highly recommended to create collections and organize graphics within them for better management.

To create a new graphic collection:

1. Navigate to the Graphics tab in the left Styles menu.
2. Click Add collection at the top right corner of the page.
3. Name your new graphic collection and click Save.

To add a graphic to a collection:

1. In the desired graphic collection, click Create.
2. Assign the graphic a unique name and confirm which collection it belongs to.
3. Paste the image or icon URL.
4. Click Save.

Breakpoints:

You can create custom breakpoints for your website and organize them into collections. Breakpoints are sorted from the largest to the smallest within each collection, helping you manage Responsive Design and User Experience effectively.

To create a new breakpoint collection:

1. In the Styles builder, click Breakpoints in the left pane.
2. Click Add collection.
3. Assign a unique name to your collection.
4. Click Save.

To add a breakpoint to a collection:

1. In the desired breakpoint collection, click Create.
2. Name the breakpoint (e.g., Large for big screens, Medium for tablets, or Small for mobiles).
3. From the drop-down menu, select the collection the breakpoint belongs to.
4. Enter the pixel values for when the breakpoint starts and ends. Ensure that breakpoints do not overlap, as this can cause issues with responsive components on a webpage.
5. Click Save.

Style rules

In Sitecore XM Cloud Components, you can build style rules to extend design primitives and apply them to elements. Rules such as Typographies, Decorations, Fills, and Spacing utilize the basics (fonts and colors) you’ve previously added to the Styles library. You can also incorporate custom CSS styles into these rules.

Typographies:

Typographies are extensions of fonts with defined sizing for each font type.

To create a new typography collection:

1. In the Styles builder, click Typographies in the left pane.
2. Click Add collection.
3. Assign a unique name to your collection.
4. Click Save.

To add a new typography:

1. In the desired typography collection, click Create (+ icon).
2. Enter a name for the typography (e.g., Article headline).
3. On the Font type tab, select a font (only Google fonts are available).
4. On the Settings tab, configure values for font size, line height, letter spacing, paragraph spacing, icon size, and case style. Set these values independently for different breakpoints.
5. Click Save to add the typography to the Styles library.

Decorations:

Decorations allow you to add visual accents like borders and drop shadows to elements and blocks.

To create a new decoration collection:

1. In the Styles builder, click Decorations in the left pane.
2. Click Add collection.
3. Assign a unique name to your collection.
4. Click Save.

To add a new decoration:

1. In the desired decoration collection, click Create (+ icon).
2. Enter a name for the decoration.
3. On the Corner radius tab, define rounded corners for elements and blocks.
4. On the Drop shadow tab, configure shadows for elements and blocks.
5. On the Border tab, add borders or border shadows to elements and blocks.
6. Click Save to add the decoration to the Styles library.

Fills:

Fills allow you to add background colors or gradients to cards, buttons, or sections.

To create a new fill collection:

1. In the Styles builder, click Fills in the left pane.
2. Click Add collection.
3. Assign a unique name to your collection.
4. Click Save.

To add a new fill:

1. In the desired fill collection, click Create (+ icon).
2. Enter a name for the fill and select the collection it belongs to.
3. On the Color tab, choose a previously defined color or create a gradient with options for the gradient angle and color opacity.
4. On the Effects tab, set the blur intensity and opacity for the fill.
5. Click Save to add the fill to the Styles library.

Spacing:

Spacing defines grid arrangements such as padding and gaps for layout components.

To create a new spacing collection:

1. In the Styles builder, click Spacing in the left pane.
2. Click Add collection.
3. Assign a unique name to your collection.
4. Click Save.

To add a new spacing rule:

1. In the desired spacing collection, click Create (+ icon).
2. Enter a name for the spacing.
3. On the Spacing tab, define padding and gap values in pixels, percentages, em, or rem. Choose from the following options:
   • Sync: Makes all padding and gap values the same.
   • Sides (Vertical/Horizontal): Combines top and bottom or horizontal padding values.
   • All custom: Customizes padding and gap values for top, right, bottom, left, vertical, and horizontal spaces.
4. It’s best practice to set values for all three configurations to easily choose the one you need in the Components builder.
5. Optionally, add custom CSS.
6. Click Save to add the spacing rule to the Styles library.