Heights

Defines the height of an element.

• Abbreviations
• Installation

Abbreviations

| Abbr | Value | | ------------- | ---------------------------------------------------------------------------- | | height- | Prefix | | min-height- | Prefix | | vh- | Prefix - Screen height percentage (to be used with percentage classes below) | | min-vh- | Prefix - Minimum screen height percentage | | 0 | 0rem (0px) | | 1 | $height-1 0.25rem (4px) | | 2 | $height-2 0.5rem (8px) | | 3 | $height-3 0.75rem (12px) | | 4 | $height-4 1rem (16px) | | 5 | $height-5 1.5rem (24px) | | 25 | 25% | | 50 | 50% | | 75 | 75% | | 100 | 100% |

<div class="height-5">Lorem ipsum</div>

// This will give our element a height of 24px

Responsive height classes

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

| Abbr | Value | | ---- | ---------------------------------------------------- | | ns | $breakpoint-ns (min-width: 48rem) | | m | $breakpoint-m (min-width: 48rem, max-width: 64rem) | | l | $breakpoint-l (min-width: 64rem) |

<div class="height-3 height-5-ns">Lorem ipsum</div>

// This will give our element a height of 12px on devices with a width below 48rem and 24px on
device widths of 48rem and above

Installation

$ npm install @citizensadvice/heights

now import into your stylesheet...

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

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

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