Common options

The components included in this library share some common options, classes and html_attributes.

These arguments work consistently across all the components and slots.

Inset text with custom CSS classes

Every component, slot and helper has its own classes to make it look and work like a GOV.UK Design System component. We can add extra classes to customise for our projects by using the classes keyword argument. The built-in and provided classes are combined and all will be present in the rendered component.

Classes can be provided in an array or a space-separated string.

Input

= govuk_inset_text(classes: "govuk-!-font-weight-bold")
  | Some strong text

<%= govuk_inset_text(classes: "govuk-!-font-weight-bold") do %>Some strong text
<% end %>

Output

Some strong text

<div class="govuk-inset-text govuk-!-font-weight-bold">
  Some strong text
</div>

Inset text with custom HTML attributes

HTML attributes work in a similar fashion to classes but the html_attributes argument must be a hash.

You can use the Rails convention of nesting aria and data attributes and they’ll be set properly.

Input

= govuk_inset_text(html_attributes: { lang: "en-GB",
                                      data: { demo: true },
                                      aria: { role: 'note' } })
  | Text with custom HTML attributes

<%= govuk_inset_text(html_attributes: { lang: "en-GB", data: { demo: true }, aria: { role: 'note' } }) do %>Text with custom HTML attributes
<% end %>

Output

Text with custom HTML attributes

<div class="govuk-inset-text" lang="en-GB" data-demo="true" aria-role="note">
  Text with custom HTML attributes
</div>