Page Metadata

A compact control document metadata block for status, approval, owner, version, effective date, and review details.

When To Use

Use	Avoid
A compact control document metadata block for status, approval, owner, version, effective date, and review details.	Avoid using this component when the content has a different job or needs a simpler plain-text treatment.
Use layout sections to create predictable page regions and reusable responsive structure.	Avoid changing approved colours, typography, logo artwork, or class names to create a local style guide.
Use the starter markup as a copy/paste baseline for websites, Ghost HTML blocks, generated pages, or print previews.	Avoid copying placeholder IDs, links, contact details, or image paths without replacing them.

Example

Status: Draft
Approval: Unofficial
Version: 0.1
Last reviewed: 5 July 2026
Owner: Landcare Design System working draft

Code

CSS Imports

@import "@landcare-design-system/css/dist/landcare.css";
@import "@landcare-design-system/css/dist/components.css";

Starter Markup

<dl class="lds-page-metadata" aria-label="Control document metadata">
  <div>
    <dt>Status</dt>
    <dd>Draft</dd>
  </div>
  <div>
    <dt>Approval</dt>
    <dd>Unofficial</dd>
  </div>
  <div>
    <dt>Version</dt>
    <dd>0.1</dd>
  </div>
  <div>
    <dt>Last reviewed</dt>
    <dd>5 July 2026</dd>
  </div>
  <div>
    <dt>Owner</dt>
    <dd>Landcare Design System working draft</dd>
  </div>
</dl>

Class Reference

Class	Use
`.lds-page-metadata`	Styles compact control document metadata for status, approval, owner, version, effective date, and review details.

Control Document Metadata Notes

Metadata	Use	Avoid
Controlled status	Use short values such as Draft, Current, Archived, Superseded, Unofficial, Approved, or For review so readers know whether the document can be relied on.	Avoid long explanations inside the metadata row; put detail in the document body.
Document control	Use for owner, approver, version, effective date, last reviewed date, next review date, source, authority, or approval pathway where that helps readers judge currency and authority.	Avoid implying formal approval, authority, or currency when the page is only a working draft.
Placement	Place directly inside or immediately after the page header, before the main body content. This keeps control information visible before someone acts on the page.	Avoid burying draft, unofficial, superseded, or review status in a footer, changelog, or hidden page metadata.

Review Notes

Web

Use layout sections to create predictable page regions and reusable responsive structure.

Print

Use layout sections as reusable page, flyer, report, slide, and signage regions with consistent margins and hierarchy.

States And Variants

Document compact, spacious, image-led, text-led, and repeated-section variants.

Checklist

Brand colours, typography, and logo use are inherited from the approved master brand.
The first-read message or action is clear.
Labels, headings, links, and alternative text are meaningful.
Keyboard focus, colour contrast, and reading order are covered where the component is interactive.
The component survives its final output: mobile, desktop, Ghost CMS, A4 print, poster, signage, or email.