Components

Content

When displaying content you should provide a meaningful content hierarchy.

Type styles

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.

Lists

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 the sequence or count of items isn’t important.

There has been particular improvements in:

  • families feeling less isolated
  • reduced parental stress

View Bulleted List code and Bulleted List research on GitHub.

Images

When displaying images you should:

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

Videos

When displaying videos you should:

  • include subtitles
  • include a transcription

Quotes

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

Teacher

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.

Caption

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.

Fact

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
23,500

children supported through our school-based programmes

73%

had improved self-esteem

View Fact code and Fact research on GitHub.

Section

Use this component to section parts of content.

1st section

2nd section

3rd section

View Section code and Section research on GitHub.