Morningstar Design System

Microcopy

  • HTML/CSS Available
  • Web Component Unavailable
  • Last Updated

    2.0.0

Microcopy augments a label to describe a form element in greater detail.

See Forms for guidance on composing full forms.

Variations

Default

Use to describe a form element in greater detail.

Default
Your password must contain a letter and a number. 
<div class="mds-form__field-group">
    <span class="mds-form__microcopy" id="password-help-text"> Your password must contain a letter and a number. </span>
</div>

Sizing

Sizing affects text size. The default size is medium, and you can use a modifier class to make the microcopy smaller (mds-form__microcopy--small) or larger (mds-form__microcopy--large).

Small
This is example microcopy text.
Medium (Default)
This is example microcopy text.
Large
This is example microcopy text. 
<span class="mds-form__microcopy mds-form__microcopy--small"> This is example microcopy text. </span>

Guidelines

Visual Language

  • Match the size of microcopy to the form element it’s paired with.

Editorial

  • Use full sentences with punctuation.
  • Aim for no more than two sentences.

Accessibility

  • Include an aria-describedby attribute on each input, textarea, or select that has an .mds-form__microcopy component providing additional information. The value of the aria-describedby attribute must match the id attribute on the .mds-form__microcopy component.

Code Reference

  • Always wrap grouped form elements in a mds-form__field-group container.
<div class="mds-form__field-group">
    <label class="mds-form__label" for="password">Password</label>
    <span class="mds-form__microcopy" id="password-help-text"> Your password must contain a letter and a number. </span>
    <input class="mds-form__input" aria-describedby="password-help-text" type="password" id="password" />
</div>

CSS Class References

Class
 Applies to
 Outcome

mds-form__microcopy--small

mds-form__microcopy

Adjusts styling to render small microcopy.

mds-form__microcopy--large

mds-form__microcopy

Adjusts styling to render large microcopy.
©2018 Morningstar, Inc. All rights reserved. Terms of Use