Container fill text

{{ design.patterns.renderPattern('container-fill-text', {}) | safe }}

Source (Nunjucks)

<h2 class="container-fill-text">
  <span class="container-fill-text__container">
    <span class="container-fill-text__display">{{ data.text | safe }}</span>
  </span>
  <span class="container-fill-text__reference" aria-hidden="true">{{ data.text | safe }}</span>
</h2>

Information

This component is a progressively enhanced system. By default, the system will set a reasonably sensible large type size, but when JavaScript is enabled, the web component will kick in and calculate a perfect size based on the following argument:

multiplier: This should be modified by eye because different fonts render at different widths. This is mulitplied by 200 to calculate the container unit size.