Components
Components are reusable shared, digital, and print building blocks for Landcare design work. They help groups create more consistent websites, forms, flyers, field sheets, reports, social tiles, posters, and signs.
This section is separate from Foundations. Foundations explain the underlying rules; Components show how those rules become repeatable parts.
How To Use Components
Start with the reader’s use case. Choose Shared Components when the same pattern works across media. Choose Digital Components when the component needs interaction, state, keyboard access, or responsive behaviour. Choose Print Components when the component must survive paper, signage, distance reading, handwriting, photocopying, field use, manual surveys, or research data collection.
For Paper Forms, use PrintView CSS for A4 page behaviour and Paper Forms CSS for handwriting, survey, field monitoring, consent, attendance, and data-entry controls. This lets the same web-rendered form be reviewed on screen and printed as a genuine A4 form.
Then apply the approved colour, typography, grid, composition, accessibility, and logo guidance.
| Use | Avoid |
|---|---|
| Use components to create consistent patterns across group materials. | Avoid inventing one-off layouts when a documented component already solves the problem. |
| Use the shared, digital, and print streams to find the right component faster. | Avoid forcing every component into one long list when the reader is working in a specific medium. |
| Use components across media where the same idea carries cleanly. | Avoid treating print artefacts as screenshots of web interfaces. Translate interaction into clear instructions. |
| Use the component pages as a review checklist before publishing. | Avoid approving a component if brand, accessibility, grid, or production requirements are missing. |
Component Catalogue
Shared
Shared Components
35 components Reusable parts that work across websites, documents, social tiles, presentations, reports, and group templates.Interaction
Actions And Links
4 components- ButtonA button triggers a clear action such as register, download, submit, save, or continue.
- Call To ActionA prominent action block that tells people what to do next in web, print, social, or signage.
- LinkA text action that moves people to another page, document, email, phone number, or resource.
- QR ActionA print or signage action that pairs a QR code with a readable fallback URL and plain-language instruction.
Communication
Messaging And Alerts
6 components- BannerA prominent message area for important information that applies to a whole page, event, or artefact.
- NoticeA calm informational message that adds context without interrupting the main task.
- WarningA high-priority message for risk, safety, deadlines, destructive actions, or compliance issues.
- Success MessageA confirmation that an action was completed or a requirement was met.
- Inline MessageA short message placed beside the content or field it explains.
- Empty StateA message shown when there is no content, data, result, or next item yet.
Structure
Cards And Panels
5 components- CardA repeated content container for equivalent items such as events, resources, groups, stories, or tasks.
- PanelA grouped information area that separates a module without making a full card system.
- Profile SummaryA compact summary for a person, group, project, place, or partner.
- Grant ModuleA structured block for grant amounts, deadlines, eligibility, actions, and status.
- Report CalloutA highlighted note, finding, recommendation, or key takeaway inside a report or guide.
Information
Tables And Data
5 components- TableA structured data component for comparing rows and columns.
- ScheduleA time-based table for agendas, field days, rosters, workshops, or project plans.
- Metric BlockA compact display for a number, label, unit, timeframe, and source note.
- ChartA visual data component that turns values into readable comparison or trend patterns.
- Metadata ListA compact label-value list for dates, locations, contacts, versions, sources, or file details.
Content
Media And Figures
6 components- ImageA visual asset used to show place, people, action, species, condition, or outcome.
- FigureAn image, chart, map, or diagram with caption and source context.
- CaptionA short text component that explains an image, chart, table, map, or figure.
- MapA spatial component for location, site boundaries, route, treatment area, or wayfinding.
- Video FrameA video container with title, captions, transcript access, and poster image.
- IconA small symbol that supports recognition of actions, categories, or status.
Communication
Labels And Status
5 components- TagA short label used to classify, filter, or group content.
- BadgeA compact indicator for counts, new items, updates, or small emphasis.
- Status ChipA labelled indicator for progress, severity, condition, or workflow state.
- Date LabelA compact date marker for events, deadlines, publications, and updates.
- Category MarkerA label that identifies a content type, theme, species group, place type, or program stream.
Brand
Brand And Partner Blocks
4 components- Logo RegionA protected area for the approved Landcare, Coastcare, Junior Landcare, or corporate mark.
- Partner StripA controlled row or block of partner, sponsor, funder, and collaborator logos.
- AcknowledgementA respectful text block for acknowledgement, funding, partnership, or cultural context.
- Source ReferenceA compact reference block for source material, guideline pages, data sources, or version notes.
Digital
Digital Components
21 components Interface parts for websites, apps, online forms, documentation sites, and Opries-style repositories.Interaction
Forms And Inputs
10 components- FormA grouped set of inputs used to collect information, registrations, enquiries, observations, or permissions.
- 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
6 components- BreadcrumbA location trail that helps people understand where they are in a site or document structure.
- MenuA list of navigation choices or actions grouped in a predictable order.
- TabsA small set of parallel views for related content at the same level.
- PaginationControls that divide long lists, tables, or search results into manageable pages.
- Section IndexA page or document index that gives a quick route into major sections.
- Contents ListA structured contents block for reports, guides, long pages, and workshop documents.
Structure
Layout Sections
5 components- Page HeaderA top region that introduces a page, document, section, or template.
- FooterA closing region for contact, legal, source, acknowledgement, and navigation information.
- Section BandA full-width or full-field section that groups related content with controlled visual weight.
- SidebarA secondary region for navigation, metadata, filters, notes, or related content.
- Hero SectionA first-read region for a campaign, page, event, or feature message.
Print Components
23 components Production parts for flyers, worksheets, posters, signs, event material, field sheets, and printable resources.Paper Forms
14 components Printable forms for handwriting, surveys, research observations, consent, attendance, field data, and later data entry.- Paper FormA printable form structure for collecting registrations, observations, permissions, attendance, or contact details by hand.
- Paper Text FieldA lined or boxed handwriting field for names, addresses, notes, measurements, or short written answers.
- Paper Tick BoxA printable square selection control for yes/no, consent, attendance, checklist, or multiple-choice responses.
- Paper Choice ListA printable checkbox or radio-list pattern for selecting one or more options clearly with pen or pencil.
- Paper Scale IndicatorA printable sliding-scale or rating-line component for confidence, condition, agreement, satisfaction, or intensity responses.
- Paper Ranking FieldA printable ranking component for ordering priorities, preferences, species, issues, projects, or actions.
- Paper Matrix QuestionA compact paper survey grid for rating several items against the same response scale.
- Signature LineA paper signing area for consent, attendance, approvals, parent or guardian permission, or acknowledgement.
- Attendance RowA repeated paper row for names, contact details, signatures, roles, or emergency information.
- Consent SectionA structured paper section for permissions, privacy statements, risk acknowledgement, and opt-in choices.
- Paper Survey QuestionA printable question pattern for consistent manual survey responses, scales, short answers, or coded options.
- Field Data SheetA structured paper sheet for collecting research observations, site data, monitoring notes, or sample records in the field.
- Observation RowA repeated paper row for recording species, condition, count, location, date, initials, confidence, and notes.
- Data Entry CodeA compact code, ID, or reference field that connects paper survey data to later spreadsheet, database, or Opries entry.
Print Blocks
5 components- Fact BoxA compact print block for key facts, definitions, species notes, or safety reminders.
- Worksheet StepA numbered print or learning block for one activity step.
- ChecklistA scannable list of actions, materials, requirements, or review items.
- Tear-Off StripA print strip with repeated contact or action details that can be removed.
- Contact BlockA structured contact area for phone, email, web, social, address, or QR details.
Posters And Signage
4 components- Poster Title BlockA large title area designed for distance reading and quick recognition.
- Event Details BlockA grouped date, time, location, cost, and registration area for event material.
- Wayfinding StripA directional component for signs, maps, venues, trails, or field-day movement.
- Safety NoticeA strong message component for hazards, instructions, emergency information, or site rules.
Component Principles
- One job per component: each component should solve a recognisable communication or interaction need.
- Brand governed: components inherit approved colours, typography, spacing, logo rules, and accessibility guidance.
- Medium aware: every component must identify whether it is shared, digital-first, or print-first.
- Grid aligned: major components align to the page or artefact grid; small internal details use local spacing.
- Composition aware: components should support the first-read message rather than compete with it.
- Accessible by default: components should be readable, usable, labelled, and understandable without relying on colour alone.
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.
Reference Inspiration
The component taxonomy takes structural inspiration from Atlassian Design: Components, adapted for Landcare's web, print, education, signage, and group-production needs.