Preview

Detail screen pack

Use detail screens that already know how to frame context and action.

Detail screens package metadata summary, timeline, and action placement for the page type.

Area	Purpose	Pattern
Summary	Core facts	Description list
Activity	Recent changes	Timeline
Related	Linked work	Card grid

Core pattern: Header, description list, related cards, and activity surface.

Included patterns

• Entity summary

• Action cluster

• Related items rail

Variants

Project detail

Entity page with metadata and activity.

Customer detail

Customer record with lifecycle context.

Incident detail

Operational detail page with timelines.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { AppBar, Card, DescriptionList, Fieldset, Heading, PageHeader, PageLayout, Sidebar, Stack, Table, Text } from '@dryui/ui';
</script>
<PageLayout.Root fullHeight>
  <PageLayout.Header sticky>
    <AppBar.Root>
      <AppBar.Title>Detail screen pack</AppBar.Title>
    </AppBar.Root>
  </PageLayout.Header>
  <PageLayout.Sidebar sticky>
    <Sidebar.Root style="height: 100%;">
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.Item active href="#">Summary</Sidebar.Item>
            <Sidebar.Item href="#">Activity</Sidebar.Item>
            <Sidebar.Item href="#">Files</Sidebar.Item>
            <Sidebar.Item href="#">Related</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Use detail screens that already know how to frame context and action.</PageHeader.Title>
          <PageHeader.Description>Detail screens package metadata summary, timeline, and action placement for the page type.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.Head>Area</Table.Head>
              <Table.Head>Purpose</Table.Head>
              <Table.Head>Pattern</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.Cell>Summary</Table.Cell>
              <Table.Cell>Core facts</Table.Cell>
              <Table.Cell>Description list</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Activity</Table.Cell>
              <Table.Cell>Recent changes</Table.Cell>
              <Table.Cell>Timeline</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Related</Table.Cell>
              <Table.Cell>Linked work</Table.Cell>
              <Table.Cell>Card grid</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Root>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Core pattern</DescriptionList.Term>
        <DescriptionList.Description>Header, description list, related cards, and activity surface.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Entity summary</Text>
        <Text as="p">• Action cluster</Text>
        <Text as="p">• Related items rail</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>

DRYui