Skip to main content

CMS Design System

Measure

Line length, also called "measure", is an important part of readability. CMSDS has 3 measure options to control reading length.

Format: ds-u-measure--[NAME]

Code snippet
<div class="">We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.</div>

Modifier: ds-u-measure--narrow

line length ~45 characters

Code snippet
<div class=" ds-u-measure--narrow">We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.</div>

Modifier: ds-u-measure--base

line length ~65 characters

Code snippet
<div class=" ds-u-measure--base">We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.</div>

Modifier: ds-u-measure--wide

line length ~80 characters

Code snippet
<div class=" ds-u-measure--wide">We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.</div>