Pinecone

Tabs: Inverse 

<div class="tabs tabs--inverse">
    <div role="tablist" aria-labelledby="tabs-label">
        <span class="screen-reader-text" id="tabs-label">tab group</span>
        <a class="tab" href="#tab-1" id="tab-1-btn" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</a>
        <a class="tab" href="#tab-2" id="tab-2-btn" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</a>
        <a class="tab" href="#tab-3" id="tab-3-btn" role="tab" aria-controls="tab-3" aria-selected="false">Tab 3</a>
    </div>
    <div id="tab-1" role="tabpanel" aria-labelledby="tab-1-btn">
        Tab one content.
    </div>
    <div id="tab-2" role="tabpanel" aria-labelledby="tab-2-btn">
        Tab two content.
    </div>
    <div id="tab-3" role="tabpanel" aria-labelledby="tab-3-btn">
        Tab three content.
    </div>
</div>
 
<div class="tabs{% if modifier %} tabs--{{ modifier }}{% endif %}">
	<div role="tablist" aria-labelledby="tabs-label">
		<span class="screen-reader-text" id="tabs-label">{{ label }}</span>
		{% for tab in tabs %}
		<a class="tab" href="#{{ tab.title | slugify }}" id="{{ tab.title | slugify }}-btn" role="tab" aria-controls="{{ tab.title | slugify }}" aria-selected="{{ tab.selected }}">{{ tab.title }}</a>
		{% endfor %}
	</div>
	{% for tab in tabs %}
	<div id="{{ tab.title | slugify }}" role="tabpanel" aria-labelledby="{{ tab.title | slugify }}-btn">
		{{ tab.content | safe }}
	</div>
	{% endfor %}
</div>
 
{
  "label": "tab group",
  "tabs": [
    {
      "title": "Tab 1",
      "content": "Tab one content.",
      "selected": true
    },
    {
      "title": "Tab 2",
      "content": "Tab two content.",
      "selected": false
    },
    {
      "title": "Tab 3",
      "content": "Tab three content.",
      "selected": false
    }
  ],
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}