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 |
If you have suggestions for improving this article, let us know!