DetailLayout

A page about one record: its content beside the facts about it.

Overview

One quote, build or member, with its content in the main column and its facts in the aside.

Record

Do

Quote Q-1042

Naledi Mokoena

Cover

Life cover of R 1 500 000, to age 65.

import { Body, Button, Card, DetailLayout, KeyValue, KeyValueList } from "@hackcove/ui";

<DetailLayout
  title="Quote Q-1042"
  subtitle="Naledi Mokoena"
  actions={<Button variant="outline">Edit</Button>}
  aside={
    <Card title="Details">
      <KeyValueList>
        <KeyValue label="Status">Sent</KeyValue>
        <KeyValue label="Premium">R 1 240 / mo</KeyValue>
      </KeyValueList>
    </Card>
  }
>
  <Card title="Cover">
    <Body as="p">Life cover of R 1 500 000, to age 65.</Body>
  </Card>
</DetailLayout>
The record's content is the main column; the facts about it go in aside.
Don't

Quote Q-1042

Naledi Mokoena

Cover

Life cover of R 1 500 000, to age 65.

Details

Status
Sent
Premium
R 1 240 / mo
import { Body, Button, Card, KeyValue, KeyValueList, ListLayout } from "@hackcove/ui";

<ListLayout
  title="Quote Q-1042"
  subtitle="Naledi Mokoena"
  actions={<Button variant="outline">Edit</Button>}
>
  <Card title="Cover">
    <Body as="p">Life cover of R 1 500 000, to age 65.</Body>
  </Card>
  <Card title="Details">
    <KeyValueList>
      <KeyValue label="Status">Sent</KeyValue>
      <KeyValue label="Premium">R 1 240 / mo</KeyValue>
    </KeyValueList>
  </Card>
</ListLayout>
ListLayout has no aside, so the facts become one more block under the content. Use DetailLayout for a record.

Full page

Hack Cove

Quote Q-1042

Naledi Mokoena

Cover

Life cover of R 1 500 000, to age 65.

Notes

The client asked to be debited on the 25th.

import {
  AppShell,
  Body,
  Button,
  Card,
  DetailLayout,
  KeyValue,
  KeyValueList,
  NavTabs,
} from "@hackcove/ui";

<AppShell
  brand={<a href="#">Hack Cove</a>}
  nav={
    <NavTabs
      label="Main"
      items={[
        { label: "Quotes", href: "#quotes", active: true },
        { label: "Clients", href: "#clients" },
      ]}
    />
  }
>
  <DetailLayout
    title="Quote Q-1042"
    subtitle="Naledi Mokoena"
    actions={<Button variant="outline">Edit</Button>}
    aside={
      <Card title="Details">
        <KeyValueList>
          <KeyValue label="Status">Sent</KeyValue>
          <KeyValue label="Premium">R 1 240 / mo</KeyValue>
        </KeyValueList>
      </Card>
    }
  >
    <Card title="Cover">
      <Body as="p">Life cover of R 1 500 000, to age 65.</Body>
    </Card>
    <Card title="Notes">
      <Body as="p">The client asked to be debited on the 25th.</Body>
    </Card>
  </DetailLayout>
</AppShell>
A whole record page: the shell with its brand and nav, then the layout with the record in children and its facts in aside.

Usage

  • The record's content is the children, in the main two thirds; they are spaced as a Stack, so give each block its own Card.
  • The facts about the record go in aside, in the third beside it: a Card with a KeyValueList, a status, the people on it.
  • Both columns are required: with nothing for the aside, use ListLayout.
  • From lg the aside sits beside the content; below it, it stacks under the content.
  • The header props are the same as ListLayout: breadcrumbs, title, subtitle, actions, tabs.

Accessibility

  • The title is the page's h1.
  • The aside is an <aside>, a complementary landmark; the main column is a plain div.
  • In the DOM the content comes first and the aside second, so that is the reading and tab order on every screen.

API

DetailLayout

A detail page: header, then children (two thirds from lg) beside aside (one third), which stacks below on a smaller screen.

actions

Right of the title on sm and up, below it on a phone.

Type
ReactNode
aside required
Type
ReactNode
breadcrumbs

A Breadcrumbs above the title.

Type
ReactNode
subtitle
Type
ReactNode
tabs

A NavTabs (or similar) under the title.

Type
ReactNode
title required
Type
ReactNode