Object details

Use the object details pattern to show a read-only page or panel of information.

Status
alpha

This is an ALPHA pattern, and we need your feedback!

If you have feedback or ideas on this particular pattern, please create a GitHub Discussion. If you have feedback on the documentation of patterns as a whole, please let us know. We need your feedback to make our patterns better!


Ingredients#

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,
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 hierarchylink 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.

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.

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", Text as="dd") 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 listslink 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

Tabbed details#

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#

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

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.

Starter kits#

CodeSandbox#

Coming soon

Sketch#

Coming soon

Support

If you need support, please open a new issue in our GitHub repository. Please try to provide as much detail as possible in your issue.

Contributing

The Paste design system is open source and contributions are welcome. Check out the project on GitHub to learn more about contributing.

Copyright © 2020 Twilio, Inc.