Density

Content

Content renders prose-like children with Density spacing, typography, color variables, and a centered readable measure. Use it for previews, descriptions, and other rich text blocks inside product surfaces.

Release notes

Typography

Headings

Keep hierarchy clear

Even in dense product surfaces
With a compact final level

Density components keep compact product text readable inside dense panels, previews, and editorial surfaces. Read more about Content, press ⌘K, or inspect the ready status.

  • Shared spacing for paragraphs and lists
  • Theme-aware headings, links, and body copy
  1. Write the update
  2. Review it before publishing
Keep rich text readable without making the surrounding product feel editorial.
pnpm --filter density-www test
Release preview
Release preview image
AreaStatus
DocumentationReady
import { Content, View } from "density-base-ui";

export default function ContentExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <Content size="sm">
        <h1>Release notes</h1>
        <h2>Typography</h2>
        <h3>Headings</h3>
        <h4>Keep hierarchy clear</h4>
        <h5>Even in dense product surfaces</h5>
        <h6>With a compact final level</h6>
        <p>
          Density components keep compact product text readable inside dense
          panels, previews, and editorial surfaces.{" "}
          <a href="#content">Read more</a> about <code>Content</code>, press{" "}
          <kbd>⌘K</kbd>, or inspect the <samp>ready</samp> status.
        </p>
        <ul>
          <li>Shared spacing for paragraphs and lists</li>
          <li>Theme-aware headings, links, and body copy</li>
        </ul>
        <ol>
          <li>Write the update</li>
          <li>Review it before publishing</li>
        </ol>
        <blockquote>
          Keep rich text readable without making the surrounding product feel
          editorial.
        </blockquote>
        <pre>
          <code>pnpm --filter density-www test</code>
        </pre>
        <figure>
          <img
            alt="Release preview"
            src="data:image/svg+xml,%3C%73vg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 240'%3E%3C/%73vg%3E"
          />
          <figcaption>Release preview image</figcaption>
        </figure>
        <table>
          <thead>
            <tr>
              <th>Area</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Documentation</td>
              <td>Ready</td>
            </tr>
          </tbody>
        </table>
        <hr />
        <video controls aria-label="Release walkthrough" />
        <iframe title="Release preview" />
      </Content>
    </View>
  );
}

As

Article content

Content can render as a semantic element.

import { Content, Skeleton } from "density-base-ui";

export default function ContentAsExample() {
  return (
    <Content as="article">
      <h3>Article content</h3>
      <p>Content can render as a semantic element.</p>
      <Skeleton style={{ height: "5rem", width: "100%" }} />
    </Content>
  );
}

Emphasis

Primary content

Primary emphasis keeps the main message readable.

Secondary content

Secondary emphasis supports supporting details.

import { Content, Skeleton, View } from "density-base-ui";

export default function ContentEmphasisExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <Content emphasis="primary">
        <h3>Primary content</h3>
        <p>Primary emphasis keeps the main message readable.</p>
        <Skeleton style={{ height: "5rem", width: "100%" }} />
      </Content>
      <Content emphasis="secondary">
        <h3>Secondary content</h3>
        <p>Secondary emphasis supports supporting details.</p>
        <Skeleton style={{ height: "5rem", width: "100%" }} />
      </Content>
    </View>
  );
}

Size

2xs content

The smallest prose scale.

xs content

A compact prose scale.

Small content

A small prose scale.

Medium content

The default prose scale.

Large content

A large prose scale.

xl content

An extra-large prose scale.

2xl content

A two-times large prose scale.

3xl content

A three-times large prose scale.

import { Content, Skeleton, View } from "density-base-ui";

export default function ContentSizeExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <Content size="2xs">
        <h3>2xs content</h3>
        <p>The smallest prose scale.</p>
        <Skeleton style={{ width: "100%" }} />
      </Content>
      <Content size="xs">
        <h3>xs content</h3>
        <p>A compact prose scale.</p>
        <Skeleton style={{ width: "100%" }} />
      </Content>
      <Content size="sm">
        <h3>Small content</h3>
        <p>A small prose scale.</p>
        <Skeleton style={{ width: "100%" }} />
      </Content>
      <Content size="md">
        <h3>Medium content</h3>
        <p>The default prose scale.</p>
        <Skeleton style={{ width: "100%" }} />
      </Content>
      <Content size="lg">
        <h3>Large content</h3>
        <p>A large prose scale.</p>
        <Skeleton style={{ width: "100%" }} />
      </Content>
      <Content size="xl">
        <h3>xl content</h3>
        <p>An extra-large prose scale.</p>
        <Skeleton style={{ width: "100%" }} />
      </Content>
      <Content size="2xl">
        <h3>2xl content</h3>
        <p>A two-times large prose scale.</p>
        <Skeleton style={{ width: "100%" }} />
      </Content>
      <Content size="3xl">
        <h3>3xl content</h3>
        <p>A three-times large prose scale.</p>
        <Skeleton style={{ width: "100%" }} />
      </Content>
    </View>
  );
}