Use these components to create a consistent type hierarchy.

If your product has additional needs, follow the typography standards.


Raising awareness

View Topic code on GitHub.


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.



View Code component code on GitHub.



Young carers

Voice and influence of young people

View Hero code and Hero research on GitHub.


You should:

  • introduce with a descriptive sentence
  • aim to keep the length of items similar

You should 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.



Use this component to reveal hidden information.

There are many methods to donate.

How to donate by post?

If you’d like to donate by post, simply send a cheque made payable to Barnardo’s to:

Supporter Services [OPD]
Tanners Lane

View Details code and Details research on GitHub.


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.

Juliana Santos


View Block Quote code and Block Quote research on GitHub.

Prominent Block Quote

You should:

  • limit to one 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.



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.



You should:

  • match the tone of the surrounding copy
  • include descriptive alt tags in the code
Group collecting donations for Barnardo's

View Image code and Image research on GitHub.


You should:

  • include subtitles
  • include a transcription

View Video code and Video research on GitHub.


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

You should:

  • be clear and concise
  • provide a description that makes sense out of context
Volunteer helping in a Barnardo’s shop
Volunteer helping in a Barnardo’s shop

View Caption code and Caption research on GitHub.



Use this component to callout part of the content.

Barnardo’s The Triangle

2 Coxwell Road
SE19 3BG


View Callout code and Callout research on GitHub.

Prominent Callout

Use this component to prominently callout part of the content.

Tips for dealing with stress:

  • listen to calming music
  • write or draw what you want to happen
  • go for a walk or do some exercise
  • play a game

View Prominent Callout code and Prominent Callout research on GitHub.



Use this component to section part of the content.

Going into care

Going into care is a big step. This option will be looked at after checking whether there’s any other ways you could be properly cared for and feel safe at home.

View Section code and Section research on GitHub.


Use this component to section more than one part of content.

1st section

2nd section

3rd section

View Sections code and Sections research on GitHub.