Details and more information

COMPONENT GUIDE

Explore behaviors before defining the interface.

Quick guide for designers

Always consider the context of the application, even when the guidance follows a standard pattern. Interaction design documents intent. Behavior must be verified in the implementation.

When to use

Use to reveal supplementary content near its opening control.

What to draw

Show text indicating the available content and expanded and collapsed versions.

How it behaves

Activation reveals or hides the content. When collapsed, its internal controls are excluded from keyboard navigation.

What to document in Figma

Record reading order after expansion and trigger behavior. If the action goes to another destination, use a link.

How to review

Check whether the purpose and states are clear on small and large screens and with zoom. Verify documented behavior in the implementation, including keyboard and screen reader use where applicable.

Full guidance

Interaction Design

Questions to ask when designing interactive components of type Details and more information.

Important:
Depending on the context in which you build your components, there may be further questions, and some listed here may not be necessary. Assess each case individually.

Designing for "no interaction"

Before interacting, can you visually tell that hidden or supplementary content is available?
Does the trigger text clearly describe what will be revealed, for example "read more", "view details", or "more information"?
Can you visually identify whether the content is open or closed?

Designing for mouse use (any pointing device)

Is there visual feedback when hovering over the trigger?
Does clicking the trigger show or hide supplementary content?
Does the state change avoid moving the person to an unexpected screen position?

Designing for gesture use

Does the trigger have a comfortable touch area?
Does tapping the trigger show or hide supplementary content?
On smaller screens, does expanded content remain close to the trigger and easy to notice?

Designing for keyboard use (any non-pointing device)

Is there visible focus on the trigger?
Can the component be activated with ENTER and SPACE when implemented as a button?
When the content is closed, are its internal components excluded from the focus order?
When the content is open, are its internal components available in the natural navigation order?

Designing for screen reader use

Is the trigger announced with a clear accessible name?
Is the open or closed state announced correctly?
Is revealed content predictably available in the reading sequence?

Interaction methods

Possible interaction methods for components of type Details and more information.

Important:
Only the main methods are listed here. Custom components require further study.

Mouse interaction (any pointing device)

Clicking the trigger opens or closes supplementary content.
The trigger's visual state should change along with the displayed content.
The text, icon, or visual indicator should remain understandable in the open and closed states.

Keyboard interaction (any non-pointing device)

TAB moves focus to the trigger.
ENTER or SPACE toggles the state when the trigger is a button or summary.
After opening, navigation continues to the revealed content according to document order.

Keyboard (or gesture) interaction + screen reader

The trigger should expose its name, role, and state.
When used, aria-expanded should reflect the open or closed state.
The native element details with summary can be used when its behavior suits the context.

Gherkin

BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).

Scenario: Given that I am on a page containing details and more information

Keyboard navigation

WHEN I use the Tab key to move focus to the more information trigger
The focus I SEE is strongly indicated visually
THEN, when I use Enter or Space
I SEE the supplementary content displayed
THEN, when I activate the same control again
I SEE the supplementary content hidden

Desktop screen reader

When I use a screen reader on a computer (NVDA, JAWS, VoiceOver) and move focus to the trigger
- I HEAR the trigger's name.
- I HEAR that the component can be activated.
- I HEAR whether the content is open or closed.
THEN, when I activate the component
I HEAR or perceive that supplementary content became available or was hidden.

Mobile screen reader

WHEN I use a screen reader on a phone (TalkBack, VoiceOver) and swipe to focus the trigger, the following happens:
- I HEAR the trigger's name.
- I HEAR that the component can be activated.
- I HEAR whether the content is open or closed.
THEN, when I double-tap to activate the component
I HEAR or perceive that supplementary content became available or was hidden.

Considerations

Considerations for components of type Details and more information.

This component represents hidden supplementary content revealed by an action such as "read more", "view details", or "more information".
Do not hide essential information without clearly indicating that more content is available.
If the revealed content is long or has several sections, an accordion may be a more suitable pattern.
If the action leads to another page or location, it behaves as a link rather than a disclosure.

References

Additional references for components of type Details and more information.

Important:
Most references are on the course platform alongside the lessons cited in this material.

Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.