1. Government Frontend Component Guide
  2. Lead paragraph

Component

Lead paragraph

The opening paragraph of content. Typically a content item’s description field.

How it looks (preview all)

UK Visas and Immigration is making changes to the Immigration Rules affecting various categories.

How to call this component

<%= render "govuk_publishing_components/components/lead_paragraph", {
  text: "UK Visas and Immigration is making changes to the Immigration Rules affecting various categories."
} %>

Accessibility acceptance criteria

The lead paragraph must be visually distinct from other paragraphs.

The lead paragraph must have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA (this especially applies when placed on a darker background).

Other examples

Right to left (preview)

قرارات تحقيقات وزارة الدفاع في الانتهاكات المزعومة للمادة ٢ والمادة ٣ من المعاهدة الاوروبية لحقوق الانسان خلال العمليات العسكرية في العراق.

<%= render "govuk_publishing_components/components/lead_paragraph", {
  text: "قرارات تحقيقات وزارة الدفاع في الانتهاكات المزعومة للمادة ٢ والمادة ٣ من المعاهدة الاوروبية لحقوق الانسان خلال العمليات العسكرية في العراق."
} %>

On topic page (preview)

Lead paragraphs need to support being placed on a blue background to work with the new taxonomy topic page designs

Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.

<%= render "govuk_publishing_components/components/lead_paragraph", {
  text: "Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.",
  inverse: true
} %>

Custom margin bottom (preview)

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to having a margin bottom of 45px.

This is some example text for a lead paragraph

<%= render "govuk_publishing_components/components/lead_paragraph", {
  text: "This is some example text for a lead paragraph",
  margin_bottom: 6
} %>