| Name | Type | Version | |------------------------|------|------------------------------------------------------------------------| | `@citizensadvice/cads` | Meta | ![npm (

Usage no npm install needed!

<script type="module">
  import citizensadviceCads from 'https://cdn.skypack.dev/@citizensadvice/cads';


Citizens Advice Design System

Name Type Version
@citizensadvice/cads Meta npm (scoped)


Name Description
@citizensadvice/core Key packages for cads, DOES NOT include the components.
@citizensadvice/typography Typography packages that are key to stying text.
@citizensadvice/forms Form packages that are fundamental to form styling
@citizensadvice/rich-content A package to allow rich content to utilise cads type styling


Using your package manager of choice...

$ npm install @citizensadvice/cads

Then bring into your stylesheets with...

@import "@citizensadvice/cads/index.scss";


You can make use of the unpkg service, try adding the link below to the head of your HTML file.

<link src="https://unpkg.com/@citizensadvice/cads@latest/build/cads.css" />


This is a meta package that contains all packages within the Citizens Advice Design System.

From the perspective of a developer building a product/service using the Citizens Advice Design System, you'll need to understand that we split our code into two concepts.


Utilties provide the building blocks for common layout and styling, to avoid writing custom classes. They adhere to the "Single Responsibility Principle" theory that states that every module, class or function should have one responsibility and that the responsibility should be entirely encapsulated by the class.

├── background-colors
├── background-position
├── background-size
├── border-colors
├── border-radius
├── border-style
├── border-width
├── borders
├── box-sizing
├── cursor
├── display
├── flexbox
├── floats
├── focus
├── font-family
├── font-size
├── font-style
├── font-weight
├── gutters
├── heights
├── hovers
├── letter-spacing
├── line-height
├── line-limit
├── margins
├── outlines
├── overflow
├── padding
├── positioning
├── text-align
├── text-colors
├── text-decoration
├── widths
└── z-index


These can be either:

  • made of a series of utility classes,
  • or a custom class that encapsulates the component properties.
├── buttons
├── links
├── lists
├── rich-content
├── radios-checkboxes
├── selects
├── text-inputs
├── typesetting
└── validation

Design system maintenance

If you're a developer maintaining the Design System repo then there are a few things worth noting.

All packages are seperated out to make it easier to create smaller CSS bundle sizes when releasing code into a production environment. To make it easier on developers we have a few different types of package to help with making the decision of where to put new code.

Package type Description Examples
Meta Groups other packages together forms, core, etc
Foundation Some configuration or scaffolding support, normalize
Utility A single resposiblity package box-sizing, padding, etc
Module An isolated package buttons, selects, etc