Skip to contentSkip to navigationSkip to topbar
Figma
Star

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>

About Object details

About Object details page anchor

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(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 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.

How to use this template

How to use this template page anchor
<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>
Page header page anchor

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(link takes you to an external page)” library to your file.