ALN Made Simple

Create Professional ALN Documentation in Minutes, Not Hours

Trusted by ALNCos across Wales, ALN Made Simple combines purpose-built tools and AI to support early identification, a graduated response, and person-centred planning.

Section band template 2.

This page demonstrates the correct structure for pages using alternating section bands. Copy this pattern when creating new pages to ensure consistent responsive behaviour across desktop, tablet, and mobile screens.

Benefit cards example.

These cards demonstrate responsive grid behaviour: 4 columns on desktop, 2 columns on tablets, 1 column on mobile.

Quick start guides.

Step-by-step templates to get you started with common ALN tasks.

Best practice tips.

Expert guidance on effective person-centred planning approaches.

Collaboration tools.

Resources designed to support multi-agency working and partnerships.

Progress tracking.

Monitor learner outcomes and celebrate achievements effectively.

Filter controls example.

Filter buttons wrap naturally on smaller screens using flexbox with wrap enabled.

Two column layout example.

Left column content.

This layout uses CSS Grid with auto-fit to stack columns on narrow screens while maintaining a two-column layout on wider viewports.

Right column content.

The minmax(300px, 1fr) pattern ensures content remains readable on mobile while expanding gracefully on desktop screens.

Template usage notes.

  • Wrap the page content in a div with overflowX: clip
  • Use SectionBand with alternating white/grey variants and fullWidth prop
  • Use PageContainer with maxWidth={1480} for wider hub pages
  • Add vertical padding inside each band (e.g., padding: 2rem 0)
  • Use CSS Grid with auto-fit and minmax for responsive card layouts
  • Use flexbox with wrap for filter buttons and tags