Skip to contentSkip to navigationSkip to topbar
Figma
Star

Objects list

The Objects list page template shows a list of unique items for when a customer needs to perform an action on the items.


<Box paddingX="space100" paddingTop="space130" paddingBottom="space160">
  <PageHeader size="default">
    <PageHeaderSetting>
      <Breadcrumb aria-label={useUID()}>
        <BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
        <BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
        <BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
      </Breadcrumb>
    </PageHeaderSetting>
    <PageHeaderDetails>
      <PageHeaderHeading>Objects</PageHeaderHeading>
      <PageHeaderActions>
        <ButtonGroup>
          <Button variant="secondary">Label</Button>
          <Button variant="primary">Label</Button>
        </ButtonGroup>
      </PageHeaderActions>
      <PageHeaderParagraph>
        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.
      </PageHeaderParagraph>
    </PageHeaderDetails>
  </PageHeader>
  <Box>
    <Box display="flex" flexDirection="column" rowGap="space50" marginBottom="space90">
      <Box display="flex" columnGap="space80" alignItems="flex-end">
        <Box minWidth="size30" maxWidth="size60" width="100%" display="flex" columnGap="space50">
          <Box width="100%">
            <Label htmlFor={criteria1}>Label</Label>
            <Select id={criteria1}>1</Select>
          </Box>
          <Box width="100%">
            <Label htmlFor={criteria2}>Label</Label>
            <Select id={criteria2}>2</Select>
          </Box>
          <Box width="100%">
            <Label htmlFor={criteria3}>Label</Label>
            <Select id={criteria3}>3</Select>
          </Box>
        </Box>

        <Box
          height="100%"
          display="flex"
          width="size20"
          justifyContent="flex-start"
          alignItems="flex-end"
          whiteSpace="nowrap"
        >
          <ButtonGroup>
            <Button variant="primary">
              <FilterIcon decorative />
              Apply
            </Button>
            <Button variant="secondary">Clear all</Button>
          </ButtonGroup>
        </Box>
      </Box>
      <Separator orientation="horizontal" />
      <Box display="flex" columnGap="space80" maxWidth="size110">
        <Box maxWidth="size40">
          <Input
            type="text"
            insertBefore={<SearchIcon decorative color="colorTextPrimary" />}
            placeholder="Search"
            aria-label={useUID()}
          />
        </Box>
        <Separator orientation="vertical" />
        <Box>
          <ButtonGroup>
            <Button variant="secondary">
              <DownloadIcon decorative />
              Export
            </Button>
            <Button variant="secondary" size="icon">
              <MoreIcon decorative={false} title="menu" />
            </Button>
          </ButtonGroup>
        </Box>
      </Box>
    </Box>
    <DataGrid aria-label="label1">
      <DataGridHead>
        <DataGridRow>
          <DataGridHeader width="52px">
            <Checkbox>
              <ScreenReaderOnly>label</ScreenReaderOnly>
            </Checkbox>
          </DataGridHeader>
          <DataGridHeader>
            <Box display="flex" columnGap="space20">
              Header
              <UnsortedIcon decorative={false} title="sort column" />
            </Box>
          </DataGridHeader>
          <DataGridHeader>
            <Box display="flex" columnGap="space20">
              Header
              <UnsortedIcon decorative={false} title="sort column" />
            </Box>
          </DataGridHeader>
          <DataGridHeader>
            <Box display="flex" columnGap="space20">
              Header
              <UnsortedIcon decorative={false} title="sort column" />
            </Box>
          </DataGridHeader>
          <DataGridHeader>
            <Box display="flex" columnGap="space20" justifyContent="flex-end">
              Header
              <UnsortedIcon decorative={false} title="sort column" />
            </Box>
          </DataGridHeader>
        </DataGridRow>
      </DataGridHead>
      <DataGridBody>
        <DataGridRow>
          <DataGridCell>
            <Checkbox>
              <ScreenReaderOnly>label</ScreenReaderOnly>
            </Checkbox>
          </DataGridCell>
          <DataGridCell>
            <Anchor href="#">Anchor</Anchor>
          </DataGridCell>
          <DataGridCell>Content</DataGridCell>
          <DataGridCell>Content</DataGridCell>
          <DataGridCell textAlign="right">Content</DataGridCell>
        </DataGridRow>
        <DataGridRow>
          <DataGridCell>
            <Checkbox>
              <ScreenReaderOnly>label</ScreenReaderOnly>
            </Checkbox>
          </DataGridCell>
          <DataGridCell>
            <Anchor href="#">Anchor</Anchor>
          </DataGridCell>
          <DataGridCell>Content</DataGridCell>
          <DataGridCell>Content</DataGridCell>
          <DataGridCell textAlign="right">Content</DataGridCell>
        </DataGridRow>
        <DataGridRow>
          <DataGridCell>
            <Checkbox>
              <ScreenReaderOnly>label</ScreenReaderOnly>
            </Checkbox>
          </DataGridCell>
          <DataGridCell>
            <Anchor href="#">Anchor</Anchor>
          </DataGridCell>
          <DataGridCell>Content</DataGridCell>
          <DataGridCell>Content</DataGridCell>
          <DataGridCell textAlign="right">Content</DataGridCell>
        </DataGridRow>
      </DataGridBody>
    </DataGrid>
  </Box>
