Tabs (experimental) example

Without ga4 tracking on tabs

Disables GA4 tracking on tabs. Tracking is enabled by default. This includes the event tracker and required data attributes. See the ga4-event-tracker documentation for more information.

How it looks (preview)

Contents

First section

Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.

Second section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.

How to call this example

<%= render "govuk_publishing_components/components/tabs", {
  disable_ga4: true,
  tabs: [
    {
      id: "tab-with-ga4-tracking-1",
      label: "First section",
      title: "First section",
      content: sanitize("<p class=\"govuk-body-m\">Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.</p>
    ")
    },
    {
      id: "tab-with-ga4-tracking-2",
      label: "Second section",
      title: "Second section",
      content: sanitize("<p class=\"govuk-body-m\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
    ")
    }
  ]
} %>