Tabbed Content: Default 

<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  active" role="button" data-target="9bf4b75b-9fa0-4e00-a7de-f85f16be6472">Tab 1</button>
                        <button class="button-tab js-button-tab  " role="button" data-target="122859e3-9896-424d-b9da-475ebb4043de">Tab 2</button>
                    </div>
                </div>
                <div class="tab__section grid-x" data-tab-section-id="9bf4b75b-9fa0-4e00-a7de-f85f16be6472">
                    <div class="tab__content cell medium-7 medium-offset-1">
                        <div class="richtext ">
                            <h2>Title 1</h2>
                            <p>Tab Content 1</p>
                        </div>
                    </div>
                </div>
                <div class="tab__section grid-x" data-tab-section-id="122859e3-9896-424d-b9da-475ebb4043de">
                    <div class="tab__content cell medium-7 medium-offset-1">
                        <div class="richtext ">
                            <h2>Title 2</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": [
    {
      "text": "Tab 1",
      "target": "9bf4b75b-9fa0-4e00-a7de-f85f16be6472",
      "active": true
    },
    {
      "text": "Tab 2",
      "target": "122859e3-9896-424d-b9da-475ebb4043de",
      "active": false
    }
  ],
  "content": [
    {
      "id": "9bf4b75b-9fa0-4e00-a7de-f85f16be6472",
      "html": "<h2>Title 1</h2><p>Tab Content 1</p>",
      "active": true
    },
    {
      "id": "122859e3-9896-424d-b9da-475ebb4043de",
      "html": "<h2>Title 2</h2><p>Tab Content 2</p>",
      "active": false
    }
  ]
}

There are no notes for this item.