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>