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