Skip to main content
  1. Home
  2. Inset text

Inset text

Use the inset text component to differentiate a block of text from the content that surrounds it, for example:

  • quotes
  • examples
  • additional information about the page

One line of inset text

One line of inset text can be passed in using the text argument.

Input

= govuk_inset_text(text: "One line of inset text")
<%= govuk_inset_text(text: "One line of inset text") %>

Output

One line of inset text
<div class="govuk-inset-text">
  One line of inset text
</div>

Multiple lines of inset text

When more than a single line of inset text is needed, pass in any content in a block.

Input

= govuk_inset_text do
  p
    | Multiple lines of inset text

  ul
    li one
    li two
    li three
<%= govuk_inset_text do %>
  <p>
    Multiple lines of inset text
  </p>
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
<% end %>

Output

Multiple lines of inset text

  • one
  • two
  • three
<div class="govuk-inset-text">
  <p>
    Multiple lines of inset text
  </p>
  <ul>
    <li>
      one
    </li>
    <li>
      two
    </li>
    <li>
      three
    </li>
  </ul>
</div>