Available CSS classes

Version: 10.1

The following table shows the available CSS classes that SXA uses in the Horizon editor experience. You can refer to this list when you configure how a component looks and feels for your editors.

Category	Style name	CSS Class	Display type	Allowed on components
Spacing	Indent top	`indent-top`	icon-button-group-check
Spacing	Indent bottom	`indent-bottom`	icon-button-group-check
Spacing	Indent side	`indent`	icon-button-group-check
Add highlight	Highlighted left	`highlighted-left`	icon-button-group-radio	Rich Text, Page Content, Rich Text (Reusable), Playlist, Promo, Container, Splitter (Rows)
Add highlight	Highlighted right	`highlighted-right`	icon-button-group-radio	Rich Text, Page Content, Rich Text (Reusable), Playlist, Promo, Container, Splitter (Rows)
Add highlight	Highlighted top	`highlighted-top`	icon-button-group-radio	Rich Text, Page Content, Rich Text (Reusable), Playlist, Promo, Container, Splitter (Rows)
Add highlight	Highlighted bottom	`highlighted-bottom`	icon-button-group-radio	Rich Text, Page Content, Rich Text (Reusable), Playlist, Promo, Container, Splitter (Rows)
Content alignment	Align content left	`position-left`	icon-button-group-radio
Content alignment	Align content center	`position-center`	icon-button-group-radio
Content alignment	Align content right	`position-right`	icon-button-group-radio
Background color	Clean backround	`container-clean-background`	droplist	Container, Splitter (Rows), Splitter (Columns)
Background color	Color background	`container-color-background`	droplist	Container, Splitter (Rows), Splitter (Columns)
Background color	Dark background	`container-dark-background`	droplist	Container, Splitter (Rows), Splitter (Columns)
Background color	Gray background	`container-gray-background`	droplist	Container, Splitter (Rows), Splitter (Columns)
Background layout	Cover background	`cover-background`	droplist	Container
Background layout	Fix background	`fix-background`	droplist	Container
Background layout	Parallax background	`parallax-background`	droplist	Container
Flip transition	Transition - fade	`flip-fade`	droplist	Flip
Flip transition	Transition - slide	`flip-slide-top`	droplist	Flip
Flip transition	Rotate vertically	`flip-vertical`	droplist	Flip
Navigation	Main navigation - vertical drop down	`navigation main navigation-main-vertical`	droplist	Navigation
Navigation	Main navigation - horizontal drop down	`navigation main navigation-main-horizontal`	droplist	Navigation
Navigation	Mobile navigation	`navigation-mobile`	droplist	Navigation
Navigation	Sidebar navigation	`navigation-sidebar`	droplist	Navigation
Navigation	Sitemap navigation	sitemap-navigation	droplist	Navigation
Navigation	Big/fat navigation	`navigation-fat`	droplist	Navigation
Tabs	Tabs on left	`tabs-vertical`	icon-button-group-radio	Tabs
Tabs	Tabs on right	`tabs-vertical tabs-vertical-right`	icon-button-group-radio	Tabs
Tabs	Tabs on bottom	`tabs-bottom`	icon-button-group-radio	Tabs
Accordion	Horizontal accordion	`accordion-horizontal`	checkbox-folder	Accordion
Playlist	Horizontal playlist	`playlist-horizontal`	checkbox-folder	Playlist
Breadcrumb	Triangle separator	`triangle-separator`	checkbox-folder	Breadcrumb
Breadcrumb	Hide intermediate items	`breadcrumb-hide`	checkbox-folder	Breadcrumb
Carousel	Full width image	`image-full-size`	checkbox-folder	Carousel
Divider	White space divider	`white-space-divider`	checkbox-folder	Divider
Feed	Feed grid	`feed-grid`	checkbox-folder	Feed
File list	Horizontal file list	`file-list-horizontal`	checkbox-folder	File list
Flip on hover	Transition on hover	`flip-hover`	checkbox-folder	Flip
Language selector	Slide up	`language-selector-item-container-slideup`	checkbox-folder	Language Selector
Link list	List vertical	`list-vertical`	checkbox-folder	Link List
Rich text	Custom bullet points	`rich-text-lists`	checkbox-folder	Rich Text (Reusable), Rich Text, Page Content
Promo	Promo hero	`promo-hero`	checkbox-folder	Promo
Promo	Promo shadow	`promo-shadow`	checkbox-folder	Promo
Promo	Attach link to bottom	`absolute-bottom-link`	checkbox-folder	Promo
Promo	Equal height with other promos	`equal`	checkbox-folder	Promo
Tabs overflow	Tabs scrollable if too large	`tabs-scrollable`	checkbox-folder	Tabs
Search	Facet summary horizantal	`facet-summary-horizontal`	checkbox-folder	Facet Summary
Search	Loupe search button	`loupe-search-btn`	checkbox-folder	Search box
Image	Image default size	`image-default-size`	checkbox-folder	Image, Image (Reusable), Promo
Common	Open link in overlay	`overlay-source`	checkbox-folder	Event List, Search Results, Title, Page Content, Image, Image (Reusable), Rich Text, Rich Text (Reusable), Link, Promo, Media Link, File List, Link List, Page List, Accordion, Carousel, Tabs, Flip, Toggle, Plain HTML, Plain HTML (Reusable), Field Editor, Container
Common	No borders	`promoted-boxed`	checkbox-folder	Rich Text (Reusable), Rich Text, Page Content, Promo
Common	Boxed	`boxed`	checkbox-folder	Splitter (Columns), Splitter (Rows), Container, Page Content, Title
Common	Button link style	`link-button`	checkbox-folder	Link, Promo, File List
Common	Equalized height	`equalized-content`	checkbox-folder	Container, Splitter (Columns), Splitter (Rows)
Common	Bordered	`sxa-bordered`	checkbox-folder	Container, Splitter (Columns), Splitter (Rows), Carousel

Do you have some feedback for us?

If you have suggestions for improving this article,