Define style basics

In XM Cloud Components, style design begins with defining the basic primitives. These primitives include fonts, colors, graphics, and custom breakpoints, which you can find under the Basics section.

Add a Google font

Typography is important for brand recognition, and because text content will be included in almost all your components, you have to define the fonts that can be used in all your styles.

To add a Google font to the Style library:

  1. In the Styles builder, in the left pane, click Fonts.

  2. Click Add font library at the top of the page. 

  3. In the Font type field, click Google.

  4. In the Google font family drop-down menu, click the relevant font.

  5. Choose the font styles you want by selecting the check box located under each style option.

Screenshot of a Google font family in the Styles builder

After your font styles are activated, you can use them to create Typographies.

You can learn how to add custom font here.

Add a color

You can define the colors you want to use for your brand and organize them within different collections.

To create a new color collection:

  1. In the Styles builder, in the left pane, click Colors.

  2. Click Add collection at the top of the page.

To add a color to a collection:

  1. In a color collection, click Create.

  2. Give the color a unique class name and confirm which collection it belongs to.

  3. Click the color input that you want, for example, HEX or RGB , and enter the value of the color.

  4. Set the opacity.

  5. Click Save.

You can now use the color collection in style rules, with each color saved in the CSS to use in the Components builder. To copy the CSS variables, hover the mouse over a color in the Styles library and click CSS variables.

Add a breakpoint

With XM Cloud Components, you can create your own breakpoints and organize them in collections. Breakpoint elements are sorted from largest to smallest breakpoint within each collection.

To create a new breakpoint collection:

  1. In the Styles builder, in the left pane, click Breakpoints.

  2. Click Add collection.

  3. Give a name to your collection, for example, Large, Medium, or Small.

  4. Click Save.

You can add as many breakpoints as needed in each collection, as long as breakpoints do not intersect with each other.

To add a breakpoint to a collection:

  1. In the breakpoint collection, click Create.

  2. Give a name to the breakpoint, for example, Extra extra large.

  3. In the drop-down menu, click the collection the breakpoint belongs to.

  4. Enter the pixel values at which the breakpoint starts and ends. Ensure that breakpoints do not intersect with each others, as it will create issues when using responsive versions of a component in a webpage.

  5. Click Save.

Screenshot of a collection of breakpoints in the Styles library

All breakpoints built in the style library are available in the Components builder where you can use them to preview how a component will render on specific device types, or at certain screen widths. For teams building responsive designs that change content or layout depending on the viewer's screen size, it's best practice to create a new component version for each screen size, and to have all necessary breakpoints available in the style library.

Do you have some feedback for us?

If you have suggestions for improving this article,