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 predefined basic styles, and you can build upon them to create themes that define your brand across all the components used on your website.
XM Cloud Components allows you to work on styles individually or share your style library with coworkers within the same organization. Once your themes are ready, they can be staged and published so they are available in the page builder and on the live website. This ultimately allows you to update the visual style of your entire website with only a few changes.
The Component Builder is a powerful tool that lets you create new components or modify imported components using an intuitive WYSIWYG interface. You can create components from scratch or import existing ones and extend them further. Dynamic data can be mapped to components, and responsive behavior can be configured so components render differently across devices. All components and their versions are organized in collections within the Components library.
With the Component Builder, content authors, UX designers, and marketers can work in parallel, accelerating the process of creating consistent, on-brand digital experiences.
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 intuitive and easy-to-use interface
- Flexible design control for building visual components
- Efficient reuse of styles through themes and styling rules
Design System Approach
A design-system-driven approach helps ensure visual consistency and simplifies component development. This includes:
- Establishing consistent typography styles such as Headline 1 and Paragraph
- Defining color collections aligned with the brand identity
- Setting standardized spacing and layout rules
- Creating reusable UI 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 system.
Key Benefits
- Themes Streamline Consistency: Once configured, themes help maintain a cohesive design across all components.
- Marketer-Friendly Design: Predefined styles allow 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 real-time previews and quick layout adjustments.
Example: Reusable Featured Card Component
In this example, we will design a styled Featured Card component in XM Cloud that can be reused, customized, and applied across multiple pages. This example demonstrates:
- 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 that you can follow independently.