Reveal text

What problem does this solve?

Use this when you need to show users one or more small snippets of a larger body of text in order to keep the user interface lightweight and scannable (following our design principle gracefully reveal depth).

This pattern includes both revealing the rest of the text on the same screen, and linking to another screen for the full text.

When and how to use this pattern

This "Reveal text" pattern consists of the following items (common for both techniques):

  • A few lines of text, taken from the beginning of one large piece of text. We recommend 3 lines within the space provided
  • If possible, avoid truncating words, and truncate at a white space instead. For example: instead of "Atlass…", write "Atlassian…"
  • An ellipsis ("…") within the last displayed line, to show exactly where the text is truncated

From here on, the two techniques differ:

Revealing more text on the same screen

  • The word "Show more" as a link
  • When clicked, reveal the text immediately below. The text should now look like one piece of text without interruption
  • Display a "Show less" link at the end of the last sentence. Clicking this link will collapse the text to its previous state
  • This should be the default behaviour for most cases

Interactive example

Content title

What happens when you add a shiny new browser to a stack of already-disagreeing citizens? You’ll inevitably find some bugs. This is the story of how we found a rendering quirk and how the Atlassian frontend team found and refined the fix. The Atlassian User Interface (AUI) library has just finished an IE10 sprint to get our library prepped and ready for the newest member of the browser family. While IE10 seems generally quite good, we found a couple of problems due to IE10 dropping conditional comments; plus some undesirable behaviours. Show more

Revealing more text on another screen

  • The word "More" as a link
  • When clicked, the link works just like any other hyperlink, getting users to the screen with the full text
  • If the full text is only one part of a much larger page, try to move the user as close to the beginning of the text as possible
  • Only use if the full text is very long, or only makes sense in another page context

Interactive example

Content title

What happens when you add a shiny new browser to a stack of already-disagreeing citizens? You’ll inevitably find some bugs. This is the story of how we found a rendering quirk and how the Atlassian frontend team found and refined the fix. The Atlassian User Interface (AUI) library has just finished an IE10 sprint to get our library prepped and ready for the newest member of the browser family. While IE10 seems generally quite good, we found a couple of problems due to IE10 dropping conditional comments; plus some undesirable behaviours… More

What happens if …

  • … the truncation of text is done manually, or the text has a separate short description or a byline: Show the full short description/byline with a descriptive link below this that reveals the full content, e.g. 'July product announcement'