About this set
Five call to action bands for the end of a landing page or the gap between feature sections. Simple centred band puts a headline, one line of copy, a solid and an outline button and a pricing note on a deep indigo ground. Split with a photo pairs a meeting room photo with an eyebrow, a headline, three ticked facts, an orange button and an underlined secondary link. Gradient band lays the copy and two buttons side by side on a magenta to blue gradient with two soft highlights. Email capture sets a newsletter pitch beside a form with a visible label, an email field, a submit button and a hint linked to the field. App download pairs two store buttons, written out with a generic phone icon instead of store logos, with a phone drawn in CSS that shows a fixtures list. Each band has one main action and at most one secondary one, and every button is a real link or a submit button with a focus outline chosen to read on its own background. The email field uses the browser’s required and type email checks, so nothing is sent until the address looks valid, and on phones the buttons go full width.
What’s included
- Five bands: simple, split with a photo, gradient, email capture and app download
- One primary and at most one secondary action per band
- Email form with a visible label, autocomplete and a hint tied to the field
- Store buttons written as text with a generic icon, no store logos
- Phone mockup drawn in CSS with a text description
- Buttons go full width on phones; no JavaScript
Accessibility
Each band is a section named by its h2. The email field has a visible label, autocomplete="email" and aria-describedby pointing at the hint, and the drawn phone has role img with a description of what it shows. Every link, button and field shows a 3px focus outline in a colour that passes against its band, and the hover lift and colour transitions stop under prefers-reduced-motion.
Customise it
Each band has its own class (.cta-simple, .cta-split, .cta-gradient, .cta-email, .cta-app) holding its colours and a --cta-ring focus colour, and --cta-radius sets the corners. In Bootstrap the buttons are restyled through --bs-btn-* variables on .cta-light, .cta-orange, .cta-lime and .cta-store; in Tailwind swap the hex values in the bg- and text- classes.
