Skip to content
Change the site theme
(information)

Object details

Design assets pending
Peer review pending

The Object Details pattern displays a read-only page or panel containing object attributes.

Product
Console
Flex
SendGrid

Ingredients

Ingredients page anchor

Heading

Description list
(coming soon)

Learn more about description lists and how to compose them below.

// import all components for Object details patterns
import {​ Heading } from "@twilio-paste/core/heading";
import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@twilio-paste/core/tabs";
import {​ Text } from "@twilio-paste/core/text";
import { Box } from "@twilio-paste/core/box";
import { Stack } from "@twilio-paste/core/stack";
import { Grid, Column } from "@twilio-paste/core/grid";

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

Accessibility page anchor

A well-structured document hierarchy(link takes you to an external page) 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.

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.

Information icon

Composing a Description List

A list of properties should be structured into a description list using the Box and Text primitives (e.g., Box as="dl", w) to help define the relationship between a property and its label, and spaced with the Stack component.

In the future, this composition will be replaced with a Description List component. Read more about description lists(link takes you to an external page)

Screen of message details and list of properties

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.

Screen of email campaign details showing a chart first

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

Screen of call details with tabs and list of properties

Placement of object actions

Placement of object actions page anchor

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

Information icon

This pattern is coming soon!

We've not yet patternized this part of Object Details. If you need this for your current or upcoming work, please consider partnering with us to contribute it.

Coming soon

Coming soon

Black lives matter.