List component CSS

warning

The content on this page is outdated and will not receive updates. For the most up-to-date functionality, refer to Setting up and managing flows.

This topic provides examples of the main CSS classes/selectors you can use to customize list components.

Default player CSS

You can use the following main classes/selectors to apply additional CSS styling to list components in a flow running the default player.

Class/Selector	Description
.page-component-list	The main class applied to the entire list component in a flow. For example, to increase the padding around all list components in a flow:.page-component-input {padding:15px}
.flow ul	The main class applied to unordered list <ul> components. For example, to change the type of list-item marker in unordered lists to squares:.flow ul {list-style-type:square}
.flow ol	The main class applied to ordered list <ol> components. For example, to change the type of list-item marker in ordered lists to roman numerals:.flow ol {list-style-type:upper-roman}

Default legacy player CSS

You can use the following classes/selectors to apply additional CSS styling to list components in a flow running the default legacy player.

Class/Selector	Description
.mw-bs .mw-list	The main class applied to the <li> element of the component. This affects both ordered and unordered lists. For example, to change the line-height for all lists within the component:.mw-bs .mw-list {line-height:2em}
.mw-bs ul	The main class applied to unordered list <ul> components. For example, to change the type of list-item marker in unordered lists to squares:.mw-bs ul {list-style-type:square}
.mw-bs ol	The main class applied to ordered list <ol> components. For example, to change the type of list-item marker in ordered lists to roman numerals:.mw-bs ol {list-style-type:upper-roman}