Website design guidelines & pattern library

Standardising design patterns at Brighton & Hove City Council

Design Library Version 1.1

Welcome to the second release of the website design library. Find out what's new and what's coming up in V 1.2.

What's new?

  • Tick check iconOver 20 new design patterns
  • Tick check iconExtended colour palette
  • Tick check iconImproved summary tables for user entered data
  • Tick check iconAdding and deleting items
  • Tick check iconForm progress, check answers and summary
  • Tick check iconSaving and loading form progress
  • Tick check iconSearch and filters
  • Tick check iconForm validation and critical alerts

Site features

  • Tick check iconSearch the site using keywords or pattern reference numbers
  • Tick check iconThis site follows the Brighton & Hove design guidelines contained within
  • Tick check iconCode snippets for best practice and accessibility
  • Tick check iconFollow links to HTML and CSS demos
  • Tick check iconFollow links to patterns in the Mendix Code Library

Version 1.1 contents

New patterns have been marked with a star

Pattern Library

Section Patterns
Homepage Service icons, Homepage banner images
Page content Content area headlines, Content sections, In page alerts, Link types, Button types, List types, Comparison lists, Pull out helper / fact box, Expandable helper, Bottom of page user actions, Responsive tables, Downloads
Sidebars Right sidebar, Left sidebar
Supporting content Useful information, Related documents, Contact information, Call to action - user response, Newsletter sign up
Navigating content Previous, next & ghost buttons, Pagination, Step by step guide, Show more content, Show / hide functionality, Services menu
Form inputs Accessible forms, Field labels and descriptions, Text fields, Short text fields, Text areas, Drop down selection, In-line radio buttons, Stacked radio buttons, Stacked check boxes, Conditional questions, Repeatable fields
Formatted data Date input, Date of birth, From - to dates, Prefix & post fix, Reference numbers, Address lookup, Manual address entry, User contact details, Preferred method of contact, Add multiple items, Add people, Add vehicles, Add bank or buidling society, File uploadss
Validation & alerts Top of page alerts, Critical form alerts, Required & optional fields, Input field validation, Advanced validation, Data consent validation, Alert linked to field, Set password validation, Reset pasword validation
Form output data Check your answers, Accordion summary tables, Form success page, Summary after submit, Reference numbers
Form progress Form progress bar, Question label
Data consent and terms Data Consent - new browser tab, Data Consent - in form, Terms - new browser tab, Terms - in form, Double opt ins
User interaction Save progress - Auto save, Save progress - Manual, Load progress, Tool tips, Filter results and content, Sort results, Search content, Map markers