Component

Inset text

Use the inset text component to differentiate a block of text from the content that surrounds it.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.

How to call this component

<%= render "govuk_publishing_components/components/inset_text", {
  text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Accessibility acceptance criteria

All text must have a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string.
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’.

With block (preview)

Note that the contents should be styled separately from the component, which takes no responsibility for what it is passed.

To publish this step by step you need to

Check for broken links 
<%= render "govuk_publishing_components/components/inset_text", {
} do %>
  <div>
  <h2 class="govuk-heading-m" id='heading'>To publish this step by step you need to</h2>
  <a class="govuk-link" href='/foo'>Check for broken links</a>
</div>
<% end %>

With custom margins (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 margin of 6 (30px) top and bottom.

When a failure occurs, you must submit logbook, landing and transhipment data manually to the UK Fisheries Call Centre each day and by no later than 23.59 UTC 
<%= render "govuk_publishing_components/components/inset_text", {
  text: "When a failure occurs, you must submit logbook, landing and transhipment data manually to the UK Fisheries Call Centre each day and by no later than 23.59 UTC",
  margin_top: 0,
  margin_bottom: 9
} %>