Object header
The head of any detail view says what this is, where it stands and what you can do, in two rows. The Desk request header is the worked example.
The Desk request header
Row one is identity and actions; it never wraps and the title gives way. Row two is one quiet line of facts. Both are built from Comb components, so any detail view can reuse them.
- Key. KbKey: the short identifier, in the code face.
- Status. A lozenge or status select. Shown once, here.
- Title. One line with an ellipsis; two on narrow screens. The tooltip holds the full text.
- Actions. The one gold action, then ghost icon buttons.
- Facts. KbMetaList: channel, person, age, then controls with no dot before them.
When to use
- Use it at the top of any view about one object: a request, a customer, a rule, a flow.
- Put the single gold action in the actions slot; every header action is also in the command palette.
- Keep the status in one place. If people can change it, use a status select, not a lozenge plus a menu.
- Move anything that doesn't fit one line of facts into the details panel.
Keyboard and screen readers
- The title is a real heading, so the view can be reached by heading navigation. It is h2 under the page title.
- A truncated title keeps its full text in the DOM and as a tooltip.
- The facts are a named list; the dots between them are hidden from screen readers.
- Header actions keep their shortcuts through aria-keyshortcuts, and the tab order is key, status, actions, facts.
- Under 860px wide, items marked as wide-only hide rather than wrap.