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" />