Available CSS classes

The following table shows the available CSS classes that SXA uses in the Pages 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, Promo, Container, Row Splitter
Add highlight	Highlighted right	`highlighted-right`	icon-button-group-radio	Rich Text, Page Content, Promo, Container, Row Splitter
Add highlight	Highlighted top	`highlighted-top`	icon-button-group-radio	Rich Text, Page Content, Promo, Container, Row Splitter
Add highlight	Highlighted bottom	`highlighted-bottom`	icon-button-group-radio	Rich Text, Page Content, Promo, Container, Row Splitter
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, Row Splitter, Column Splitter
Background color	Color background	`container-color-background`	droplist	Container, Row Splitter, Column Splitter
Background color	Dark background	`container-dark-background`	droplist	Container, Row Splitter, Column Splitter
Background color	Gray background	`container-gray-background`	droplist	Container, Row Splitter, Column Splitter
Background layout	Cover background	`cover-background`	droplist	Container
Background layout	Fix background	`fix-background`	droplist	Container
Background layout	Parallax background	`parallax-background`	droplist	Container
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
Link list	List vertical	`list-vertical`	checkbox-folder	Link List
Rich text	Custom bullet points	`rich-text-lists`	checkbox-folder	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
Image	Image default size	`image-default-size`	checkbox-folder	Image, Promo
Common	No borders	`promoted-boxed`	checkbox-folder	Rich Text, Page Content, Promo
Common	Boxed	`boxed`	checkbox-folder	Row Splitter, Column Splitter, Container, Page Content, Title
Common	Button link style	`link-button`	checkbox-folder	Link, Promo, File List
Container	Full width	`fullwidth-container`	checkbox-folder	Container
Container	Indent inner	`indent-inner`	checkbox-folder	Container
Container	Bordered	`sxa-bordered`	checkbox-folder	Container

Do you have some feedback for us?

If you have suggestions for improving this article,