Returnless UI

Page ​

Use to build the outer wrapper of a page, including the page title and associated actions.

Props
navigation?:
Component
Defaults to unknown
Navigation component to render in the left column
size?:
"default" | "compact"
Defaults to unknown
Size of the page

Usage ​

The page title

The page title

Notifications

You have 3 unread messages.

Card content
js
<script lang="ts" setup>
import {
  Button,
  ButtonGroup,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardSection,
  Page,
  PageDescription, 
  PageHeader,
  PageTitle,
} from '@returnless/focus-ui';
</script>

<template>
  <Page>
    <PageHeader v-bind:back-action="{ content: 'Overview', href: '#' }">
      <PageTitle>The page title</PageTitle>
      <PageDescription>The page title</PageDescription>
      <template v-slot:page-header-actions>
        <ButtonGroup>
          <Button variant="secondary">Secondary action</Button>
          <Button>Primary action</Button>
        </ButtonGroup>
      </template>
    </PageHeader>
    <Card>
      <CardHeader>
        <CardTitle>Notifications</CardTitle>
        <CardDescription>You have 3 unread messages.</CardDescription>
      </CardHeader>
      <CardSection>
        <div>Card content</div>
      </CardSection>
    </Card>
  </Page>
</template>

Page with navigation ​

The page title

The page title

Notifications

You have 3 unread messages.

Card content
js
<script lang="ts" setup>
import {
  Button,
  ButtonGroup,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardSection,
  Page,
  PageBody,
  PageDescription, 
  PageHeader,
  PageTitle,
  Navigation,
  NavigationItem,
  NavigationSection,
} from '@returnless/focus-ui';
</script>

<template>
  <Page>
    <template #page-navigation>
      <Navigation>
        <NavigationSection>
          <NavigationItem active href="#">Navigation item 1</NavigationItem>
          <NavigationItem href="#">Navigation item 2</NavigationItem>
          <NavigationItem href="#">Navigation item 3</NavigationItem>
        </NavigationSection>
      </Navigation>
    </template>
    <PageHeader :back-action="{ content: 'Overview', href: '#' }">
      <PageTitle>The page title</PageTitle>
      <PageDescription>The page title</PageDescription>
      <template v-slot:page-header-actions>
        <ButtonGroup>
          <Button variant="secondary">Secondary action</Button>
          <Button>Primary action</Button>
        </ButtonGroup>
      </template>
    </PageHeader>
    <PageBody>
      <Card>
        <CardHeader>
          <CardTitle>Notifications</CardTitle>
          <CardDescription>You have 3 unread messages.</CardDescription>
        </CardHeader>
        <CardSection>
          <div>Card content</div>
        </CardSection>
      </Card>
    </PageBody>
  </Page>
</template>

Best practices ​

The page component should:

  • Always provide a title for the page header.
  • Always provide breadcrumbs when a page has a parent page.
  • Be organized around a primary activity. If that primary activity is a single action, provide it as a primary button in the page header.
  • Provide other page-level actions as secondary actions in the page header.
  • When the page represents an object of a certain type, provide pagination links to the previous and next object of the same type.

Content guidelines ​

Title ​

Titles should:

  • Describe the page in as few words as possible.
  • Be the name of the object type (pluralized) when the age is a list of objects. For a list of orders, the page title should be "Orders".
  • Not be truncated.

The content of each breadcrumb link should be the title of the page to which it links.

Page header actions ​

Page header action labels should be:

  • Clear and predictable: users should be able to anticipate what will happen when they click a page action. Never deceive users by mislabeling an action.
  • Action-led: they should always lead with a strong verb that encourages action. To provide enough context to users, use the {verb + noun} format.