Metadata List

A compact label-value list for dates, locations, contacts, versions, sources, or file details.

When To Use

Use	Avoid
A compact label-value list for dates, locations, contacts, versions, sources, or file details.	Avoid using this component when the content has a different job or needs a simpler plain-text treatment.
Use tables and metadata lists when people compare values, scan records, sort information, or review evidence.	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

Metadata List
Label	Example value
Source	Replace with the relevant source or note.

Code

CSS Imports

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

Starter Markup

<div class="lds-table-wrap">
  <table class="lds-table lds-table-compact">
    <caption>Metadata List</caption>
    <tbody>
      <tr><th scope="row">Label</th><td>Example value</td></tr>
      <tr><th scope="row">Source</th><td>Replace with the relevant source or note.</td></tr>
    </tbody>
  </table>
</div>

Class Reference

Class	Use
`.lds-table-wrap`	Wraps a table with the Landcare top rule and horizontal scrolling for narrow screens.
`.lds-table`	Applies Landcare table typography, quiet row rules, spacing, and header hierarchy.
`.lds-table-compact`	Reduces cell padding for token tables, metadata, and dense reference data.

Review Notes

Web

Use tables and metadata lists when people compare values, scan records, sort information, or review evidence.

Print

Use captions, source notes, quiet rules, aligned numbers, and enough space for photocopying or projection.

States And Variants

Document loading, empty, filtered, sorted, selected, error, and source-note states.

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.