Link
A text action that moves people to another page, document, email, phone number, or resource.
When To Use
| Use | Avoid |
|---|---|
| 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
| Class | Use |
|---|---|
.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.
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.