XM Cloud Components is a Front End as a Service application that lets you create your brand’s style guide and build visual components in a WYSIWYG (What You See Is What You Get) editor.
The Styles library is a design system that ensures visual consistency across all components built in XM Cloud Components. The library comes with out-of-the-box predefined basic styles, and you are expected to build upon those to create themes that will define your brand in all the components you build for your website.
XM Cloud Components lets you work on styles on your own or share your library with coworkers from the same organization. Once you are satisfied with your themes, you can stage and publish them, so they are available in the page builder and on the live website. This ultimately allows you to change the style of your entire website in just a few clicks.
The Components builder is a powerful tool that lets you create new components or modify imported components using an intuitive WYSIWYG builder. You can create a component from scratch or import an existing component in the builder to build and style it further. You can map dynamic data to your component or create responsive components that will render differently for different device types. All components and their versions are organized in collections in the Components library.
With the component Builder, content authors, UX designers, and marketers can work in parallel to speed up the process of creating on-brand digital experiences for their customers.
Why Use Component Builder?
The Component Builder offers a low-code environment designed to bridge the gap between marketing and development teams. It focuses on:
The intuitiveness and ease of use of the interface
The level of design flexibility and control available
The effectiveness of reusing styles through themes and styling rules
Design System Approach
A design system-inspired approach is applied to ensure visual consistency and ease of component development. This includes:
Establishing consistent typography styles (e.g., Headline 1, Paragraph)
Defining color collections aligned with the brand identity
Setting standardized spacing and layout rules
Creating reusable elements such as buttons and cards
These measures help maintain a cohesive visual language, making it easier to build new components that align with the overall design.
Key Benefits
Themes Streamline Consistency: Once configured, themes make it easy to maintain a cohesive design across all components.
Marketer-Friendly Design: Predefined styles enable non-technical users to apply consistent branding without relying on developers.
Collections Enhance Efficiency: Organizing styles—such as spacing, typography, and colors—into collections improves workflow and ensures visual uniformity.
Visual Editing Simplifies Iteration: The intuitive drag-and-drop interface allows for real-time previews and quick layout adjustments.
Example: Reusable Featured Card Component
We will design a styled Featured Card component in XM Cloud that can be easily reused, customized, and applied across various pages. This will help us to understand:
Creating basic components
Applying styles such as typography, spacing, colors, and fills
Enabling reusability through collections and themes
Next Steps
We’ll go into further detail in an upcoming post, with a step-by-step walkthrough of building and styling the Featured Card component using the Component Builder in Sitecore XM Cloud. The build-out of this example will demonstrate how to create basic components, apply consistent styling, and enable reusability through collections and themes. This will serve as a hands-on guide you can follow independently.