This pattern is not yet in the Enterprise Code Library. See JIRA ECS-87. Please email the Patterns Team for details and more information.

Inline Expand

Inline expand means part of the module’s content is exposed by default and the remaining content is hidden. The full content is revealed inline only when requested by the user.
See also: Types of Expand/Collapse

Also known as: truncation, show / hide, see more / see less

Design Specs

Desktop/Tablet

  1. When used in a new line, padding above trigger element is 20px.
  2. Trigger element follows link text styling standards, Open Sans Regular 15px and #005CCC. Exception for card styling.
  3. When used in a new line at the bottom of content area, a gradient should be used.
  4. Icon for trigger element can be find in the SHC Icon Font Library.

Not pictured:
  • When used in the same line as content, padding to the left of the trigger element is 10px and no gradient is used.

  • Production Examples

    • Sears
    • Kmart

    Mobile

    Examples of inline expand - Card UI.

    Examples of inline expand - Card UI.

    Desktop/Tablet

    An example of inline expand within page content. (See below for card UI example.)

    An example of inline expand within page content. (See below for card UI example.)

    An example of inline expand for offer details. (See below for card UI example.)

    An example of inline expand - Card UI. Note: "Order Summary" in this example is an Accordion.

    Desktop/Tablet

    An example of inline expand within page content.

    An example of inline expand within page content.

    An example of inline expand for offer details.

    When Do I Use This?

    In its default state, it provides the user focus on the primary page content and a scent of that content section, while increasing visibility of the neighboring section. When expanded, it provides on-demand access to hidden (secondary) content or features

    Usage Guidelines

    1. Content should be partially exposed by default.

    An example of a correct inline expand default state - showing some content is visible to a user by default.

    An example of an incorrect inline expand default state. When using inline expand, don't hide all content by default. Some content should be exposed by default. To hide all content - consider the Accordion pattern instead.

    2. The trigger element for inline expand is a link with a caret.

    Caret placement is on a new line at the bottom of a content area (with gradient), or at the end of a line of text (no gradient). In Card UI, the caret and link placement are centered below the content (no gradient). See below for Card UI examples.

    An example of the proper placement and gradient usage of a caret when used within page content. Caret is on a new line at the bottom of a content area and a gradient affordance is used.

    An example of an incorrect inline expand usage when used within page content. The caret and link are on a new line but no gradient is being used. A gradient is required when the caret and link affordance are on a new line.

    An example of an incorrect inline expand usage when used within page content. The caret is placed at the end of a line of text and a gradient is being used. A gradient should only be present when the caret and link are on a new line.

    3. Copy guidelines: Use a noun plus caret. Do not use verbs.

    Only exception: for legal text use “see details”. Do not use the word “more” plus a noun.

    An example of correct copy usage for inline expand within a page.

    It is okay to use verbs (i.e. 'see') for legal text inline examples.

    An example of incorrect text usage for inline expand. The caret + word is enough, a verb is not necessary as an additional affordance.

    4. Inline expand content should contain informational content only.

    Do not include UI elements as part of expanded content

    An inline expand module in the expanded state should only contain information text.

    An example of an incorrect inline expand module. An inline expand module in the expanded state should not contain any UI elements.

    5. Inline expand cannot be used inside of an expanded accordion.

    Do not use inline expand inside of an expanded accordion.

    ADA Compliance

    There are two prime objectives to ensure this pattern is accessible: keyboard only users must be able to tab through with relative ease, and screen readers must be able to read out all the content including the expand link affordance and that an action is required. The status of the Inline Expand pattern is defined as expanded/open or collapsed/close. Therefore, while the user is navigating through the content module that has inline expand present, they should be properly informed if any expandable content area is open or close. This ensures a user is able to navigate to the hidden content of the module. While sighted users can easily tell if an expanding section is open or closed, screen-reader users need to be alerted when a section's state has changed.
    Useful Links:

    Rationale

    This pattern reduces the amount of real estate required for a content module, while increasing visibility of the neighboring section. It supports natural reading of the exposed content. When expanded, it provides on-demand access to hidden (secondary) content or features

    SHC rationale:
    Informed by an SHC audit to review all example uses, followed by efforts to clarify and provide distinct patterns for each use case - see all expand/collapse

    Multiple cues combine to provide a clear affordance to the user, and differentiate it from other elements on the site:

    • The trigger is link blue because it is typically used within body content, where other links are blue.
    • The trigger is body color when used in Card UI because it has its own clear target area, which ensures its visibility and affordance. The trigger is aligned center in this instance.
    • A caret is used to communicate the direction of expansion and to clarify its utility from a link. It is placed on the left, which provides a visual cue to the user, which is understood faster than words. Accordions use the same caret, and place the caret on the left for the same reason.
    • In the use case of text truncation, the gradient is used to separate the trigger element from the content area, and hint to the user that more content is present. Elimination of the gradient was considered; it was found to be necessary to provide contrast on various colors. A gradient with a button "Show full article" was a very common design pattern for news sites in 2015/16.
    • Copy should include "show.." and "hide..." in their respective states.

    Research

    Baymard Sears Desktop Usability Audit with Product Page addendum

    Baymard audit 2015 suggests aligning all PDP instances to the gradient example.

    Where to Place Your Accordion Menu Icons

    Refers to 2 studies about placement and icon choice.

    view article

    UI: Proper Indicators for Hidden Elements

    Article about using effective indicators to ensure user comprehension that hidden content exists. Arrow direction, and gradient fades are mentioned.

    view article

    6 Guidelines for Truncation Design

    view article

    Post a New Comment

    Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

    For general questions or assistance, email the Patterns Team directly.