Skip to content
Sapphire UIv4.1.0

Document

Compose a structured document with editorial sections and supporting details. Use these HTML classes for reports, briefs and printable reading surfaces.

Examples

Proposal

JSX usage

Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.

bun add @kongmy-dev/sapphire-ui react react-dom
"use client";

function DocumentProposal() {
  return (
    <article>
      <div className="sp-document-bar">
        <span className="sp-document-mark">S</span>
        <span className="sp-document-wordmark">Sapphire</span>
        <span className="sp-document-bar-meta">Revision 1.0</span>
      </div>
      <div className="sp-document-shell">
        <header className="sp-document-hero">
          <div className="sp-document-eyebrow">Proposal</div>
          <h1>Cloud migration</h1>
          <p className="sp-document-lede">
            A phased delivery with clear milestones.
          </p>
        </header>
        <section
          className="sp-document-section"
          aria-labelledby="proposal-scope"
        >
          <span className="sp-document-section-number">01</span>
          <h2 id="proposal-scope">Scope</h2>
          <p>Assess the platform and plan the migration.</p>
          <a href="#approval">Review approval</a>
        </section>
        <footer className="sp-document-foot">
          Prepared for the platform team.
        </footer>
      </div>
    </article>
  );
}

export default DocumentProposal;
Example CSS

Load these demo styles alongside the package stylesheet for the same layout and surfaces.

.docs-document-preview {
  padding: 0;
  overflow: hidden;
  background: var(--background);
}

.docs-document-scroll {
  max-height: calc(var(--space-1) * 60);
  overflow: auto;
}

.docs-document-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  padding: var(--space-8);
}
HTML markup

Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.

HTML API

CSS-only entry: use native HTML with these shared classes. There is no React component or React props API.

HTML parts
ClassContract
sp-document-shellShared styled HTML part
sp-document-barShared styled HTML part
sp-document-markShared styled HTML part
sp-document-wordmarkShared styled HTML part
sp-document-bar-separatorShared styled HTML part
sp-document-crumbShared styled HTML part
sp-document-bar-metaShared styled HTML part
sp-document-pillShared styled HTML part
sp-document-eyebrowShared styled HTML part
sp-document-heroShared styled HTML part
sp-document-ledeShared styled HTML part
sp-document-hero-metaShared styled HTML part
sp-document-sectionShared styled HTML part
sp-document-section-numberShared styled HTML part
sp-document-cardShared styled HTML part
sp-document-card-iconShared styled HTML part
sp-document-footShared styled HTML part
sp-document-mutedShared styled HTML part
sp-document-ruleShared styled HTML part
sp-document-figureShared styled HTML part
Supported data attributes
Attribute / value
data-sticky
data-variant="primary"
data-variant="on-dark"
data-tabular
data-tone="positive"
data-tone="negative"

Setup

bun add @kongmy-dev/sapphire-ui

For an app using package components throughout, load the full stylesheet once. Add this component import where you use it.

import "@kongmy-dev/sapphire-ui/sapphire.css";

Mixing package and vendored components? Follow application setup.

Search documentation