CSS Utility Classes Display

Change the display style of components responsively with display utilities.

How it works

The classes are named using the following format:

• ._display:{value}

Where value can be one of:

• block
• contents
• flex
• flow-root
• grid
• inline
• inline-block
• inline-flex
• none
• table
• table-cell
• table-row

<template>
    <div class="_display:inline! _background:primary!">Inline</div>
    <div class="_display:inline! _background:dark!">Inline</div>
</template>

<template>
    <div class="_display:block! _background:primary!">Block</div>
    <div class="_display:block! _background:dark!">Block</div>
</template>

Print

Change the display value of elements when printing with the print display utility classes.

• ._print:display:none
• ._print:display:inline
• ._print:display:inline-block
• ._print:display:block