@citizensadvice/display

Display

Sets the display behavior of the element.

• Classes
• Examples
• Installation

Classes

Class name	Value
.hidden	none
.inline	inline
.block	block
.inline-block	inline-block
.table	table
.table-cell	table-cell
.table-row	table-row
.table-fixed	fixed

Responsive display classes

To apply specific classes at set screen widths, use the following classes:

Class name	Description
[aboveClassName]-ns	Screens with a min-width of 48rem
[aboveClassName]-m	Screens with widths from 48rem to 64rem
[aboveClassName]-l	Screens with a min-width of 64rem

Examples

<div class="hidden inline-block-ns">...</div>
<div class="block  inline-block-l inline-block-ns">...</div>

Installation

$ npm install @citizensadvice/display

now import into your stylesheet...

@import '@citizensadvice/display/index.scss';

You can also make use of the unpkg service, try adding the link below to the head of your HTML file

<link src="https://unpkg.com/@citizensadvice/display@latest/build/display.css" />