See every variation of this pattern full size as it currently looks in AEM Cloud. Resize your browser to view breakpoint behavior.
Pattern Live Examples
With Icons Only (Default)
1. Headline: Recommend starting with a verb. Characters: ~30
2.Text CTA: Drives to content like selector tools. Characters: ~40
3. Badge: Draws attention to a column. Example, a star icon and "Most popular" badge text. Try not to exceed 3 words. Characters: ~30
4. Text CTA: Commonly used for export actions. For example: “Export table (.xlsx)”. Characters:~40
5. Label Header: Describes the type of content in the left-hand column. For example: "Features". Characters:~30
6. Label: Try not to exceed 20 characters. (Sticky header; longer label and subtext = more vertical space.) Characters:~90
7. Subtext: If you use the subtext on one column label, include it on all except the lefthand. Use consistent wording structure. Characters:~90
8. Accordion Subhead: Characters:~30
9. Title: Characters:~90
10. Footnote Number: Characters:~2
11. Tooltip Icon: Can display next to a title. Characters:~120
12. Label: Icon and label denote availablity:
Available (filled circle)
Limited (half-filled circle)
Not Available (circle w/ midway horizontal line, no fill)
13. Copy with Inline Links: Supplemental information. Bold the first line for emphasis. Characters:~90
14. Subhead Footnote: “Footnote” or “Footnotes”.
15. Footnote Copy: Characters: unlimited as per legal or business requirements, recommend <450.
Shown with Horizontal Stepper
1. Stepper
2. Item Amount Label: Characters:~35
3. Tooltip Copy: Characters:~120
With Bullet List
Bullets work well for very short content bites (fewer than ~20 characters); if this isn’t feasible for your content, consider taking copy out of bullets to reduce word wrap.
1. Cell Detail: Use the same structure for each. Characters:~120
Version
This information relates to Design v3.1 of this pattern.
Live examples
SD-WAN comparison chart - March 2024