Inset text
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/components/inset-text/default/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">inset text</span>
example in a new tab
</a>
</div>
<iframe title="Inset text example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/inset-text/default/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-inset-text-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#inset-text-example-html" role="tab" aria-controls="inset-text-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#inset-text-example-nunjucks" role="tab" aria-controls="inset-text-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#inset-text-example-html" aria-controls="inset-text-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="inset-text-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-inset-text"</span>></span>
It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. </div>
<div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#inset-text-example-nunjucks" aria-controls="inset-text-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="inset-text-example-nunjucks" role="tabpanel">
<details class="govuk-details app-options" data-module="govuk-details" id="options-inset-text-example-details">
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-inset-text-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>html</code> is set, this is not required. Text to use within the back link component. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>text</code> is set, this is not required. HTML to use within the back link component. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">caller</th>
<td class="govuk-table__cell ">nunjucks-block</td>
<td class="govuk-table__cell ">
Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire inset text component in a <code>call</code> block.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">id</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
ID attribute to add to the inset text container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the inset text container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the inset text container.
</td>
</tr>
</tbody>
</table>
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/inset-text/macro.njk"</span> <span class="hljs-keyword">import</span> govukInsetText %}
{{ govukInsetText({ text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application." }) }}