@citizensadvice/display

Sets the display behavior of the element.

Usage no npm install needed!

<script type="module">
  import citizensadviceDisplay from 'https://cdn.skypack.dev/@citizensadvice/display';
</script>

README

Display npm (scoped)

Sets the display behavior of the element.

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