</Box>

About Objects list

About Objects list page anchor

An Objects list shows a list of unique items or records (objects), such as logs or contacts. The page can include search and filtering to help customers find an item they’re looking for, and bulk actions like export or delete.

Use an Objects list when a customer needs to:

  • View objects of a single type
  • Find specific objects quickly so they can view more object details, edit, or delete them
  • Create a new object of this type
  • Perform bulk actions on multiple objects

If the customer is primarily editing information, use the Settings page instead.

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="#">Phone numbers</BreadcrumbItem>
        <BreadcrumbItem href="#">Manage</BreadcrumbItem>
      </Breadcrumb>
    </PageHeaderSetting>
    <PageHeaderDetails>
      <PageHeaderHeading>Verified caller IDs</PageHeaderHeading>
      <PageHeaderActions>
        <Button variant="primary">Add caller ID</Button>
      </PageHeaderActions>
      <PageHeaderParagraph>
        Use numbers you own as caller ID or the &quot;To&quot; number for outbound calls and messages. Phone numbers
        you buy from Twilio or port to Twilio can always be used as caller IDs.
      </PageHeaderParagraph>
    </PageHeaderDetails>
  </PageHeader>
  <Box>
    <Box maxWidth="size70" marginBottom="space90" display="flex" columnGap="space80" alignItems="flex-end">
      <Box maxWidth="size90" display="flex" columnGap="space50">
        <Box width="100%">
          <Label htmlFor={input1}>Phone number</Label>
          <Input type="text" id={input1} />
        </Box>
        <Box width="100%">
          <Label htmlFor={input2}>Friendly name</Label>
          <Input type="text" id={input2} />
        </Box>
      </Box>
      <Box display="flex" width="size20" justifyContent="flex-start">
        <ButtonGroup>
          <Button variant="secondary">
            <FilterIcon decorative />
            Apply
          </Button>
          <Button variant="secondary">Clear</Button>
        </ButtonGroup>
      </Box>
    </Box>
    <DataGrid aria-label={useUID()}>
      <DataGridHead>
        <DataGridRow>
          <DataGridHeader width="52px">
            <Checkbox>
              <ScreenReaderOnly>label</ScreenReaderOnly>
            </Checkbox>
          </DataGridHeader>
          <DataGridHeader>
            <Box display="flex" columnGap="space20">
              Phone number
              <UnsortedIcon decorative={false} title="sort column" />
            </Box>
          </DataGridHeader>
          <DataGridHeader>
            <Box display="flex" columnGap="space20">
              Friendly name
              <UnsortedIcon decorative={false} title="sort column" />
            </Box>
          </DataGridHeader>
          <DataGridHeader>
            <Box display="flex" columnGap="space20">
              Actions
              <UnsortedIcon decorative={false} title="sort column" />
            </Box>
          </DataGridHeader>
        </DataGridRow>
      </DataGridHead>
      <DataGridBody>
        <DataGridRow>
          <DataGridCell>
            <Checkbox>
              <ScreenReaderOnly>label</ScreenReaderOnly>
            </Checkbox>
          </DataGridCell>
          <DataGridCell>+1 512 809 4343</DataGridCell>
          <DataGridCell>(512) 809-4343</DataGridCell>
          <DataGridCell>
            <Button variant="destructive_secondary" size="small">
              Delete
            </Button>
          </DataGridCell>
        </DataGridRow>
        <DataGridRow>
          <DataGridCell>
            <Checkbox>
              <ScreenReaderOnly>label</ScreenReaderOnly>
            </Checkbox>
          </DataGridCell>
          <DataGridCell>+86 591 1093 1093</DataGridCell>
          <DataGridCell>+86 591 1093 1093</DataGridCell>
          <DataGridCell>
            <Button variant="destructive_secondary" size="small">
              Delete
            </Button>
          </DataGridCell>
        </DataGridRow>
        <DataGridRow>
          <DataGridCell>
            <Checkbox>
              <ScreenReaderOnly>label</ScreenReaderOnly>
            </Checkbox>
          </DataGridCell>
          <DataGridCell>+1 213 343 1345</DataGridCell>
          <DataGridCell>(213) 343-1345</DataGridCell>
          <DataGridCell>
            <Button variant="destructive_secondary" size="small">
              Delete
            </Button>
          </DataGridCell>
        </DataGridRow>
      </DataGridBody>
    </DataGrid>
  </Box>
</Box>
Page header page anchor

At the top of the page, use the type of object as the page heading. Use the primary action in the header only for adding a new object. Optionally, use text under the heading to explain the primary use of the page.

The full header should be responsive to the width of the browser window. Heading and Paragraph should have a max width of $size-70.

The rest of the page follows the Filter Group pattern and uses a Data Grid. If there’s already a primary action in the page header, make the filter button a secondary button. If there are no interactive cells, use a Table instead of a Data Grid.

If the customer needs to examine each object in more detail, link each object to its Object details page.

The body should be responsive to the width of the browser window.

Coming soon

Add the “Paste Patterns & Templates(link takes you to an external page)” library to your file.