Components key concepts and terms

Component - customizable and reusable part of a webpage. Components are used for splitting design into logical chunks, such as navbar, footer, sidebar, content, and to enable mass-editing, for example, to change a link in all instances of a footer. They usually serve a specific business purpose, such as getting someone to sign up for a webinar, helping a user find content or service, and so on.

Canvas - the area of the component where all containers and elements are located. By default, the canvas is made of a single section, but more can be added if needed.

Section - the foundational element of a component, each section has a grid system where containers are drawn. By default, each component is created with a single section, but you can add additional sections to the same components, for example, if you want to use different grid configurations in the same component. Sections can be styled.

Context toolbars - toolbars that open when you click a container or element located in the canvas, and that lets you:

Grid - a system of rectangular shapes that lets you organize quickly and accurately the layout of your component. You simply click and drag onto the grid to create containers of different sizes, as well as move these containers to the appropriate location in the component section. Grids are organized by default in 12 columns and 5 rows, but can be configured differently in each section.

Container - a placeholder for elements. Containers can overlap each other if needed. The placement and size of the various containers on the component canvas define the layout of the component.

Element - the building blocks of web design. With XM Cloud Components, you can add the following elements to a container:

Version - alternative rendering of a component. Versions are used to create responsive components.

Breakpoints - viewport widths in pixels that commonly include certain device types. The XM Cloud Components Styles library includes common breakpoints, for example, Large includes large tablets and desktop screens. You can also add your own custom breakpoints if needed.

Attribute - an element is defined by a series of attributes. For example, an Image element has several attributes such as Image source, Caption, Alt text.

Property - when using dynamic data, you can map an attribute to a property from the data tree. That property is a content item if the data source is external, and it is an XM template if you are using a XM data source.

Object - when setting up a repeater for dynamic data, you can map an attribute to an object, which is the parent folder containing the properties you want to repeat.

Repeater - You can set up a repeater when the data you map to an element contains an array with multiple objects. For example, there can be many different items for sale, each with a list of reviews from different people.

Section - as described previously, sections are different from other elements in that they cannot be added to containers but appear under or above other sections. Use sections to add configurable grids to your component.

Card - element that you can apply themes to and nest within other blocks. Use this element to provide visual framing for content.

Image - image with optional accompanying text content.

Block quote - add this element in another block element to display quotes, tweets, and rich-styled text references. 

Block - a basic box, not included in the Styles library. A container drawn on the grid is automatically assigned the type block, but it can be later changed to any other block element.

HTML blocks - use this element to add HTML to your component.

Spacer - use this element to create a vertical expandable gap between individual elements within a block or card.

Paragraph - regular text element used for all text and copy that isn't a heading.

Heading 1 - main heading of the document, used for the largest headings.

Heading 2 - second level heading.

Heading 3 - third level heading, often used for taglines.

Heading 4 - further level of headings for complex documents.

Heading 5 - the deepest heading level available.  

List items - text elements displayed using bullet points.

Link - use this element to add links inside text elements and specify a relationship between the component and a web link.

Button - use this clickable element to create user interactions.

Badge - non-interactive element for representing status and other miscellaneous information, such as tags and labels, for example.

Date - use to enter a date. This element reuses the styles created for badges.

Variable - unstyled inline elements that display dynamic data through data mapping. The content is text. Each variable has its own fallback. Variable elements let you mix static text and variable text, for example, Price: {price}USD or By {author} in {category}. When you map a text of a paragraph, it creates a variable element automatically.

Component - use this element to nest a component in your component. The embedded component can be another Sitecore component, or an external component, such as a React or a web component.