Content

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

Release notes

Density components keep compact product text readable inside dense panels, previews, and editorial surfaces.

Shared spacing for paragraphs and lists
Theme-aware headings, links, and body copy

import { Content } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

export default function ContentExample() {
  return (
    <ExampleStack>
      <Content size="sm">
        <h2>Release notes</h2>
        <p>
          Density components keep compact product text readable inside dense
          panels, previews, and editorial surfaces.
        </p>
        <ul>
          <li>Shared spacing for paragraphs and lists</li>
          <li>Theme-aware headings, links, and body copy</li>
        </ul>
      </Content>
    </ExampleStack>
  );
}

Props

Prop	Attribute	Values	Default
`as`	None	`React.ElementType`	`div`
`emphasis`	`data-dn-emphasis`	`primary`, `secondary`	`primary`
`size`	`data-dn-size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`md`
`children`	None	`ReactNode`	None
Other native HTML props	Mixed	`HTMLAttributes<HTMLElement>`	None
Fixed presentation	`data-dn-presentation`	`content`	`content`

As

Article content

Content can render as a semantic element.

import { Content } 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>
    </Content>
  );
}

Emphasis

Primary content.

Secondary content.

import { Content } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

export default function ContentEmphasisExample() {
  return (
    <ExampleStack>
      <Content emphasis="primary">Primary content.</Content>
      <Content emphasis="secondary">Secondary content.</Content>
    </ExampleStack>
  );
}

Size

2xs content.

xs content.

Small content.

Medium content.

Large content.

xl content.

2xl content.

3xl content.

import { Content } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

export default function ContentSizeExample() {
  return (
    <ExampleStack>
      <Content size="2xs">2xs content.</Content>
      <Content size="xs">xs content.</Content>
      <Content size="sm">Small content.</Content>
      <Content size="md">Medium content.</Content>
      <Content size="lg">Large content.</Content>
      <Content size="xl">xl content.</Content>
      <Content size="2xl">2xl content.</Content>
      <Content size="3xl">3xl content.</Content>
    </ExampleStack>
  );
}