Typography sizing updates!
We've updated typography sizing variables and class names to make them more agnostic. Read about how you can update.
The design system doesn't style base HTML typography elements (like
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:
Lists organize written information for users.
- Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.
- Use unordered lists to display text in no specific order.
- If you need to communicate long lists of narrative text.
- Use sentence case and begin lists with a capital letter.
- Use punctuation appropriate to the text. Do not leave sentences without periods.
- When a list has a heading, consider adding an
idattribute to the heading element, and an
aria-labelledbyattribute to the list element. Screen readers will then announce the heading text when users navigate to the list.
- When using an unstyled list,
role="list"should be added to the list element.
It's worth mentioning that when
list-style is removed from a list, Safari will not recognize it as a list in the accessibility tree.
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. You can also use
.ds-c-link--inverse for styling links.
- 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).
- 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.
For example, instead of:
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.
- 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.
ds-type-heading-xl 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
they'll automatically adjust as you change the font size.
The following Sass variables can be overridden to change the type sizes: