Heights
Defines the height of an element.
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" />