SXA components in Horizon
In 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.
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.
Grid layout
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.
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.
Styling
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.
Advanced styling
This section contains styling options specific to the component that further affect the rendering of the component itself.