Paper Ranking Field

A printable ranking component for ordering priorities, preferences, species, issues, projects, or actions. This is a print component: Production parts for flyers, worksheets, posters, signs, event material, field sheets, and printable resources.

Purpose

The Paper Ranking Field component gives Landcare groups a repeatable way to solve this communication problem without rebuilding the layout from scratch. It should inherit approved colour, typography, spacing, grid, accessibility, and logo guidance from the design system.

Paper Form And Research Data Guidance

Use paper form components when people complete information by hand at a meeting, field day, workshop, survey site, school activity, monitoring session, or research project. Design the form so the person filling it out can understand the task quickly, and the person entering the data later can read it reliably.

Use	Avoid
Use stable question wording, clear field labels, and one response task per line or block.	Avoid combining multiple questions into one handwriting area.
Use tick boxes, rating scales, ranking fields, coded options, site IDs, dates, observer initials, and sample numbers where the data will be entered later.	Avoid free-text-only designs when the research data needs consistent analysis.
Use the same response scale direction across the form, such as low to high or disagree to agree.	Avoid changing scale direction, tick-box meaning, or ranking logic between questions.
Use generous writing areas, quiet rules, high contrast, and enough space for gloves, clipboards, or outdoor use.	Avoid tiny boxes, pale lines, cramped tables, or colour-only instructions.
Use privacy and consent text near the fields it affects.	Avoid separating consent, photo permission, or data-use statements from the action being agreed to.

PrintView Example

This example uses the general PrintView CSS layer for A4 page behaviour and the dedicated Paper Forms CSS layer for handwriting, survey, consent, and field-data controls.

Survey

Priority ranking

Rank your top three priorities

Notes

Print CSS Implementation

@import "@landcare-design-system/css/dist/landcare.css";
@import "@landcare-design-system/css/dist/components.css";
@import "@landcare-design-system/css/dist/print-view.css";
@import "@landcare-design-system/css/dist/paper-forms.css";

Use .lds-print-view around each printable artefact and .lds-print-sheet for each A4 page. Keep handwriting, survey, consent, and field-data controls inside the sheet so the same markup can be reviewed online and printed without rebuilding the form.

Class	Use
`.lds-print-view`	Wraps a browser-rendered printable artefact and activates PrintView defaults.
`.lds-brand-landcare`	Applies Landcare brand tokens to a local wrapper.
`.lds-print-sheet`	Creates one A4-oriented printable sheet.
`.lds-print-header`	Styles the printed form title, group name, and governing header rule.
`.lds-print-section`	Groups related paper-form questions and avoids awkward print breaks.
`.lds-paper-row`	Creates a compact row for repeated survey, ranking, or observation fields.
`.lds-paper-field`	Stacks a paper label with a handwriting line or box.
`.lds-paper-label`	Applies compact, high-weight paper-form label text.
`.lds-paper-line`	Provides a one-line handwriting response area.

Starter Markup

<section class="lds-print-view lds-brand-landcare">
  <article class="lds-print-sheet">
    <header class="lds-print-header"><p>Survey</p><h1>Priority ranking</h1></header>
    <section class="lds-print-section">
      <h2>Rank your top three priorities</h2>
      <div class="lds-paper-row">
        <div class="lds-paper-field"><span class="lds-paper-label">1</span><span class="lds-paper-line"></span></div>
        <div class="lds-paper-field"><span class="lds-paper-label">2</span><span class="lds-paper-line"></span></div>
        <div class="lds-paper-field"><span class="lds-paper-label">3</span><span class="lds-paper-line"></span></div>
        <div class="lds-paper-field"><span class="lds-paper-label">Notes</span><span class="lds-paper-line"></span></div>
      </div>
    </section>
  </article>
</section>

When To Use

Use	Avoid
Use when the content or interaction matches the component purpose and benefits from a familiar pattern.	Avoid inventing a one-off layout when this component already solves the job.
Use the component with clear hierarchy, generous spacing, and one obvious first-read message or action.	Avoid adding extra borders, colours, icons, or type styles just to make the component feel more designed.
Use approved Landcare tokens so group forks can inherit brand updates cleanly.	Avoid local colour, typography, or logo changes that break brand consistency.

Web Guidance

Use paper-form, survey, and field-data components online only as previews, downloadable PDFs, printable companion resources, or source structures for later data entry. If the task is completed in browser, use Digital Forms And Inputs instead.

Structure: use semantic HTML, predictable reading order, and responsive sizing.
Accessibility: support keyboard access, visible focus, meaningful labels, sufficient contrast, and colour-independent meaning.
Layout: align the component to the page grid where it is a major element; use local spacing inside the component.
State: document default, hover, focus, active, disabled, loading, error, and success states where relevant.

Print Guidance

Design paper forms for handwriting, scanning, filing, photocopying, field use, low-light conditions, survey consistency, and later data entry. Use clear labels, generous writing space, quiet rules, obvious required fields, plain-language consent text, stable question wording, tick boxes, ranking fields, scale indicators, and coded fields where research data needs to be entered later.

Format: size the component for the final artefact, viewing distance, paper stock, and reproduction method.
Legibility: use Open Sans, strong contrast, and line lengths that suit the medium.
Production: preserve margins, trim safety, logo clear space, and enough room for handwriting where required.
Translation: when the web component becomes print, replace interaction states with clear instructions, labels, QR codes, or contact details.

States And Variants

Document blank, completed example, required, optional, office-use, field-use, guardian-consent, privacy-sensitive, survey-coded, and research-observation variants.

Variant	Use
Default	The standard form used across normal web and print contexts.
Emphasis	A higher-weight version for primary messages, urgent information, or first-read actions.
Compact	A denser version for tables, sidebars, forms, footers, and constrained print areas.
Example	A filled version for documentation, templates, learning resources, and production references.

Anatomy

Part	Guidance
Container	Use only when grouping helps. Prefer quiet rules and spacing over heavy boxes.
Title or label	Make the component purpose clear in plain language.
Body content	Keep copy short, scannable, and aligned to the typography hierarchy.
Action or outcome	Make the next step visible, especially in forms, posters, signs, and templates.

Review Checklist

Brand: approved colour, typography, logo clear space, and tone.
Hierarchy: one clear first read, then supporting information.
Grid: major edges align to the page, print, or component grid.
Accessibility: contrast, labels, focus, reading order, and colour-independent meaning are covered.
Output: the component survives the final medium: mobile, desktop, A4, poster, signage, social, or presentation.