Skip to main content

Show More

A show more component is an interactive element that allows users to expand or reveal additional content initially hidden or truncated.

Dos and don'ts

Do
  • Use only as a block, not inline.
  • Use to save space while preserving visual balance and maintaining information hierarchy.
Don't
  • Don't use if entire content needs to be expanded or collapsed. Use an Accordion instead.

Anatomy

Show more component anatomy with numbered callouts indicating the label and chevron icon.
  1. Label: Text label informing the user about the nature of the link.
  2. Chevron icon: Visually support the Label.

Variants

Default

The default variant of the Show more component showing the label and downward chevron.

Position

Always place the component below the paragraph or sentence. It does not support being inline with content.

Do
Example of the Show more component below a paragraph.
Don't
Example of the Show more component inline with content, which is not supported.

Behaviours

The component was designed to be collapsed by default, but can be modified to be expanded by default. Consider context and the role the content plays when deciding which option is best.

Tapping "Show More" reveals the hidden content at the bottom of a paragraph. When this component is expanded, the text changes to "Show Less," and the chevron flips to show the direction of the previously hidden content.

Examples showing the Show more component in both collapsed and expanded states within paragraphs of text.

States

Outlines the atomic level interactive elements for the component.

Show more

The Show more state of the component showing the label with a downward pointing chevron.

Show less

The Show less state of the component showing the label with an upward pointing chevron.

Examples

LTR examples

Here are some examples of the component in left-to-right context:

Show more component used in left-to-right text examples.

RTL examples

Here are some examples of the component in right-to-left context:

Show more component used in right-to-left text examples.
Back to top