Prose

Long-form content: paragraphs, headings, lists, quotes, rules and code. The classless build styles these elements everywhere. The class build scopes them to .prose, so a paragraph inside a component keeps its own spacing.

Class	Does what
`prose`	Styles p, h1 to h6, ul, ol, li, blockquote, hr, code, pre, samp and kbd inside it
`kbd`	Key cap, usable outside .prose

Headings and paragraphs

<div class="prose">
  <h1>Heading one</h1>
  <h2>Heading two</h2>
  <h3>Heading three</h3>
  <p>Body text sits at 18px with a 1rem bottom margin.</p>
</div>

<div>
  <h1>Heading one</h1>
  <h2>Heading two</h2>
  <h3>Heading three</h3>
  <p>Body text sits at 18px with a 1rem bottom margin.</p>
</div>

Lists, quotes and rules

<div class="prose">
  <ul>
    <li>First item</li>
    <li>Second item</li>
  </ul>
  <blockquote>A quote gets a thick left border in the theme color.</blockquote>
  <hr />
  <ol>
    <li>Ordered one</li>
    <li>Ordered two</li>
  </ol>
</div>

<div>
  <ul>
    <li>First item</li>
    <li>Second item</li>
  </ul>
  <blockquote>A quote gets a thick left border in the theme color.</blockquote>
  <hr />
  <ol>
    <li>Ordered one</li>
    <li>Ordered two</li>
  </ol>
</div>

Code

<div class="prose">
  <p>Inline <code>code</code> and <samp>samp</samp> sit on a raised surface.</p>
  <pre><code>const theme = "@sparkstone/css";
console.log(theme);</code></pre>
</div>

<div>
  <p>Inline <code>code</code> and <samp>samp</samp> sit on a raised surface.</p>
  <pre><code>const theme = "@sparkstone/css";
console.log(theme);</code></pre>
</div>