@a2000/cover NPM

Cover

Renders a full height container with a central principal element, sandwiched between two optional elements

Quick Start

Begin by installing with your favourite package manager:

npm install @a2000/cover

Use within your HTML templates as follows:

<!DOCTYPE html>
<html>
  <head>
    <title>Quick Start</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <!-- Use web components in your HTML like regular built-in elements. -->
    <a2k-cover>
      <p slot="heading">Demo</p>
      <p slot="principal">Main</p>
      <p slot="footer">Copyright Ⓒ the badass</p>
    </a2k-cover>

    <!-- a2k web components use standard JavaScript modules. -->
    <script type="module">
      import "@a2000/progress/a2k-cover.js";
    </script>
  </body>
</html>

API

Slot	Details
heading	Element that renders at the top of the cover
principal	Principal element that takes up the middle content
footer	Element that renders at the bottom of the cover

Notes

This component is inspired by the cover component described int he Every Layout book

@everything-registry/sub-chunk-20 @zalastax/nolb-_a2 @a2000/blue-screen @a2000/startup

0.0.2

2 years ago

0.0.1

2 years ago