Components Overview
Components are reusable shared, digital, and print building blocks for Landcare work.
Use this section when you need to choose a component, copy starter code, or check which CSS classes to use in a website, Ghost HTML block, form, print view, or generated page.
Component Catalogue
Shared
Shared Components
2 components Reusable parts that work across websites, documents, social tiles, presentations, reports, and group templates.Digital
Digital Components
27 components Interface parts for websites, apps, online forms, documentation sites, and downstream repositories.Interaction
Actions And Links
3 componentsInteraction
Forms And Inputs
11 components- FormA grouped set of inputs used to collect information, registrations, enquiries, observations, or permissions.
- Form ButtonsA grouped set of submit, go, reset, cancel, or back buttons for completing or clearing a form.
- Text FieldA single-line input for names, emails, short answers, IDs, quantities, or contact details.
- Text AreaA multi-line input for comments, descriptions, notes, observations, or local context.
- SelectA compact control for choosing one option from a controlled list.
- CheckboxA control for selecting one or more options or confirming an agreement.
- RadioA control for choosing one option from a small set of mutually exclusive choices.
- ToggleA control for switching a setting on or off when the change is immediate and reversible.
- RangeA slider control for approximate values where exact entry is less important.
- Field GroupA labelled group of related form controls, help text, and validation messages.
- Digital Signature FieldAn online signing or acknowledgement control for permissions, approvals, or confirmation.
Structure
Navigation And Wayfinding
5 components- BreadcrumbA location trail that helps people understand where they are in a site or document structure.
- Top NavigationThe primary website navigation used in a header or topbar for the main site sections.
- Side NavigationA vertical section menu for documentation, resource libraries, long pages, portals, or nested content.
- Footer NavigationA closing navigation area for important links, contact pathways, governance pages, and related resources.
- Section IndexA page or document index that gives a quick route into major sections.
Communication
Email And Signatures
3 components Email-safe message and signature patterns for individual contacts, group communication, mobile mail apps, desktop mail clients, and Outlook or Apple Mail installation.- Transactional EmailA mail-client-safe digital letterhead pattern for confirmations, reminders, follow-ups, basic announcements, and practical organisation correspondence that does not require an email campaign platform.
- Email CampaignA mobile-first campaign email pattern for newsletters, news flashes, event promotion, member updates, supporter communications, and email marketing platforms.
- Email SignatureA personal signature block for individuals that preserves approved formatting, contact details, organisation text, and optional logo references across desktop and mobile email clients.
Structure
Layout Sections
5 components- Page HeaderA top region that introduces a page, document, section, or template.
- Page MetadataA compact control document metadata block for status, approval, owner, version, effective date, and review details.
- FooterA closing region for contact, legal, source, acknowledgement, and navigation information.
- SubfooterA compact final footer strip for copyright, organisation identity, registration details, and legal links.
- SidebarA secondary region for navigation, metadata, filters, notes, or related content.
Print Components
0 components Production parts for flyers, worksheets, posters, signs, event material, field sheets, and printable resources.Print Elements
Under development Print component guidance is being reset and will be added again after the pattern set is reviewed.General Rules
- Use approved Landcare CSS and token imports before local CSS.
- Keep IDs unique when copying form or navigation examples.
- Replace placeholder text, links, dates, contact details, and image paths.
- Keep logo files approved and do not redraw, recolour, or modify them.
- Use the review notes lower on each component page before publishing.
Related Sections
- Colour for brand palettes, pairing, contrast, and data visualisation colour.
- Typography for hierarchy, text elements, tables, and type tokens.
- Grid for web and print layout structure.
- Composition for visual weight and layout judgement.
- Accessibility for universal design and inclusive production.