Presentation 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 presentation components.

Default player CSS

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

Class/Selector	Description
.page-component-presentation	The main class applied to the entire presentation component in a flow. For example, to increase the padding around all presentation components in a flow:.page-component-presentation {padding:15px}

Default legacy player CSS

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

Note: Presentation components can include a wide range of content types, and the CSS classes for these may be covered in another section in this reference, such as Typography CSS that relates to textual content elements for example.

Class/Selector	Description
.mw-bs .mw-presentation	The main class applied to the entire presentation component. For example, to add padding around the entire component:.mw-bs .mw-presentation {padding:15px}
.mw-bs table, .mw-bs th, .mw-bs td	The main classes applied to all tables. For example, to modify the background color of the entire table:.mw-bs table {background-color:#cccccc}
.mw-bs video	The main class applied to HTML5 video media embedded in a presentation component. For example, to add a border around the video:.mw-bs video {border:1px solid black}