RecordHeader

<caos-record-header>

the object mark, record title, key fields, status, and tags at the head of a record

May be placed on a record page.

Inputs

Name	Attribute	Description	Type	Default	Required
`objectLabel`	`object-label`, markup only	The object type — Order, Account, Case. Drawn as the DOMINANT heading above the record name. Hidden when empty.	text	none declared	Optional
`heading`	`heading`, markup only	The record’s own name, drawn beneath the object type in the accent colour. This is the , so it is also the surface’s accessible heading.	text	none declared	Required
`noIcon`	`no-icon`, markup only	Drop the object-icon tile entirely, leaving no gap where it was. For a band that identifies the record by words alone. The icon slot still exists for anything that opts back in.	boolean	false	Optional

Events

This piece raises no events.

Slots

Name	What goes in it
`icon`	The object’s mark, inside a 44px accent tile. Falls back to a neutral document glyph when nothing is supplied, and is suppressed entirely by no-icon.
`status`	Inline beside the record name — a StatusPill, a Tag, or several of them.
`fields`	The key read-only fields under the name. KeyValueRows, or a DetailSection.
`actions`	The record-level controls, pinned right. Drops to its own full-width row under 560px.

Styling hooks

Design token	What it controls
`--caos-color-record-header-stripe`	The 3px stripe across the top of the card. Named for this component rather than for a role — listed here because that is a fact worth seeing, not one worth hiding.
`--caos-color-surface`	The fill of the card.
`--caos-color-border-strong`	The card’s border on the other three edges.
`--caos-shadow-card`	The card’s elevation.
`--caos-radius-lg`	The corner radius of the card.
`--caos-color-accent`	The ink of the record name.
`--caos-color-accent-soft`	The fill of the object-icon tile.
`--caos-color-accent-strong`	The glyph inside the object-icon tile.
`--caos-font-display`	The typeface of both the object type and the record name.

Methods

Nothing else drives this piece by calling it.

Readable state

Nothing on this piece can be read back.

Styling parts

Part	Which piece of it	When it is there
`::part(header)`	the header block	Always
`::part(icon)`	the object glyph	Always
`::part(object-label)`	the object name above the title	Always
`::part(title)`	the record name	Always
`::part(status)`	the area beside the title a pill is slotted into	Always
`::part(fields)`	the row of highlight fields	Always
`::part(actions)`	the action group at the right	Always

When to use it

The top of a surface that is about ONE record, where a person has to see what kind of thing it is, which one it is, what state it is in, and what they can do to it, without reading further down.

What to use instead

PageHeader — The surface is a LIST or an overview rather than one record. That one has an eyebrow, a record count and a description; it has no object mark, no status line and no field band, because a set of records has none of those.
DetailSection — You are heading a block of fields further down the record rather than the record itself.
Inspector — The record is being shown beside something else in a side panel rather than being the surface. That one brings its own heading and close control.
StatusPill — All you need is the state badge. It goes INSIDE this piece’s status slot rather than instead of it.

Accessibility

The record name is a real

, so the surface has a heading without the author adding one, and the icon tile is marked aria-hidden so a decorative object mark is not read out. The status, fields and actions regions vanish from the layout when empty, so an unused slot announces nothing. Left to the author: the object type is drawn as plain text rather than as a heading element, so it is read as part of the banner and not as a level in the document outline — if the object type needs to be announced first, it belongs in the heading text. Icon-only action controls still need names.

Examples

A record

The two text inputs on their own — the least a record header needs to identify a record.

{
  "id": "example",
  "section": "A record",
  "columns": 1,
  "items": [
    {
      "id": "record_header_1",
      "type": "component",
      "key": "record_header",
      "inputs": {
        "object_label": "Order",
        "heading": "ORD-4471 — Meridian Supply"
      }
    }
  ]
}

<caos-record-header object-label="Order" heading="ORD-4471 — Meridian Supply"></caos-record-header>

Status, key fields and actions

Every named slot filled — the shape a real record page uses, where the state and the two or three fields that matter are readable without scrolling.

{
  "id": "example",
  "section": "Status, key fields and actions",
  "columns": 1,
  "items": [
    {
      "id": "record_header_1",
      "type": "component",
      "key": "record_header",
      "inputs": {
        "object_label": "Order",
        "heading": "ORD-4471 — Meridian Supply"
      },
      "children": [
        {
          "id": "status_pill_2",
          "type": "component",
          "key": "status_pill",
          "inputs": {
            "intent": "info"
          },
          "slot": "status",
          "children": [
            "In review"
          ]
        },
        {
          "id": "tag_3",
          "type": "component",
          "key": "tag",
          "slot": "status",
          "children": [
            "Rush"
          ]
        },
        {
          "id": "key_value_row_4",
          "type": "component",
          "key": "key_value_row",
          "inputs": {
            "label": "Account",
            "value": "Meridian Supply"
          },
          "slot": "fields"
        },
        {
          "id": "key_value_row_5",
          "type": "component",
          "key": "key_value_row",
          "inputs": {
            "label": "Total",
            "value": "$12,400"
          },
          "slot": "fields"
        },
        {
          "id": "button_6",
          "type": "component",
          "key": "button",
          "inputs": {
            "variant": "secondary"
          },
          "slot": "actions",
          "children": [
            "Clone"
          ]
        },
        {
          "id": "button_7",
          "type": "component",
          "key": "button",
          "inputs": {
            "variant": "primary"
          },
          "slot": "actions",
          "children": [
            "Submit"
          ]
        }
      ]
    }
  ]
}

<caos-record-header object-label="Order" heading="ORD-4471 — Meridian Supply">
  <caos-status-pill slot="status" intent="info">In review</caos-status-pill>
  <caos-tag slot="status">Rush</caos-tag>
  <caos-key-value-row slot="fields" label="Account" value="Meridian Supply"></caos-key-value-row>
  <caos-key-value-row slot="fields" label="Total" value="$12,400"></caos-key-value-row>
  <caos-button slot="actions" variant="secondary">Clone</caos-button>
  <caos-button slot="actions" variant="primary">Submit</caos-button>
</caos-record-header>

Without the object mark

The same header with the icon tile suppressed — it is removed from the flow rather than blanked, so the text starts at the card edge with no gap where the tile was.

{
  "id": "example",
  "section": "Without the object mark",
  "columns": 1,
  "items": [
    {
      "id": "record_header_1",
      "type": "component",
      "key": "record_header",
      "inputs": {
        "object_label": "Account",
        "heading": "Meridian Supply",
        "no_icon": true
      },
      "children": [
        {
          "id": "status_pill_2",
          "type": "component",
          "key": "status_pill",
          "inputs": {
            "intent": "success"
          },
          "slot": "status",
          "children": [
            "Customer"
          ]
        },
        {
          "id": "key_value_row_3",
          "type": "component",
          "key": "key_value_row",
          "inputs": {
            "label": "Owner",
            "value": "Dana Whitfield"
          },
          "slot": "fields"
        }
      ]
    }
  ]
}

<caos-record-header object-label="Account" heading="Meridian Supply" no-icon>
  <caos-status-pill slot="status" intent="success">Customer</caos-status-pill>
  <caos-key-value-row slot="fields" label="Owner" value="Dana Whitfield"></caos-key-value-row>
</caos-record-header>