Display utilities

Display utilities control how an element renders inside a layout. They mirror standard CSS display values. Responsive variants use the same names with a breakpoint prefix—for example mud-md-hidden and mud-md-flex—so one markup pattern can show, hide, or change layout across viewports.

These classes are used throughout the design system: responsive headers and footers (mud-hidden mud-md-flex), foundation doc tables (mud-hidden mud-md-flex column headers), layout grids (mud-md-hidden / mud-hidden mud-md-inline), and component previews such as the cookie banner.

Display utilities

Class
Styles
Description
Preview
mud-hidden
display: none;
Hides the element; it is removed from the layout flow.
Visible hidden
mud-block
display: block;
Renders the element as a block-level box (full width by default).
block
mud-inline
display: inline;
Renders the element inline with surrounding text.
inline
mud-inline-block
display: inline-block;
Inline-level box that accepts width, height, and vertical margins.
inline-block
mud-flex
display: flex;
Enables a flex formatting context for direct children.
123
mud-inline-flex
display: inline-flex;
Inline-level flex container (flows with text, children use flex layout).
12
mud-grid
display: grid;
Enables a grid formatting context for direct children.
123
mud-inline-grid
display: inline-grid;
Inline-level grid container (flows with text, children use grid layout).
12
mud-table
display: table;
Renders as a table wrapper; pair with mud-table-row and mud-table-cell.
A
B
mud-table-row
display: table-row;
Renders as a table row; wrap mud-table-cell children.
Row
mud-table-cell
display: table-cell;
Renders as a table cell; use inside a mud-table-row.
Cell 1
Cell 2
mud-visible
visibility: visible;
Restores visibility when a parent or modifier hid content.
visible
mud-overflow-hidden
overflow: hidden;
Clips overflowing content; used on cards, modals, and media wrappers.
clip
mud-overflow-x-auto
overflow-x: auto;
Horizontal scrolling when content is wider than the container (e.g. wide breakpoint tables).
Scroll me →

Responsive variants

Class
Styles
Description
Preview
mud-md-hidden
display: none; (≥ md)
Hidden from the md breakpoint upward. Used for mobile-only labels in layout grids.
md-hidden
mud-hidden mud-md-flex
none → flex (≥ md)
Hidden on small screens; becomes a flex container from md up. Pattern used for desktop headers and doc table headers.
12
mud-hidden mud-md-inline
none → inline (≥ md)
Hidden on small screens; shown inline from md up. Used for desktop breakpoint labels in layout grids.
Mobile Desktop