Required
Object details
The Object details page template allows customers to view and take action on properties of a single object.
<Box paddingX="space100" paddingTop="space130" paddingBottom="space160">
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb aria-label={useUID()}>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
</PageHeaderSetting>
<PageHeaderDetails>
<PageHeaderHeading>Object details</PageHeaderHeading>
<PageHeaderActions>
<Button variant="secondary">Label</Button>
</PageHeaderActions>
</PageHeaderDetails>
<PageHeaderInPageNavigation>
<InPageNavigation aria-label={useUID()}>
<InPageNavigationItem href="#" currentPage>
Nav item
</InPageNavigationItem>
<InPageNavigationItem href="#">Nav item</InPageNavigationItem>
<InPageNavigationItem href="#">Nav item</InPageNavigationItem>
</InPageNavigation>
</PageHeaderInPageNavigation>
</PageHeader>
<Box display="flex" flexDirection="column">
<Box display="flex" flexDirection="column" rowGap="space100">
<Box>
<Heading as="h2" variant="heading20">
Heading
</Heading>
<Box display="flex" columnGap="space70" width="size80">
<Box width="size40">
<DescriptionList>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
</DescriptionList>
</Box>
<Box width="size40">
<DescriptionList>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>Details</DescriptionListDetails>
</DescriptionListSet>
</DescriptionList>
</Box>
</Box>
</Box>
<Box>
<Box display="flex" width="100%" justifyContent="space-between" alignItems="flex-start">
<Heading as="h2" variant="heading20">
Heading
</Heading>
<Button variant="secondary">Label</Button>
</Box>
<Box maxWidth="size80">
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ex risus. Aenean at ante id lectus
faucibus hendrerit a fringilla lorem. Pellentesque faucibus sit amet dolor vitae lacinia.
</Paragraph>
</Box>
<Table>
<THead>
<Tr>
<Th>Header</Th>
<Th>Header</Th>
<Th>Header</Th>
</Tr>
</THead>
<TBody>
<Tr>
<Td>Content</Td>
<Td>Content</Td>
<Td>Content</Td>
</Tr>
<Tr>
<Td>Content</Td>
<Td>Content</Td>
<Td>Content</Td>
</Tr>
<Tr>
<Td>Content</Td>
<Td>Content</Td>
<Td>Content</Td>
</Tr>
</TBody>
</Table>
</Box>
</Box>
</Box>
</Box>Object details give customers a primarily read-only view of the properties of an object, such as a message log or sent email.
If the customer is primarily editing information, use the Settings page instead.
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 sentence case for headers (“Message date” not “Message Date”).
- Use a Description List to define relationships between a property and its label.
- Use Tables to organize data that are meant to be compared.
Related
<Box paddingX="space100" paddingTop="space130" paddingBottom="space160">
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb aria-label={useUID()}>
<BreadcrumbItem href="#">Voice</BreadcrumbItem>
<BreadcrumbItem href="#">Calls</BreadcrumbItem>
</Breadcrumb>
</PageHeaderSetting>
<PageHeaderDetails>
<PageHeaderHeading>Call details</PageHeaderHeading>
<PageHeaderActions>
<Button variant="secondary">Give call quality feedback</Button>
</PageHeaderActions>
</PageHeaderDetails>
<PageHeaderInPageNavigation>
<InPageNavigation aria-label={useUID()}>
<InPageNavigationItem href="#" currentPage>
Overview
</InPageNavigationItem>
<InPageNavigationItem href="#">Insights summary</InPageNavigationItem>
</InPageNavigation>
</PageHeaderInPageNavigation>
</PageHeader>
<Box display="flex" flexDirection="column">
<Box display="flex" flexDirection="column" rowGap="space130">
<Box>
<Heading as="h2" variant="heading20">
Properties
</Heading>
<Box display="flex" columnGap="space70" width="size80">
<Box width="size40">
<DescriptionList>
<DescriptionListSet>
<DescriptionListTerm>Message SID</DescriptionListTerm>
<DescriptionListDetails>MG48n1d86b68737525hfd84w91dah0w3088n</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Message service</DescriptionListTerm>
<DescriptionListDetails>N/A</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Created at</DescriptionListTerm>
<DescriptionListDetails>13:42:57 PDT 2020-09-29</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>From</DescriptionListTerm>
<DescriptionListDetails>(606) 609-4293</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>To</DescriptionListTerm>
<DescriptionListDetails>(323) 754-2093</DescriptionListDetails>
</DescriptionListSet>
</DescriptionList>
</Box>
<Box width="size40">
<DescriptionList>
<DescriptionListSet>
<DescriptionListTerm>Direction</DescriptionListTerm>
<DescriptionListDetails>Incoming</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>API endpoint</DescriptionListTerm>
<DescriptionListDetails>N/A</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Message segments</DescriptionListTerm>
<DescriptionListDetails>1</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Encoding</DescriptionListTerm>
<DescriptionListDetails>N/A</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>
<Box display="flex" height="space60" columnGap="space20">
Term
<Button variant="primary_icon" size="reset">
<InformationIcon decorative={false} title="what are terms?" />
</Button>
</Box>
</DescriptionListTerm>
<DescriptionListDetails>$0.0075</DescriptionListDetails>
</DescriptionListSet>
</DescriptionList>
</Box>
</Box>
<DescriptionList>
<DescriptionListSet>
<DescriptionListTerm>Term</DescriptionListTerm>
<DescriptionListDetails>
<Box
backgroundColor="colorBackground"
maxWidth="size80"
padding="space50"
borderRadius="borderRadius20"
>
<Text as="span" fontFamily="fontFamilyCode">
Want to know what a day in the life of a Robotics Engineer is like? Join UAT tomorrow at 4PM MST
to learn about our innovative degrees. Registration is free but space is limited. Sign up here:
</Text>
</Box>
</DescriptionListDetails>
</DescriptionListSet>
</DescriptionList>
</Box>
<Box>
<Heading as="h2" variant="heading20">
Errors and warnings
</Heading>
<Table>
<THead>
<Tr>
<Th>Code</Th>
<Th>Type</Th>
<Th>Description</Th>
</Tr>
</THead>
<TBody>
<Tr>
<Td>
<Box display="flex" columnGap="space30">
<WarningIcon decorative={false} title="warning" color="colorTextIconWarning" />
<Text as="span" fontWeight="fontWeightSemibold">
11200 HTTP retrieval failure
</Text>
</Box>
</Td>
<Td>Warning</Td>
<Td>Twilio’s servers were unable to fetch a non-error response from the designated URL.</Td>
</Tr>
</TBody>
</Table>
</Box>
</Box>
</Box>
</Box>At the top of the page, add a page heading using the format “[Object name] details” for a generic object, or the name of the object if it’s unique or set by the customer. For example, “Call details” or “test audience.”
The full header should be responsive to the width of the browser window. Heading and Paragraph should have a max width of $size-80.
Object details should allow a customer to easily scan for the information they’re looking for. Show an overview of an object’s details with a Description List. If there are more than 6 properties, divide the properties into 2 columns.
Below this, group more detailed properties into sections on the page or, if necessary, into Tabs.
Use customer research to inform how to order the content sections on a details page. Show customers the most relevant information first. Use sentence case for property labels (“End time” not “End Time”).
The body should be full width and responsive to the size of the window, while Headings, Paragraphs, and Description Lists should have a max width of $size-80.
Coming soon
Add the “Paste Patterns & Templates” library to your file.