Content

Type

Use these components to create a consistent type hierarchy.

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

Topic

Raising awareness

View Topic code on GitHub.

Title

What we do

View Title code on GitHub.

Lede

How we support children and families

View Lede code on GitHub.

Heading

Fostering and adoption

View Heading code on GitHub.

Subheading

Foster a child

View Subheading code on GitHub.

Paragraph

We build stronger families, safer childhoods and positive futures.

View Paragraph code on GitHub.

Cite

© Barnardo’s

View Cite code on GitHub.

Code

href="https://www.barnardos.org.uk"

View Code component code on GitHub.

Heroes

Hero

Young carers

Voice and influence of young people

View Hero code and Hero research on GitHub.

Lists

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.

Disclosure

Details

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]
Barnardo’s
Tanners Lane
Barkingside
Essex
IG6 1QG

View Details code and Details research on GitHub.

Quotes

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

Teacher

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.

Facts

Fact

You should:

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

children supported through our school-based programmes

73%

had improved self-esteem

View Fact code and Fact research on GitHub.

Media

Image

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.

Video

You should:

  • include subtitles
  • include a transcription

View Video code and Video research on GitHub.

Caption

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.

Callouts

Callout

Use this component to callout part of the content.

Barnardo’s The Triangle

2 Coxwell Road
London
SE19 3BG

02097710907

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.

Sectioning

Section

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.

Sections

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.