Tabbed Content: Tabs With Icon 

<section class="tabs-wrapper">
    <div class="grid-container">
        <div class="grid-x">
            <div class="cell">
                <div class="tab__tabs">
                    <div data-module="tabs" class="tabs">
                        <button class="button-tab js-button-tab button-tab--with-icon button-tab--ferries " role="button" data-target="content-1">Ferries</button>
                        <button class="button-tab js-button-tab button-tab--with-icon button-tab--flights " role="button" data-target="content-2">Flights</button>
                    </div>
                </div>
                <div class="tab__section grid-x" data-tab-section-id="content-1">
                    <div class="tab__content cell medium-7 medium-offset-1">
                        <div class="richtext ">
                            <h2>Ferries</h2>
                            <p>Tab Content 1</p>
                        </div>
                    </div>
                </div>
                <div class="tab__section grid-x" data-tab-section-id="content-2">
                    <div class="tab__content cell medium-7 medium-offset-1">
                        <div class="richtext ">
                            <h2>Flights</h2>
                            <p>Tab Content 2</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="tabs-wrapper">
    <div class="grid-container">
        <div class="grid-x">
            <div class="cell">
                <div class="tab__tabs">
                    {{> @cp-tabs-buttons buttons}}
                </div>
                {{#each content}}
                    <div class="tab__section grid-x" data-tab-section-id="{{id}}">
                        <div class="tab__content cell medium-7 medium-offset-1">
                            {{> @cp-text-richtext content=html}}
                        </div>
                    </div>
                {{/each}}
            </div>
        </div>
    </div>
</section>
 
{
  "buttons": [
    {
      "icon": "ferries",
      "text": "Ferries",
      "target": "content-1",
      "active": false
    },
    {
      "icon": "flights",
      "text": "Flights",
      "target": "content-2",
      "active": false
    }
  ],
  "content": [
    {
      "id": "content-1",
      "html": "<h2>Ferries</h2><p>Tab Content 1</p>",
      "active": true
    },
    {
      "id": "content-2",
      "html": "<h2>Flights</h2><p>Tab Content 2</p>",
      "active": false
    }
  ]
}

There are no notes for this item.