An official website of the United States government
The .gov means it’s official. Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.
The site is secure. The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
The design system doesn't style base HTML typography elements (like h1, h2, p, etc) in order to avoid conflicting with any existing site styles. You should instead use one of the base typography classes below to apply styling:
ds-display
ds-title
ds-h{level} where level is a number between 1 and 6
<h1class="ds-display">Display</h1><h1class="ds-title">Title</h1><h1class="ds-h1">Heading 1</h1><h1class="ds-h2">Heading 2</h1><h1class="ds-h3">Heading 3</h1><h1class="ds-h4">Heading 4</h1><h1class="ds-h5">Heading 5</h1><h1class="ds-h6">Heading 6</h1><pclass="ds-text--lead ds-u-measure--wide"><strong>Lead text.</strong>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.</p><pclass="ds-text ds-u-measure--wide"><strong>Body text.</strong>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.</p>
Link
Links connect users to a different page or further information.
The only base HTML element the design system applies styling to is the <a> element. To prevent this, you can override the $ds-include-base-html-rulesets Sass variable and set it to false.
When to use
Navigating to a new page or view in your application
Navigating to a different web page, e.g. external documentation
Note: Warn the user if links open a new window or downloads a file (PDF, for example).
When to consider alternatives
Opening or closing a modal or dialog
Triggering a dropdown menu
Submitting data to the server
Your link should always describe where it will take users. Users tend to scan text online, and elements that stand out (like links) grab attention. Clear links can help users navigate more quickly.
Never use a link to say “click here.” A nondescript link forces users to backtrack and read the surrounding text for more context. This is even more problematic for those who rely on screen readers, which can list links for quicker navigation. A list of “click here” isn’t helpful for anyone.
Accessibility
Users should be able to tab to navigate between links.
Users should be able to activate a link when pressing ‘Enter’ on their keyboard.
Users should be able to identify links without relying on color alone.
Users should be able to activate hover and focus states with both a mouse and a keyboard.
<p><ahref="javascript:void(0);">This is a text link</a> on a light background.</p><p><ahref="/style/typography/">This is a visited link</a>.</p><divclass="ds-base ds-base--inverse ds-u-padding--1"><p><ahref="javascript:void(0);">This is a text link</a> on a dark background.</p><p><ahref="/style/typography/">This is a visited link</a> on a dark background.</p></div>
Responsive typography
The ds-display, ds-title, and ds-h1 classes are responsive by default.
To apply responsive typography elsewhere, use the font size utility class.
Since the base typography margins and line height is measured in em units,
they'll automatically adjust as you change the font size.
