Page structure

Section break

You can use the govuk-section-break classes on an <hr> element to create a thematic break between sections of content. govuk-section-break has class-based modifiers for different size margins.

By default govuk-section-break is only visible by its margin. You can add the govuk-section-break--visible class to make it visible with a separator line.

<hr class="govuk-section-break govuk-section-break--xl govuk-section-break--visible">
<hr class="govuk-section-break govuk-section-break--l govuk-section-break--visible">
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<hr class="govuk-section-break govuk-section-break--visible">

Help improve this style

If you spot a problem with this guidance you can propose a change.

If you’re not sure how to do this, read guidance on how to propose changes in GitHub.

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.