Foundation
Measure
Set the max-width by number of characters per line using ch units instead of pixel values. Measure classes include responsive prefixes.
In other words, as the font size increases, the pixel width increases.
.vads-u-measure--1
40ch
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s Veterans.
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s Veterans.
.vads-u-measure--2
60ch
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s Veterans.
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s Veterans.
.vads-u-measure--3
66ch
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s Veterans.
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s Veterans.
.vads-u-measure--4
72ch
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s Veterans.
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s Veterans.
.vads-u-measure--5
77ch
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s Veterans.
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s Veterans.
.vads-u-measure--none
none
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s Veterans.
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s Veterans.
Responsive prefixes
Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.
Example
<div class="medium-screen:vads-u-measure--5 large-screen:vads-u-measure--1">
| VADS Breakpoint Sass Variable | USWDS Breakpoint Custom Property | Width |
|---|---|---|
$xsmall-screen |
--mobile |
320px |
$small-screen |
--mobile-lg |
481px |
| -- | --tablet |
640px |
$medium-screen |
--medium-screen |
768px |
$small-desktop-screen |
--desktop |
1024px |
$large-screen |
--desktop-lg |
1201px |
Read more about breakpoints.