Prose

---
import { Prose } from '@santi020k/lumen-astro'
---

<Prose>
  <h3>Build with semantic primitives</h3>
  <p>Lumen keeps accessible markup, theme tokens, and interaction contracts aligned.</p>
  <ul>
    <li>Start with Astro.</li>
    <li>Adapt the same API to React or Elements.</li>
  </ul>
  <blockquote>
    <p>Content should stay readable when a theme, language, or viewport changes.</p>
  </blockquote>
  <p>Use <code>Prose</code> for semantic Markdown output and <a href="/docs/components/code">Code</a> for enhanced examples.</p>
  <table>
    <thead><tr><th scope="col">Content</th><th scope="col">Purpose</th></tr></thead>
    <tbody>
      <tr><th scope="row">Headings and links</th><td>Structure and navigation</td></tr>
      <tr><th scope="row">Tables and quotations</th><td>Comparison and context</td></tr>
    </tbody>
  </table>
</Prose>

import { Prose } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <Prose>
      <h3>Build with semantic primitives</h3>
      <p>Lumen keeps accessible markup, theme tokens, and interaction contracts aligned.</p>
      <ul>
        <li>Start with Astro.</li>
        <li>Adapt the same API to React or Elements.</li>
      </ul>
      <blockquote>
        <p>Content should stay readable when a theme, language, or viewport changes.</p>
      </blockquote>
      <p>Use <code>Prose</code> for semantic Markdown output and <a href="/docs/components/code">Code</a> for enhanced examples.</p>
      <table>
        <thead><tr><th scope="col">Content</th><th scope="col">Purpose</th></tr></thead>
        <tbody>
          <tr><th scope="row">Headings and links</th><td>Structure and navigation</td></tr>
          <tr><th scope="row">Tables and quotations</th><td>Comparison and context</td></tr>
        </tbody>
      </table>
    </Prose>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-prose>
  <h3>Build with semantic primitives</h3>
  <p>Lumen keeps accessible markup, theme tokens, and interaction contracts aligned.</p>
  <ul>
    <li>Start with Astro.</li>
    <li>Adapt the same API to React or Elements.</li>
  </ul>
  <blockquote>
    <p>Content should stay readable when a theme, language, or viewport changes.</p>
  </blockquote>
  <p>Use <code>Prose</code> for semantic Markdown output and <a href="/docs/components/code">Code</a> for enhanced examples.</p>
  <table>
    <thead><tr><th scope="col">Content</th><th scope="col">Purpose</th></tr></thead>
    <tbody>
      <tr><th scope="row">Headings and links</th><td>Structure and navigation</td></tr>
      <tr><th scope="row">Tables and quotations</th><td>Comparison and context</td></tr>
    </tbody>
  </table>
</lumen-prose>