CTA band

The band at the foot of a page that asks for the click. A colour panel with the pattern along its top edge, the words on the left and the buttons on the right.

Basic

<section data-cta>
  <h2>Start with two files</h2>
  <p>A stylesheet and a script, no build step and no runtime dependencies.</p>
  <menu>
    <li><button data-variant="light">Read the start page</button></li>
    <li><button data-variant="line">Copy the files</button></li>
  </menu>
</section>

Under 700px the buttons drop below the words.

Basic with a tone

<section data-cta data-tone="go">
  <h2>Ship the docs today</h2>
  <p>Every component is one Markdown file, and the generator writes the site.</p>
  <menu><li><button data-variant="line">Read the generator</button></li></menu>
</section>

Any data-tone the author adds wins over the default fill, text and all.

Notes

• The default fill is --s72-solid with --s72-solid-fg on it, the pair the table heads and the one-line commands use.
• The pattern band across the top is the one data-edge="top" draws, built in so the band needs no second attribute.
• Buttons need a variant here: the default button is ink on ink. line borrows the panel's own text colour, so it reads on any fill; light is a white button, for a dark one.
• The heading, the line under it and the buttons are named areas in a grid, so a band with no <p> keeps its shape.