Tiles 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 tiles components.

Default player CSS

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

Class/Selector	Description
.page-component-tile	The main class applied to the entire component. For example, to increase the padding around the component: .page-component-tile {padding:15px}
.tiles-header	The main class applied to the label heading of each individual tile. For example, to increase the font size of each tile label heading: .tiles-header {font-size:20px}
.tiles-body	The main class applied to the middle content of each individual tile. For example, to increase the font size of content within the tile: .tiles-body {font-size:16px}
.tiles-details	The main class applied to the bottom footer content of each individual tile. For example, to increase the font size of footer items within the tile: .tiles-details {font-size:16px}

Default legacy player CSS

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

Class/Selector	Description
.mw-bs .mw-tiles	The main class applied to the entire component. For example, to increase the padding around the component: .mw-bs .mw-tiles {padding:15px}
.mw-bs .mw-tiles-items	The main class applied to all the tiles, as a group. For example, to increase the padding around the tiles group: .mw-bs .mw-tiles-items {padding:15px}
.mw-bs .mw-tiles-item-container	The main class applied to each individual tile container. For example, to increase the size of each tile from the 300px default: .mw-bs .mw-tiles-item-container {height:400px;width:400px}
.mw-bs .mw-tiles-item-header	The main class applied to the label heading of each individual tile. For example, to increase the font size of each tile label heading: .mw-bs .mw-tiles-item-header {font-size:20px}
.mw-bs .mw-tiles-item-content	The main class applied to the middle content of each individual tile. For example, to increase the font size of content within the tile: .mw-bs .mw-tiles-item-content {font-size:16px}
.mw-bs .mw-tiles-item-footer	The main class applied to the bottom footer content of each individual tile. For example, to increase the font size of footer items within the tile: .mw-bs .mw-tiles-item-footer {font-size:16px}
.mw-bs .mw-tiles-item-outcomes	The main class applied to the bottom footer content of each individual tile. For example, to increase the padding around outcome buttons within the tile: .mw-bs .mw-tiles-item-outcomes {padding:15px}