Event Details Block
A grouped date, time, location, cost, and registration area for event material. This is a print component: Production parts for flyers, worksheets, posters, signs, event material, field sheets, and printable resources.
Purpose
The Event Details Block 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.
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 poster and signage components as event-page fragments, downloadable previews, and campaign landing-page sections.
- 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 for distance, glare, weather, large type, short reading time, and clear brand recognition.
- 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 event, directional, safety, interpretive, temporary, and permanent 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.