1. Component Guide
  2. Tabs (experimental)
  3. With data attributes
Tabs (experimental) example

With data attributes

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", {
  tabs: [
    {
      id: "tab-with-data-attributes-1",
      label: "First section",
      title: "First section",
      tab_data_attributes: {
        tracking: "GTM-123AB"
      },
      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-data-attributes-2",
      label: "Second section",
      title: "Second section",
      tab_data_attributes: {
        tracking: "GTM-123AB"
      },
      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>
    ")
    }
  ]
} %>