Landcare Design System Brand governed documentation

Link

A text action that moves people to another page, document, email, phone number, or resource.

When To Use

UseAvoid
A text action that moves people to another page, document, email, phone number, or resource.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

Read the field day guide before you register.

Code

CSS Imports

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

Starter Markup

<p>
  Read the
  <a class="lds-link" href="/resources/field-day-guide/">field day guide</a>
  before you register.
</p>

Class Reference

ClassUse
.lds-linkStyles 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.