Text

Use the assertive paragraph style for introductory paragraphs or short lines of text that should be emphasized.

The default paragraph style is the most used paragraph style, it is used for all page content that shouldn't be emphasized, de-emphasized, or isn't legal copy.

Default paragraph style — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan auctor ipsum ac lobortis. Donec congue erat augue, sit amet mattis turpis cursus egestas.

Use the subtle paragraph style for text that should be de-emphasized.

Visually, these two options look the same, but they are coded differently. Use the semantically correct option.

Use the small paragraph style for extended blocks of text — multiple paragraphs, lists, or sections.

Use the small paragraph format for disclaimers, caveats, legal restrictions, or copyrights. For more information about the small paragraph format, see the HTML spec on the <small> element.

There are two text colors to choose from: default and ghost. Only use default text on containers with background colors set to default, subtle, or subtle gradient. Only use ghost text on containers with background colors set to accent, accent gradient, or assertive.

Changing font weight is a quick way to denote to the user the importance of the text. This is why headings and subheadings are usually set to bold. Bolded text that is not a heading or subheading must have a reason why it is bolded. Never bold whole sentences.

Italicizing de-emphasizes the text. Italicize text that is informative, but ancillary or secondary. Examples of this include help text, disclaimer text, and notes. Use italics sparingly.

Lorem ipsum, link consectetur

1. Ordered list item
   1. Nested list item
   2. Nested list item
   3. Nested list item
2. Ordered list item
3. Ordered list item

• Unordered list item
  • Nested list item
  • Nested list item
  • Nested list item
• Unordered list item
• Unordered list item

Use this style to emphasize a short line of text. Do not use this style for long or multiple lines of text. The callout style is a display text style meaning that it does not disrupt the heading structure of the page. Do not use this in place of a heading element (title component).

The author should set the actual quote to the “Quote” paragraph format and set the quote source to the “Citation” paragraph format. These two formats are coded differently so it is important to correctly format each piece of the blockquote. 

The em (—) dash is built into the citation paragraph format, the author does not have to type the dash when writing the citation.

Note: Sometimes the rich text editor wraps the citation in a <p> tag and that makes the citation italicized. The reason for why this happens is unclear, but to fix an italicized citation, simply delete and re-add the citation.

Stoplight text styles are only used for safety ratings. Do not use in any other use case. Do not mix bold text and regular text in the stoplight style. This will break the style.

Use only for error or danger use cases.

Use only for warning or caution use cases.

Use only for valid or safe use cases.

Accent pills are only used to surface helpful search query links and is always used in association with site search. Do not use this style for any other use case. A right point arrow can be added to emphasize the pill’s importance on the page.

Never use a single accent pill; this style is meant to be used for groups of links.

Type out all accent pill text first, then add the links. If you type one pill, then add the link, then type the next pill, AEM will add non-breaking spaces. 

Lorem ipsum, consectetur^TM

Lorem ipsum, consectetur₁

Tables organize data into columns and rows and makes it easer for readers to compare and scan information. Never use a table to layout content.

Use the standard table style for any tabular information that is not product or technical details. The responsive data table style will make the table take up 100% of the width of it's container.

Use the standard table style for any tabular information that is not product or technical details. The responsive data table style will make the table take up 100% of the width of it's container.

Use the product / technical details table style for product or technical details. This style matches the E-commerce platform so it is important to be consistent in how we present product information across platforms.

The text in the first column is bolded to help with scanning and grouping row information. The text in the first column should be the leading categorization in the row — for example ‘Product size, ###mm’.

The top margin will only apply to separate text components. To use different paragraph styles, add a separate Text component for each style. If the text is in paragraphs, the top margin will only apply to the first line of the text with default spacing between paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan auctor ipsum ac lobortis. Donec congue erat augue, sit amet mattis turpis cursus egestas.