Skip to main content


Metatext is lightweight text that describes other, more prominent text or components nearby. For example, metatext could provide more information about an app title such as the price or publisher.


Showing default lightweight metatext inline.
Metatext on a default theme

Best practices

Use metatext to describe the contents of, give context for, or provide more detail about other text or components. Metatext is typically a single piece of data or sentence fragment without punctuation. If you need to write a whole sentence or paragraph, use caption instead.


  • Be concise; use only one or two words or a sentence fragment.
  • Place the metatext as close as possible to its related text or component.
  • Use metatext sparingly. Avoid long strings, sentences or paragraphs of text; consider using a caption instead.


  • Do not use metatext for long strings, sentences or paragraphs of text; use a caption instead.
  • Do not use metatext to describe an image or “legalese;” use a caption instead.
  • Do not use metatext for information necessary for actionable items that would be lost if skimmed over.
  • Do not use metatext as a layout tool to fit more text in a particular region.

Also known as

Associated information
Related information




  • The class c-meta-text could be applied to HTML <span> or <em> elements, depending on the content semantics and meaning.


  • While metatext can be applied in multiple situations, it is designed to be used with either a <span> or <em> inline element where the element is assigned the class c-meta-text.


  • Schema definition: The metatext schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default span metatext

<span class="c-meta-text">Metatext</span>

Default em metatext

<em class="c-meta-text">Metatext</em>