CTA

A call to action is the last band of a marketing page: the one thing left to say once the claims have been made, and the one or two places to go from there. It is the shortest of the marketing sections, no picture, no repeated items, no price, because a page that has already explained itself needs a door rather than a second explanation. A page puts it inside a MarketingLayout as the last child of the main region.

It is not a second hero. A hero states a proposition to somebody who has just arrived and does not yet know what the page is; a CTA addresses a reader who has read it. When two claims both deserve the opening, that is a longer hero or a band of features between them, the closing band is not where a second claim goes.

Usage

import { CTA } from "@asheeui/web";

<CTA
  title="Send your first campaign this week"
  primaryAction={{ label: "Create an account", href: "/signup" }}
/>

title is required and the actions are optional: one destination, a primary and a secondary, or nothing at all. The last is rare, and usually a sign the sentence belongs in the prose above rather than in a band, a page that ends by asking for nothing has already asked elsewhere.

The panel

panel decides whether the closing call sits on a surface of its own. bordered, the default, draws an edge around a theme-background panel; muted fills a subdued one with no edge; and plain draws nothing, so the content sits straight on the band.

The surface is drawn inside the band rather than instead of it: background is still what the band paints, so the two combine, a plain panel on a background="muted" band is how a closing call gets a ground without a box. The panel is a surface and nothing else: it adds no role, no focus stop and no dismissal.

When the action is a form

A configured action describes a destination and takes no handler, so a band whose action submits something renders that control in children, after the configured actions. The band deliberately owns no form: an email field, a survey or a plan picker is the consumer's to write, and the band frames whatever it is given. Nothing in the band's own options reaches into the form, so the controls keep their own labels, messages and state.

Props

Six options are registered, align center, spacing lg, background none, panel bordered, containerSize lg and contained true, and each resolves from the instance, then components.cta, then the registration. The defaults are a closing band's own: centred, panelised and shorter than a hero's, because the page has made its argument by the time the band arrives. title, eyebrow, description, titleAs, the two actions and children are instance-only, because they say what this page is asking for, the heading's level belongs to the page's outline rather than to the product.

As in the hero, the band renders its own Container and switches the underlying Section's container off, so contained and containerSize are the two options that decide the width, and as picks the element the band renders as, section unless stated.

Accessibility

• The title renders as an <h2> by default: the section kit's lg step is the heading-xl typography role, and the step decides the treatment only, every size of that heading renders an <h2>. So a page that puts a hero above a CTA gains one <h1>, not two. A page whose closing band really is its only heading passes titleAs="h1", and a band nested under an existing section heading passes h3 or lower.
• The actions render through Button: one with href or a router component is an anchor and announces as a link, one without is a <button>. The primary action is solid and the secondary bordered unless the configuration says otherwise, and the row stacks on a narrow window so both labels stay readable.
• The band renders a <section> named by its own headline, aria-labelledby points at the heading it draws, so a reader navigating by region hears the closing call's title rather than reaching it only through the layout's main. A consumer's aria-labelledby wins over the generated one, and every other attribute the band does not use is passed to the element, so aria-label also names the region.
• The panel is decoration, background, border and padding, so it introduces no role, no focus stop and nothing to dismiss, and a reader moves from the last action to the footer.

The three parts every band shares, and the rule about the page's single <h1>, are stated once in Marketing sections.

Related