Block

Pair explanatory copy with a specimen and an optional supporting note.

<Block id="primary-logo">
  <Fragment slot="copy">
    <h2>Primary logo</h2>
    <p>Use the supplied artwork whenever the full name fits.</p>
  </Fragment>
  <Fragment slot="note">
    <p>Never recreate the logotype using live text.</p>
  </Fragment>
  <Fragment slot="content">
    <Panel ratio="16 / 9">
      <Logo width="66%" />
    </Panel>
  </Fragment>
</Block>

Usage

Put prose in the copy slot and the specimen in content. A Fragment assigns content to a named region without adding an HTML wrapper.

<Block>
  <Fragment slot="copy">
    <h2>Primary logo</h2>
    <p>Use the supplied artwork whenever the full name fits.</p>
  </Fragment>
  <Fragment slot="content">
    <Logo />
  </Fragment>
</Block>

The preview adds a note slot for a supporting rule and wraps the logo in a Panel to give the artwork a frame.

Examples

Keep the split layout minimal

Use only copy and content when no supporting note is needed.

<Block>
  <Fragment slot="copy">
    <h2>Primary logo</h2>
    <p>Use the supplied artwork whenever the full name fits.</p>
  </Fragment>
  <Fragment slot="content">
    <Logo />
  </Fragment>
</Block>

Add a supporting note

Place a usage rule in note beneath the copy. This example also shows an id for a direct section link and a Panel around the specimen.

<Block id="primary-logo">
  <Fragment slot="copy">
    <h2>Primary logo</h2>
    <p>Use the supplied artwork whenever the full name fits.</p>
  </Fragment>
  <Fragment slot="note">
    <p>Never recreate the logotype using live text.</p>
  </Fragment>
  <Fragment slot="content">
    <Panel ratio="16 / 9">
      <Logo width="66%" />
    </Panel>
  </Fragment>
</Block>

Layout and slots

Below 48rem, copy and artwork stack in document order. At 48rem and above, the copy uses the configured side-column width and the content fills the rest.

Block has no default slot: children without a slot name will not appear. Use copy for the heading and explanation, content for the specimen, and the optional note for a rule beneath the copy. Normal prose can also sit outside Block; use it when a split layout helps explain a specimen.

API reference

Named slots: copy for explanatory prose, content for the specimen, and optional note for supporting copy. No default slot is rendered.