Layout and content

Adapt the layout to the content effectively without breaking it.

Beta

Show details

Related content

Visual and interaction specifications

Resources to document your deliverables

Overview

UI components are fluid entities that change and transform depending on context. To define the context, we consider container flexibility and content needs. Components live inside flexible grids and should be built caring about the following:

Container: The box where the content lives. The container limits the space available.

Content: The elements that feed the container. These elements can either be restricted by the container or modify it.

Based on this context, we must consider the following requirements when creating or applying components.

Content overflow

When the amount of content exceeds the container's capacity, it's crucial to display affordances that indicate to the user that additional content is present but currently hidden.

Showing up scrollbars in this situation will make the component more understandable.

⛔️ When the available content exceeds the height of the container, without an affordance to aid navigation, users may struggle to understand how to access it.

✅ When a scrollbar affordance is displayed on the container, it enables the user to scroll through any overflowed content, providing an intuitive experience.

Truncating text in containers that don't wrap their contents will let the user know more text is hidden.

⛔️ The value added to the Text Input Control overflows the container but there is not affordance to let the user know.

✅ Including an ellipsis affordance can indicate to users that the container has overflowed with text, aiding comprehension.

Replacing a group of similar components with a menu component can alleviate clutter while maintaining access to all necessary actions.

⛔️ Without a defined safe area, when container grows it generates unnecessary friction between elements.

✅ Incorporating a safe area between elements creates white space, which improves readability and reduces friction.

Elements positioning

Accurately positioning elements in a container is crucial for consistency and preserving component architecture when adapting to varying container sizes.

The TextArea component's resize affordance is a prime example. As the content grows, the icon stays anchored in the bottom right corner, maintaining layout coherence and improving comprehension through visual cues.

⛔️ The content on the text area has grown exceeding the default height. Resize affordance has remained on its original location

✅ When content expands, specifying how an element adheres to a specific area of the container preserves the layout's coherence, creating a more cohesive component.

Quality checklist

This element passes the following requirements described in our Component lifecycle.

Maturity

Beta

α · Design tokens

It uses Ariane design tokens.

α · Naming agreement

Its name is agreed upon and shared between design and development.

α · Responsive L1

Is responsive to different viewport sizes.

β · Responsive L2

The responsive behavior has been reviewed and validated by the team.

β · Docs L1

It has essential documentation with at least primary usage.

β · Use cases

All the uses are audited and refined.