diff --git a/less/neptune/abstracts/_animations.less b/less/neptune/abstracts/_animations.less
new file mode 100644
index 0000000000000000000000000000000000000000..c9e99f7a49b81b452fe6c633d8c9dc2c28fa49e5
--- /dev/null
+++ b/less/neptune/abstracts/_animations.less
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 Eclipse Foundation
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+
+// Cubic-bezier creates a custom easing function with control points (0.42, 0, 0.2, 3)
+// The third value > 1 creates an overshoot effect, making the bounce more pronounced
+@bounce-animation-cubic-bezier: bounce 0.4s cubic-bezier(0.4, 0, 0.2, 3);
+
+@keyframes bounce {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(0.95);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
\ No newline at end of file
diff --git a/less/neptune/components/_nav.less b/less/neptune/components/_nav.less
new file mode 100644
index 0000000000000000000000000000000000000000..75c9bf2144f4b7a528b699a56d783602f35050bd
--- /dev/null
+++ b/less/neptune/components/_nav.less
@@ -0,0 +1,222 @@
+/**
+ * Copyright (c) 2025 Eclipse Foundation
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+// Bootstrap Nav var Overrides
+@nav-pills-border-radius: 5rem;
+@nav-pills-active-link-hover-bg: @brand-secondary;
+@nav-link-hover-bg: @blue-50;
+
+// Bootstrap 3 Nav Pills Override
+.nav.nav-pills {
+ display: flex;
+ gap: 2rem;
+ justify-content: flex-start;
+ align-items: center;
+ padding-bottom: 1rem;
+
+ &::before,
+ &::after {
+ display: none;
+ }
+
+ // On mobile the pills will be scrollable
+ overflow-x: auto;
+ overflow-y: hidden;
+ gap: 0.8rem;
+
+ // This scapes the container padding so that the scrollable area will feel more natural
+ margin-left: -@grid-gutter-width / 2;
+ margin-right: -@grid-gutter-width / 2;
+ padding-left: @grid-gutter-width / 2;
+ padding-right: @grid-gutter-width / 2;
+
+ // On desktop we can just wrap the pills given that horizontal scrolling is not well supported
+ @media (min-width: @screen-sm-min) {
+ flex-wrap: wrap;
+ overflow-x: visible;
+ overflow-y: visible;
+ gap: 2rem;
+ margin-left: 0;
+ margin-right: 0;
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ li {
+ text-align: center;
+
+ a {
+ font-weight: 600;
+ color: @black;
+ font-size: @text-sm;
+ padding: 0.6rem 1.2rem;
+ text-wrap: nowrap;
+ border-radius: @nav-pills-border-radius;
+
+ transition: background-color 0.2s ease-in-out;
+
+ &:hover {
+ background-color: @nav-link-hover-bg;
+ color: @black;
+ }
+
+ &:focus,
+ &:active {
+ animation: @bounce-animation-cubic-bezier;
+ outline: none;
+ }
+
+ @media (min-width: @screen-lg-min) {
+ font-size: @text-md;
+ padding: 0.8rem 1.6rem;
+ }
+ }
+
+ &.active {
+ a {
+ background-color: @nav-pills-active-link-hover-bg;
+ color: @white;
+
+ &:hover {
+ background-color: @nav-pills-active-link-hover-bg;
+ color: @white;
+ }
+ }
+ }
+
+ &:not(.active):not(:hover) a {
+ background-color: @blue-25;
+ }
+ }
+
+ // Size variants
+ &.nav-pills-lg {
+ gap: 1.2rem;
+
+ @media (min-width: @screen-lg-min) {
+ gap: 2rem;
+ }
+
+ li {
+ a {
+ font-weight: 700;
+ font-size: @text-lg;
+ padding: 1.2rem 1.6rem;
+
+ @media (min-width: @screen-lg-min) {
+ font-size: @text-xl;
+ padding: 1.5rem 2rem;
+ }
+ }
+ }
+ }
+
+ &.nav-pills-sm {
+ gap: 1rem;
+
+ li {
+ a {
+ font-weight: 500;
+ font-size: @text-xs;
+ padding: 0.4rem 0.8rem;
+
+ @media (min-width: @screen-lg-min) {
+ font-size: @text-sm;
+ padding: 0.6rem 1.2rem;
+ }
+ }
+ }
+ }
+
+ &.nav-pills-centered {
+ justify-content: center;
+ }
+
+ &.nav-pills-right {
+ justify-content: flex-end;
+ }
+
+ &.nav-pills-space-between {
+ justify-content: space-between;
+ }
+}
+
+// Bootstrap 3 Nav Tabs Override
+.nav.nav-tabs {
+ border-bottom: 0.2rem solid @gray-100;
+
+ li {
+ margin-bottom: 0;
+
+ a {
+ font-weight: 600;
+ color: @black;
+ font-size: @text-sm;
+ padding: 0.6rem 1.2rem;
+ border: none;
+ border-bottom: 0.2rem solid transparent;
+ background: none;
+ white-space: nowrap;
+
+ @media (min-width: @screen-lg-min) {
+ font-size: @text-md;
+ padding: 0.8rem 1.6rem;
+ }
+ }
+
+ & a,
+ &.active a {
+ &:hover,
+ &:focus {
+ outline: none;
+ background-color: fade(lighten(@brand-secondary, 50%), 90%);
+ border: 0;
+ border-bottom: 0.2rem solid darken(@brand-secondary, 10%);
+ }
+ }
+
+ &.active a {
+ color: @brand-secondary;
+ background-color: transparent;
+ border-bottom-color: @brand-secondary;
+ }
+ }
+
+ // Size variants
+ &.nav-tabs-lg {
+ li {
+ a {
+ font-weight: 700;
+ font-size: @text-md;
+ padding: 1rem 1.6rem;
+
+ @media (min-width: @screen-lg-min) {
+ font-size: @text-lg;
+ padding: 1.2rem 2rem;
+ }
+ }
+ }
+ }
+
+ &.nav-tabs-sm {
+ li {
+ a {
+ font-weight: 500;
+ font-size: @text-xs;
+ padding: 0.4rem 0.8rem;
+
+ @media (min-width: @screen-lg-min) {
+ font-size: @text-sm;
+ padding: 0.6rem 1.2rem;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/less/neptune/components/_tabs.less b/less/neptune/components/_tabs.less
new file mode 100644
index 0000000000000000000000000000000000000000..727b33b99b6200d9414f3f8360a8d1be7aa67481
--- /dev/null
+++ b/less/neptune/components/_tabs.less
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2025 Eclipse Foundation
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+// Custom EclipseFdn Tabs Component Implementation
+// This just add styles for collapsible tabs on mobile
+// For Bootstrap nav overrides, see _nav.less
+
+.eclipsefdn-collapsible-tabs {
+ ul.nav {
+ display: none;
+
+ @media (min-width: @screen-sm-min) {
+ display: flex;
+ }
+ }
+
+ .tab-content {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+
+ @media (min-width: @screen-sm-min) {
+ display: block;
+ gap: 0;
+
+ .nav-link {
+ display: none;
+ }
+ }
+
+ a[data-toggle='tab'] {
+ font-weight: 700;
+ font-size: @text-md;
+ padding-bottom: 1rem;
+ color: @black;
+ position: relative;
+ text-decoration: none;
+ display: block;
+
+ &::after {
+ content: '';
+ position: absolute;
+ height: 0.2rem;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: @gray-100;
+ }
+
+ &:has(+.active) {
+ color: @brand-secondary;
+
+ &::after {
+ background-color: @brand-secondary;
+ }
+ }
+
+ @media (min-width: @screen-sm-min) {
+ display: none;
+ }
+ }
+ }
+}
diff --git a/less/neptune/main.less b/less/neptune/main.less
index 735841ea7feb7923e3c42d47562a4d4ded88dc56..dde4a1c616fed000578f73e30413d3ca402dc718 100644
--- a/less/neptune/main.less
+++ b/less/neptune/main.less
@@ -1,3 +1,13 @@
+/**
+ * Copyright (c) 2025 Eclipse Foundation
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
// Vendors
@import 'vendors/_bootstrap.less';
@import 'vendors/_font-awesome.less';
@@ -7,12 +17,15 @@
@import 'abstracts/_borders.less';
@import 'abstracts/_shadows.less';
@import 'abstracts/_typography.less';
+@import 'abstracts/_animations.less';
// Base
@import 'base/_typography.less';
// Components
@import 'components/_alerts.less';
+@import 'components/_nav.less';
+@import 'components/_tabs.less';
// Utility classes
@import 'utils/_box-model.less';
diff --git a/stories/widgets/tabs.stories.ts b/stories/widgets/tabs.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..399e8aa3cc2c84624c46483af5b00580fb654fe3
--- /dev/null
+++ b/stories/widgets/tabs.stories.ts
@@ -0,0 +1,266 @@
+/**
+ * Copyright (c) Eclipse Foundation
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import '../../less/neptune/main.less';
+import type { StoryObj } from '@storybook/html';
+import { container } from '../utils';
+import '../../js/bootstrap';
+import '../../js/solstice/eclipsefdn.match-height';
+
+export default {
+ title: 'Widgets/Tabs',
+ parameters: {
+ layout: 'fullscreen',
+ },
+ decorators: [container()],
+};
+
+type TabsStory = StoryObj<{
+ size: 'default' | 'small' | 'large';
+}>;
+
+type PillsStory = StoryObj<{
+ size: 'default' | 'small' | 'large';
+ alignment: 'default' | 'centered' | 'right' | 'space-between';
+}>;
+
+type EclipseTabsStory = StoryObj<{
+ size: 'default' | 'small' | 'large';
+ alignment: 'default' | 'centered' | 'right' | 'space-between';
+}>;
+
+export const BootstrapTabs: TabsStory = {
+ argTypes: {
+ size: {
+ control: {
+ type: 'select',
+ },
+ options: ['default', 'sm', 'lg'],
+ description: 'Size variant for the navigation component',
+ },
+ },
+ args: {
+ size: 'default',
+ },
+ render: ({ size }) => {
+ const sizeClass = size === 'default' ? '' : `nav-tabs-${size}`;
+
+ return `
+ <ul class="nav nav-tabs ${sizeClass}" role="tablist">
+ <li class="active" role="presentation">
+ <a href="#overview" data-toggle="tab" role="tab" aria-controls="overview" aria-selected="true">Overview</a>
+ </li>
+ <li role="presentation">
+ <a href="#documentation" data-toggle="tab" role="tab" aria-controls="documentation" aria-selected="false">Documentation</a>
+ </li>
+ <li role="presentation">
+ <a href="#downloads" data-toggle="tab" role="tab" aria-controls="downloads" aria-selected="false">Downloads</a>
+ </li>
+ <li role="presentation">
+ <a href="#community" data-toggle="tab" role="tab" aria-controls="community" aria-selected="false">Community</a>
+ </li>
+ <li role="presentation">
+ <a href="#support" data-toggle="tab" role="tab" aria-controls="support" aria-selected="false">Support</a>
+ </li>
+ <li role="presentation">
+ <a href="#development" data-toggle="tab" role="tab" aria-controls="development" aria-selected="false">Development</a>
+ </li>
+ </ul>
+
+ <div class="tab-content">
+ <div class="tab-pane active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
+ <h4>Project Overview</h4>
+ <p>Ipsum exercitation laboris pariatur cillum et excepteur nulla consectetur consequat quis. Irure dolore incididunt occaecat velit cillum laboris eu cupidatat voluptate elit exercitation. Laboris nisi ut irure consequat incididunt adipisicing proident pariatur elit occaecat. Laboris ullamco nisi est amet excepteur. Velit anim sunt deserunt esse nisi qui cupidatat ut aute deserunt excepteur aute. Proident laboris anim est consequat id et veniam.</p>
+ </div>
+ <div class="tab-pane" id="documentation" role="tabpanel" aria-labelledby="documentation-tab">
+ <h4>Documentation</h4>
+ <p>Eu non consequat consequat pariatur exercitation velit non nostrud laborum cillum. Proident proident deserunt ea tempor cillum anim. Anim sit eu ullamco est adipisicing do sit eiusmod cillum. Quis pariatur officia non exercitation veniam minim fugiat esse sit enim. Tempor non esse sit ad elit labore proident proident sint culpa nisi ex laborum ut. Cillum voluptate nisi amet sunt dolor excepteur duis reprehenderit magna mollit sint culpa ea.</p>
+ </div>
+ <div class="tab-pane" id="downloads" role="tabpanel" aria-labelledby="downloads-tab">
+ <h4>Downloads</h4>
+ <p>Enim minim consequat consequat magna non adipisicing mollit est ut. Aliqua dolor enim commodo nulla deserunt occaecat cillum laboris magna dolor. Fugiat ad exercitation commodo quis do incididunt sunt nisi excepteur fugiat. Qui dolor ipsum reprehenderit duis laborum.</p>
+ </div>
+ <div class="tab-pane" id="community" role="tabpanel" aria-labelledby="community-tab">
+ <h4>Community</h4>
+ <p>Ex incididunt amet aliquip sint enim irure minim ut anim tempor. Mollit laboris laboris cillum aliquip consequat ut mollit commodo aute est consectetur esse. Irure minim do magna amet proident. Aliquip aliqua dolor cupidatat exercitation proident culpa fugiat anim. Adipisicing nostrud non voluptate eiusmod Lorem consectetur amet magna proident. Consectetur duis ullamco id quis sunt sunt ex deserunt cillum in et esse tempor.</p>
+ </div>
+ <div class="tab-pane" id="support" role="tabpanel" aria-labelledby="support-tab">
+ <h4>Support</h4>
+ <p>Incididunt cupidatat do exercitation irure anim culpa ad. Dolore culpa aute pariatur est esse aliqua occaecat excepteur magna. Aute sint magna est nisi. Labore pariatur aliquip labore aute in exercitation fugiat consequat. Qui dolor enim irure laboris do anim Lorem laboris amet.</p>
+ </div>
+ <div class="tab-pane" id="development" role="tabpanel" aria-labelledby="development-tab">
+ <h4>Development</h4>
+ <p>Incididunt irure tempor nostrud non magna officia duis tempor velit amet. Laborum id culpa amet aliquip proident. Est esse enim adipisicing minim aute qui amet nisi veniam eu. Consectetur duis eu nisi excepteur ullamco mollit anim mollit laboris pariatur ea est dolore tempor.</p>
+ </div>
+ </div>
+ `;
+ },
+};
+
+export const BootstrapPills: PillsStory = {
+ argTypes: {
+ size: {
+ control: {
+ type: 'select',
+ },
+ options: ['default', 'sm', 'lg'],
+ description: 'Size variant for the navigation component',
+ },
+ alignment: {
+ control: {
+ type: 'select',
+ },
+ options: ['default', 'centered', 'right', 'space-between'],
+ description: 'Alignment variant for the navigation component (pills only)',
+ },
+ },
+ args: {
+ size: 'default',
+ alignment: 'default',
+ },
+ render: ({ size, alignment }) => {
+ const sizeClass = size === 'default' ? '' : `nav-pills-${size}`;
+ const alignmentClass = alignment === 'default' ? '' : `nav-pills-${alignment}`;
+
+ return `
+ <ul class="nav nav-pills ${sizeClass} ${alignmentClass}" role="tablist">
+ <li class="active" role="presentation">
+ <a href="#overview" data-toggle="tab" role="tab" aria-controls="overview" aria-selected="true">Overview</a>
+ </li>
+ <li role="presentation">
+ <a href="#documentation" data-toggle="tab" role="tab" aria-controls="documentation" aria-selected="false">Documentation</a>
+ </li>
+ <li role="presentation">
+ <a href="#downloads" data-toggle="tab" role="tab" aria-controls="downloads" aria-selected="false">Downloads</a>
+ </li>
+ <li role="presentation">
+ <a href="#community" data-toggle="tab" role="tab" aria-controls="community" aria-selected="false">Community</a>
+ </li>
+ <li role="presentation">
+ <a href="#support" data-toggle="tab" role="tab" aria-controls="support" aria-selected="false">Support</a>
+ </li>
+ <li role="presentation">
+ <a href="#development" data-toggle="tab" role="tab" aria-controls="development" aria-selected="false">Development</a>
+ </li>
+ </ul>
+
+ <div class="tab-content">
+ <div class="tab-pane active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
+ <h4>Project Overview</h4>
+ <p>Ipsum exercitation laboris pariatur cillum et excepteur nulla consectetur consequat quis. Irure dolore incididunt occaecat velit cillum laboris eu cupidatat voluptate elit exercitation. Laboris nisi ut irure consequat incididunt adipisicing proident pariatur elit occaecat. Laboris ullamco nisi est amet excepteur. Velit anim sunt deserunt esse nisi qui cupidatat ut aute deserunt excepteur aute. Proident laboris anim est consequat id et veniam.</p>
+ </div>
+ <div class="tab-pane" id="documentation" role="tabpanel" aria-labelledby="documentation-tab">
+ <h4>Documentation</h4>
+ <p>Eu non consequat consequat pariatur exercitation velit non nostrud laborum cillum. Proident proident deserunt ea tempor cillum anim. Anim sit eu ullamco est adipisicing do sit eiusmod cillum. Quis pariatur officia non exercitation veniam minim fugiat esse sit enim. Tempor non esse sit ad elit labore proident proident sint culpa nisi ex laborum ut. Cillum voluptate nisi amet sunt dolor excepteur duis reprehenderit magna mollit sint culpa ea.</p>
+ </div>
+ <div class="tab-pane" id="downloads" role="tabpanel" aria-labelledby="downloads-tab">
+ <h4>Downloads</h4>
+ <p>Enim minim consequat consequat magna non adipisicing mollit est ut. Aliqua dolor enim commodo nulla deserunt occaecat cillum laboris magna dolor. Fugiat ad exercitation commodo quis do incididunt sunt nisi excepteur fugiat. Qui dolor ipsum reprehenderit duis laborum.</p>
+ </div>
+ <div class="tab-pane" id="community" role="tabpanel" aria-labelledby="community-tab">
+ <h4>Community</h4>
+ <p>Ex incididunt amet aliquip sint enim irure minim ut anim tempor. Mollit laboris laboris cillum aliquip consequat ut mollit commodo aute est consectetur esse. Irure minim do magna amet proident. Aliquip aliqua dolor cupidatat exercitation proident culpa fugiat anim. Adipisicing nostrud non voluptate eiusmod Lorem consectetur amet magna proident. Consectetur duis ullamco id quis sunt sunt ex deserunt cillum in et esse tempor.</p>
+ </div>
+ <div class="tab-pane" id="support" role="tabpanel" aria-labelledby="support-tab">
+ <h4>Support</h4>
+ <p>Incididunt cupidatat do exercitation irure anim culpa ad. Dolore culpa aute pariatur est esse aliqua occaecat excepteur magna. Aute sint magna est nisi. Labore pariatur aliquip labore aute in exercitation fugiat consequat. Qui dolor enim irure laboris do anim Lorem laboris amet.</p>
+ </div>
+ <div class="tab-pane" id="development" role="tabpanel" aria-labelledby="development-tab">
+ <h4>Development</h4>
+ <p>Incididunt irure tempor nostrud non magna officia duis tempor velit amet. Laborum id culpa amet aliquip proident. Est esse enim adipisicing minim aute qui amet nisi veniam eu. Consectetur duis eu nisi excepteur ullamco mollit anim mollit laboris pariatur ea est dolore tempor.</p>
+ </div>
+ </div>
+ `;
+ },
+};
+
+export const EclipseFdnCollapsibleTabs: EclipseTabsStory = {
+ argTypes: {
+ size: {
+ control: {
+ type: 'select',
+ },
+ options: ['default', 'sm', 'lg'],
+ description: 'Size variant for the navigation component',
+ },
+ alignment: {
+ control: {
+ type: 'select',
+ },
+ options: ['default', 'centered', 'right', 'space-between'],
+ description: 'Alignment variant for the navigation component (pills only)',
+ },
+ },
+ args: {
+ size: 'default',
+ alignment: 'centered',
+ },
+ render: ({ size, alignment }) => {
+ const sizeClass = size === 'default' ? '' : `nav-pills-${size}`;
+ const alignmentClass = alignment === 'default' ? '' : `nav-pills-${alignment}`;
+
+ return `
+ <div class="eclipsefdn-collapsible-tabs">
+ <ul class="nav nav-pills ${sizeClass} ${alignmentClass}" role="tablist">
+ <li class="active" role="presentation">
+ <a href="#overview" data-toggle="tab" role="tab" aria-controls="overview" aria-selected="true">Overview</a>
+ </li>
+ <li role="presentation">
+ <a href="#documentation" data-toggle="tab" role="tab" aria-controls="documentation" aria-selected="false">Documentation</a>
+ </li>
+ <li role="presentation">
+ <a href="#downloads" data-toggle="tab" role="tab" aria-controls="downloads" aria-selected="false">Downloads</a>
+ </li>
+ <li role="presentation">
+ <a href="#community" data-toggle="tab" role="tab" aria-controls="community" aria-selected="false">Community</a>
+ </li>
+ <li role="presentation">
+ <a href="#support" data-toggle="tab" role="tab" aria-controls="support" aria-selected="false">Support</a>
+ </li>
+ <li role="presentation">
+ <a href="#development" data-toggle="tab" role="tab" aria-controls="development" aria-selected="false">Development</a>
+ </li>
+ </ul>
+ <div class="tab-content">
+ <a href="#overview" data-toggle="tab" role="tab" aria-controls="overview" aria-selected="true">Overview</a>
+ <div class="tab-pane active" id="overview" role="tabpanel" aria-label="Overview content">
+ <h4>Project Overview</h4>
+ <p>Ipsum exercitation laboris pariatur cillum et excepteur nulla consectetur consequat quis. Irure dolore incididunt occaecat velit cillum laboris eu cupidatat voluptate elit exercitation. Laboris nisi ut irure consequat incididunt adipisicing proident pariatur elit occaecat. Laboris ullamco nisi est amet excepteur. Velit anim sunt deserunt esse nisi qui cupidatat ut aute deserunt excepteur aute. Proident laboris anim est consequat id et veniam.</p>
+ </div>
+ <a href="#documentation" data-toggle="tab" role="tab" aria-controls="documentation" aria-selected="false">Documentation</a>
+ <div class="tab-pane" id="documentation" role="tabpanel" aria-label="Documentation content" aria-hidden="true">
+ <h4>Documentation</h4>
+ <p>Eu non consequat consequat pariatur exercitation velit non nostrud laborum cillum. Proident proident deserunt ea tempor cillum anim. Anim sit eu ullamco est adipisicing do sit eiusmod cillum. Quis pariatur officia non exercitation veniam minim fugiat esse sit enim. Tempor non esse sit ad elit labore proident proident sint culpa nisi ex laborum ut. Cillum voluptate nisi amet sunt dolor excepteur duis reprehenderit magna mollit sint culpa ea.</p>
+ </div>
+ <a href="#downloads" data-toggle="tab" role="tab" aria-controls="downloads" aria-selected="false">Downloads</a>
+ <div class="tab-pane" id="downloads" role="tabpanel" aria-label="Downloads content" aria-hidden="true">
+ <h4>Downloads</h4>
+ <p>Enim minim consequat consequat magna non adipisicing mollit est ut. Aliqua dolor enim commodo nulla deserunt occaecat cillum laboris magna dolor. Fugiat ad exercitation commodo quis do incididunt sunt nisi excepteur fugiat. Qui dolor ipsum reprehenderit duis laborum.</p>
+ </div>
+ <a href="#community" data-toggle="tab" role="tab" aria-controls="community" aria-selected="false">Community</a>
+ <div class="tab-pane" id="community" role="tabpanel" aria-label="Community content" aria-hidden="true">
+ <h4>Community</h4>
+ <p>Ex incididunt amet aliquip sint enim irure minim ut anim tempor. Mollit laboris laboris cillum aliquip consequat ut mollit commodo aute est consectetur esse. Irure minim do magna amet proident. Aliquip aliqua dolor cupidatat exercitation proident culpa fugiat anim. Adipisicing nostrud non voluptate eiusmod Lorem consectetur amet magna proident. Consectetur duis ullamco id quis sunt sunt ex deserunt cillum in et esse tempor.</p>
+ </div>
+ <a href="#support" data-toggle="tab" role="tab" aria-controls="support" aria-selected="false">Support</a>
+ <div class="tab-pane" id="support" role="tabpanel" aria-label="Support content" aria-hidden="true">
+ <h4>Support</h4>
+ <p>Incididunt cupidatat do exercitation irure anim culpa ad. Dolore culpa aute pariatur est esse aliqua occaecat excepteur magna. Aute sint magna est nisi. Labore pariatur aliquip labore aute in exercitation fugiat consequat. Qui dolor enim irure laboris do anim Lorem laboris amet.</p>
+ </div>
+ <a href="#development" data-toggle="tab" role="tab" aria-controls="development" aria-selected="false">Development</a>
+ <div class="tab-pane" id="development" role="tabpanel" aria-label="Development content" aria-hidden="true">
+ <h4>Development</h4>
+ <p>Incididunt irure tempor nostrud non magna officia duis tempor velit amet. Laborum id culpa amet aliquip proident. Est esse enim adipisicing minim aute qui amet nisi veniam eu. Consectetur duis eu nisi excepteur ullamco mollit anim mollit laboris pariatur ea est dolore tempor.</p>
+ </div>
+ </div>
+ </div>
+ `;
+ },
+};