Call To Action

A prominent action block that tells people what to do next in web, print, social, or signage.

When To Use

Use	Avoid
A prominent action block that tells people what to do next in web, print, social, or signage.	Avoid using this component when the content has a different job or needs a simpler plain-text treatment.
Use actions where people can immediately do something: submit a form, register for an event, download a file, open a map, or contact a group.	Avoid changing approved colours, typography, logo artwork, or class names to create a local style guide.
Use the starter markup as a copy/paste baseline for websites, Ghost HTML blocks, generated pages, or print previews.	Avoid copying placeholder IDs, links, contact details, or image paths without replacing them.

Example

Upcoming event

Join the community planting day

Code

CSS Imports

@import "@landcare-design-system/css/dist/landcare.css";
@import "@landcare-design-system/css/dist/components.css";

Starter Markup

<section class="lds-call-to-action" aria-labelledby="planting-day-title">
  <p class="lds-type-eyebrow">Upcoming event</p>
  <h2 id="planting-day-title">Join the community planting day</h2>
  <p>Register your interest so the organising team can plan tools, plants, and catering.</p>
  <p class="lds-call-to-action-actions">
    <a class="lds-button" href="/events/community-planting-day/">Register interest</a>
    <a class="lds-link" href="/events/community-planting-day/details/">Read event details</a>
  </p>
</section>

Class Reference

Class	Use
`.lds-call-to-action`	Groups a short message and next action into a prominent action block without turning the whole block into a button.
`.lds-type-eyebrow`	Use as part of the Landcare component CSS layer.
`.lds-call-to-action-actions`	Groups the primary action and supporting text link inside a call-to-action block.
`.lds-button`	Applies the primary action button style.
`.lds-link`	Styles an inline text hyperlink while keeping it recognisable as a link.

Review Notes

Web

Use actions where people can immediately do something: submit a form, register for an event, download a file, open a map, or contact a group.

Print

Translate actions into visible instructions with a readable URL, phone number, email, QR code, date, or place-based next step.

States And Variants

Document primary, secondary, disabled, loading, focus, hover, and pressed states where interactive.

Checklist

Brand colours, typography, and logo use are inherited from the approved master brand.
The first-read message or action is clear.
Labels, headings, links, and alternative text are meaningful.
Keyboard focus, colour contrast, and reading order are covered where the component is interactive.
The component survives its final output: mobile, desktop, Ghost CMS, A4 print, poster, signage, or email.