When displaying content you should provide a meaningful content hierarchy.


Use these components to create a type hierarchy.

If your product has additional needs, follow the standards in Typography.


What we do

View Title code on GitHub.


How we support children and families

View Lede code on GitHub.


Fostering and adoption

View Heading code on GitHub.


Foster a child

View Subheading code on GitHub.


We build stronger families, safer childhoods and positive futures.

View Paragraph code on GitHub.


© Barnardo's

View Cite code on GitHub.


Use the component below for lists. You should:

  • limit the number on each page
  • introduce with a descriptive sentence
  • aim to keep the length of items similar
  • avoid starting items with the same word

Bulleted List

Use this component when there is no specific sequence or order to the items.

When talking with a professional you should mention:

  • when the problems started
  • if there’s a pattern in the problems
  • any difficulties in school or with friends
  • any big family issues like divorce or bereavement

View Bulleted List code and Bulleted List research on GitHub.

Numbered List

Use this component when the items have a specific sequence or count.

If you think your child may be suffering from mental health difficulties:

  1. Lean on your support network.
  2. Tell your child about childline.
  3. Talk to your child’s school.
  4. Visit your child’s GP.

View Numbered List code and Numbered List research on GitHub.


When displaying images you should:

  • match the tone of the surrounding copy
  • include descriptive alt tags in the code


When displaying videos you should:

  • include subtitles
  • include a transcription


When using these components you should:

  • choose short sentences with one main idea
  • limit the number on each page

Pull Quote

Use this component to emphasise an excerpt from the main content.

Parents needed more support with their emotional wellbeing, boundaries, behaviour, home and money.

View Pull Quote code and Pull Quote research on GitHub.

Block Quote

Use this component to display a quotation from a person.

When quoting authoritative adults, ensure they have experience working with young people.

Someone believed in me once and now it’s time for me to do the same.

Young person

The family support worker is able to engage and build positive relationships with families who previously kept their distance from school.

John Smith


View Block Quote code and Block Quote research on GitHub.

Prominent Block Quote

When using this component you should only use it once on each page.

By tackling the causes as well as the symptoms, we can create better outcomes for more children.

James Roberts

Young person

View Prominent Block Quote code and Prominent Block Quote research on GitHub.


Use this component to add a caption, for example to images and videos.

When using this component you should:

  • be clear and concise
  • provide a description that makes sense out of context
A 6:9 dummy image
Participants receiving their certificate

View Caption code and Caption research on GitHub.


Use this component for facts.

When using this component you should:

  • use data that’s compelling and easy to understand
  • limit the number on each page

children supported through our school-based programmes


had improved self-esteem

View Fact code and Fact research on GitHub.


Use this component to section parts of content.

1st section

2nd section

3rd section

View Section code and Section research on GitHub.