Object details
The Object Details pattern displays a read-only page or panel containing object attributes.
Description list
(coming soon)
Learn more about description lists and how to compose them below.
// import all components for Object details patternsimport { 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.
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.
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", 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
Show live example
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.
Show live example
When you find that customers want to see multiple, top-level content sections, separate them with Tabs.
Show live example
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.
Coming soon
Coming soon