SXA components in Horizon

Abstract

Overview of the settings available for SXA components in the Horizon editor.

If you're using the Sitecore Experience Accelerator (SXA), you can use SXA components in the Horizon editor. When you add an SXA component to your page in Horizon, the right-hand pane displays the extra settings Grid layout, Styling, and Advanced styling. The settings and configurations that you see in the right-hand pane depend on how your developer configured the Horizon experience for SXA.

Note

For some components, the Assign content item dialog appears when you drop the component on the page. In this dialog, you must either assign an existing or create a new content item for the component.

The grid layout settings affect the sizing and positioning of the component inside the chosen placeholder on the page. The settings that appear under this header depend on which grid the site uses. The most common one is Size, where you can choose to do one of the following:

  • Manually configure the number of columns that the component can have as its width.

  • Select Auto fit to content, which makes the component as small as possible, depending on the content inside of it.

  • Select Auto fill rows and columns, which automatically makes the component as wide as possible, depending on how many other components are placed in the same area.

Note

If you manually configure the number of columns for a component, we recommend that you check the layout for every device size that you use. If you do not configure for larger sizes they use the configuration from the closest smaller size that you configured for. For example, an unconfigured desktop uses the configuration from a tablet, if the size is specified on the tablet. If the tablet is unconfigured, the desktop uses the configuration for mobile instead.

The styling settings affect the look and feel of the content in the component itself. For example, this is where you can configure spacing and alignment.

This section contains styling options specific to the component that further affect the rendering of the component itself.