Object details

Ingredients#

// import all components for Object details patterns
import {Heading, Tabs, TabList, Tab, TabPanels, TabPanel, Text, Box, Stack, Grid, Column} from '@twilio-paste/core';

Usage#

General usage#

An object details page or panel gives a customer a read-only view of their information, such as a message log or sent email.

Object details should:

• Be clearly separated into content sections with headings, and if necessary, tabs to allow a customer to easily scan for relevant information.
• Prioritize the order of content based on what customers find most important from customer research.

Accessibility#

A well-structured document hierarchy helps provide efficient in-page navigation for keyboard users, assistive technologies, and mobile web users.

Proper hierarchy allows users to skip directly to content that is most relevant to them. This is especially important on an object details page where there may be many different types of information and customers are more likely to skim through.

To structure a page:

• Use headings to organize the page.
• Use headings in sequential order. For example, don’t place an H4 directly after an H2.
• Use description lists to define relationships between a property and its label.
• Use tables to organize data that are meant to be compared.

Variations#

Standard details#

The most common way to structure an object details page is to first show an overview of properties in a description list, followed by more detailed content sections. Properties should be left-aligned, and property labels and values should be vertically placed.

If there are more than 6 properties, divide the properties into 2 columns.

While this might be the most common structure for object details, use customer research to inform how to order the content sections on a details page. Show customers the most relevant information first.

For example, when viewing the details of a sent email campaign, a customer may want to quickly see how well their campaign has been performing over time. In this case, placing a group of stats cards and a chart first may be most appropriate.

Tabbed details#

When you find that customers want to see multiple, top-level content sections, separate them with Tabs.

Placement of object actions#

Many object detail pages also include a set of actions that can be performed on that object, such as editing or deleting.

Starter kits#

CodeSandbox#

Coming soon

Figma#

Coming soon

Related discussions#

• Label Value styling