Containers

This page showcases base containers styled by @sparkstone/css, including article, .card, and <dialog>.

Default Article

Standard Article

This is a plain <article> element. It uses the default spacing and text styles defined in the theme. 



<article>
  <h3>Standard Article</h3>
  <p>
    This is a plain <code>&lt;article&gt;</code> element.
     It uses the default spacing and text styles defined in the theme.
  </p>
</article>

Card

Card Article

This is an article with the .card class. It includes padding, background styling, and a border or shadow depending on the theme. 



<article class="card">
  <h3>Card Article</h3>
  <p>
    This is an article with the <code>.card</code> class.
    It includes padding, background styling, and a border or shadow depending on the theme.
  </p>
</article>

Dialog Example

Dialog Heading

This dialog uses the native <dialog> element, which is styled minimally but respectably with the current theme. 




<button id="show-dialog">Open Dialog</button>

<dialog id="demo-dialog">
  <form method="dialog">
    <article>
      <header>
        <h3>Dialog Heading</h3>
      </header>
      <p>
        This dialog uses the native <code>&lt;dialog&gt;</code>
         element, which is styled minimally but respectably with the current theme.
      </p>
      <footer>
        <button type="submit">Close</button>
      </footer>
    </article>
  </form>
</dialog>