Design System/Blocks/Detail Screen

Detail Screen

A full entity detail page combining a page heading, description list, team roster, contact info, and activity feed.

Block

Page Heading · Description List · Activity Feed · Avatar

When To Use

  • Use Detail Screen when you need a composed screen-level pattern and want the structural decisions made before you tune the visuals.
  • Start from the example whose layout and information hierarchy already match the workflow you are building.
  • Review the examples below to compare density, framing, and emphasis before copying one into production code.

When Not To Use

  • Do not use Detail Screen when the page structure is still exploratory; start with smaller primitives if the workflow is not stable yet.
  • Do not copy a full-screen pattern unchanged when only one fragment of the layout is relevant to the task.

Accessibility Notes

  • Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
  • Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
  • Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Included examples

Person detail page

Variation points

Compare layout, content density, and emphasis across the included examples before copying an implementation.

Example Code

import { Mail, Phone, MapPin, Calendar, Edit, MessageSquare } from "lucide-react";
import { PageHeading } from "@hilum/ui";
import { DescriptionList } from "@hilum/ui";
import { ActivityFeed } from "@hilum/ui";
import { Avatar, AvatarFallback } from "@hilum/ui";
import { Badge } from "@hilum/ui";

const PERSON = {
  name: "Tom Cook",
  role: "Engineering Manager",
  department: "Engineering",
  email: "tom@example.com",
  phone: "+1 (555) 012-3456",
  location: "San Francisco, CA",
  joined: "January 2021",
  status: "Active",
};

// ...trimmed for docs

Detail Screen · Person profile

Person detail page

Page heading, details, team members, contact, and activity

Tom Cook

Active
tom@example.com
San Francisco, CA
Joined January 2021

Details

Full name
Tom Cook
Email
tom@example.com
Phone
+1 (555) 012-3456
Location
San Francisco, CA
Department
Engineering
Status
Active

Team

SC

Sophie Chen

Senior Engineer

JP

James Park

Engineer

MT

Mia Torres

Engineer

Contact

tom@example.com+1 (555) 012-3456

Activity

  • Sophie Chen left a comment: "Tom has been leading the platform migration with exceptional clarity."

  • HR System updated role to Engineering Manager

  • Tom Cook joined the team.