<nhsuk-scroll
    text="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit."
/>

<NhsukScroll
    Text="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit."
/>

{% from "nhsuk/components/scroll/macro.njk" import scroll %}

{{ scroll({
  "text": "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit."
}) }}

<nhsuk-scroll
    html=@(@"<h1 class=""nhsuk-heading-m"" id=""example-heading"">Example heading</h1>
<p class=""nhsuk-body"">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p class=""nhsuk-body"">Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.</p>
<p class=""nhsuk-body"">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Bibendum commodo ullamcorper vulputate. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>")
    labelled-by="example-heading"
/>

<NhsukScroll
    Html=@(@"<h1 class=""nhsuk-heading-m"" id=""example-heading"">Example heading</h1>
<p class=""nhsuk-body"">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p class=""nhsuk-body"">Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.</p>
<p class=""nhsuk-body"">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Bibendum commodo ullamcorper vulputate. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>")
    LabelledBy="example-heading"
/>

{% from "nhsuk/components/scroll/macro.njk" import scroll %}

{{ scroll({
  "html": "<h1 class=\"nhsuk-heading-m\" id=\"example-heading\">Example\u00A0heading</h1>\n<p class=\"nhsuk-body\">Duis\u00A0mollis,\u00A0est\u00A0non\u00A0commodo\u00A0luctus,\u00A0nisi\u00A0erat\u00A0porttitor\u00A0ligula,\u00A0eget\u00A0lacinia\u00A0odio\u00A0sem\u00A0nec\u00A0elit.</p>\n<p class=\"nhsuk-body\">Aenean\u00A0lacinia\u00A0bibendum\u00A0nulla\u00A0sed\u00A0consectetur.\u00A0Vestibulum\u00A0id\u00A0ligula\u00A0porta\u00A0felis\u00A0euismod\u00A0semper.\u00A0Donec\u00A0id\u00A0elit\u00A0non\u00A0mi\u00A0porta\u00A0gravida\u00A0at\u00A0eget\u00A0metus.</p>\n<p class=\"nhsuk-body\">Fusce\u00A0dapibus,\u00A0tellus\u00A0ac\u00A0cursus\u00A0commodo,\u00A0tortor\u00A0mauris\u00A0condimentum\u00A0nibh.\u00A0Cras\u00A0justo\u00A0odio,\u00A0dapibus\u00A0ac\u00A0facilisis\u00A0in,\u00A0egestas\u00A0eget\u00A0quam.\u00A0Maecenas\u00A0sed\u00A0diam\u00A0eget\u00A0risus\u00A0varius\u00A0blandit\u00A0sit\u00A0amet\u00A0non\u00A0magna.\u00A0Bibendum\u00A0commodo\u00A0ullamcorper\u00A0vulputate.\u00A0Cras\u00A0mattis\u00A0consectetur\u00A0purus\u00A0sit\u00A0amet\u00A0fermentum.\u00A0Curabitur\u00A0blandit\u00A0tempus\u00A0porttitor.</p>",
  "labelledBy": "example-heading"
}) }}

<nhsuk-scroll labelled-by="example-heading">
    <h1 class="nhsuk-heading-m" id="example-heading">Example heading</h1>
      <p class="nhsuk-body">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
      <p class="nhsuk-body">Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.</p>
      <p class="nhsuk-body">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Bibendum commodo ullamcorper vulputate. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>
</nhsuk-scroll>

<NhsukScroll LabelledBy="example-heading">
    <h1 class="nhsuk-heading-m" id="example-heading">Example heading</h1>
      <p class="nhsuk-body">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
      <p class="nhsuk-body">Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.</p>
      <p class="nhsuk-body">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Bibendum commodo ullamcorper vulputate. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>
</NhsukScroll>

{% from "nhsuk/components/scroll/macro.njk" import scroll %}

{% call scroll({
  "labelledBy": "example-heading"
}) %}
  <h1 class="nhsuk-heading-m" id="example-heading">Example heading</h1>
  <p class="nhsuk-body">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  <p class="nhsuk-body">Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.</p>
  <p class="nhsuk-body">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Bibendum commodo ullamcorper vulputate. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>
{% endcall %}