Tabs organize content across different screens, data sets, and other interactions.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/tabs@17.0.30-alpha.0

Name	Age	Position
John Wicker	38	Hitman
John Wicker	38	Hitman
John Wicker	32	Hitman
Expandable	38	Hitman
John Wicker	38	Hitman

Bostadens gatuadress

Ditt personnumer Varför frågar vi efter personnummer?

        <button type="button" class="if button primary large">Nästa steg</button>
      </form>
    </section>
    <section
      aria-labelledby="tab-hero-main-3"
      id="section-tabs-main-3"
      class="if tab-panel tab-panel--selected"
      role="tabpanel"
      tabindex="-1"
      hidden=""

Preview

<div class="if block">
    <div class="if container">
        <div class="if tabs">
            <ul class="if" role="tablist">
                <li class="if" role="presentation">
                    <a
                        class="if"
                        href="#section-tabs-1"
                        id="tab-tabs-1"
                        role="tab"
                        aria-selected="true"
                        >Section 1</a
                    >
                </li>
                <li class="if" role="presentation">
                    <a class="if" href="#section-tabs-2" id="tab-tabs-2" role="tab" tabindex="-1"
                        >Section 2</a
                    >
                </li>
                <li class="if" role="presentation">
                    <a class="if" href="#section-tabs-3" id="tab-tabs-3" role="tab" tabindex="-1"
                        >Section 3</a
                    >
                </li>
            </ul>
            <section
                aria-labelledby="tab-tabs-1"
                id="section-tabs-1"
                class="if tab-panel"
                role="tabpanel"
                tabindex="-1"
            >
                <div class="if alert-banner error">
                    <p>
                        Vi minder dig om, at din selvrisiko ikke er blevet betalt. Du kan indbetale
                        beløbet via MobilePay eller via det girokort, vi har sendt dig. Du kan se
                        bort fra denne besked, hvis du netop har betalt.
                    </p>
                </div>
            </section>
            <section
                aria-labelledby="tab-tabs-2"
                id="section-tabs-2"
                class="if tab-panel tab-panel--selected"
                role="tabpanel"
                tabindex="-1"
                hidden=""
            >
                <h2 class="if">Section 2</h2>
                <p class="if">
                    Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper,
                    eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec
                    turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed
                    dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a
                    aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat
                    tellus.
                </p>
            </section>
            <section
                aria-labelledby="tab-tabs-3"
                id="section-tabs-3"
                class="if tab-panel tab-panel--selected"
                role="tabpanel"
                tabindex="-1"
                hidden=""
            >
                <h2 class="if">Section 3</h2>
                <p class="if">
                    Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper,
                    eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec
                    turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed
                    dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a
                    aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat
                    tellus.
                </p>
            </section>
        </div>
    </div>
</div>

Wide

<div class="if block">
    <div class="if container">
        <div class="if tabs wide">
            <ul class="if" role="tablist">
                <li class="if" role="presentation">
                    <a
                        class="if"
                        href="#section-tabs-1"
                        id="tab-tabs-1"
                        role="tab"
                        aria-selected="true"
                        >Section 1</a
                    >
                </li>
                <li class="if" role="presentation">
                    <a class="if" href="#section-tabs-2" id="tab-tabs-2" role="tab" tabindex="-1"
                        >Section 2</a
                    >
                </li>
                <li class="if" role="presentation">
                    <a class="if" href="#section-tabs-3" id="tab-tabs-3" role="tab" tabindex="-1"
                        >Section 3</a
                    >
                </li>
            </ul>
            <section
                aria-labelledby="tab-tabs-1"
                id="section-tabs-1"
                class="if tab-panel"
                role="tabpanel"
                tabindex="-1"
            >
                <div class="if alert-banner error">
                    <p>
                        Vi minder dig om, at din selvrisiko ikke er blevet betalt. Du kan indbetale
                        beløbet via MobilePay eller via det girokort, vi har sendt dig. Du kan se
                        bort fra denne besked, hvis du netop har betalt.
                    </p>
                </div>
            </section>
            <section
                aria-labelledby="tab-tabs-2"
                id="section-tabs-2"
                class="if tab-panel tab-panel--selected"
                role="tabpanel"
                tabindex="-1"
                hidden=""
            >
                <h2 class="if">Section 2</h2>
                <p class="if">
                    Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper,
                    eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec
                    turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed
                    dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a
                    aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat
                    tellus.
                </p>
            </section>
            <section
                aria-labelledby="tab-tabs-3"
                id="section-tabs-3"
                class="if tab-panel tab-panel--selected"
                role="tabpanel"
                tabindex="-1"
                hidden=""
            >
                <h2 class="if">Section 3</h2>
                <p class="if">
                    Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper,
                    eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec
                    turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed
                    dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a
                    aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat
                    tellus.
                </p>
            </section>
        </div>
    </div>
</div>

Dark

<div class="if block">
    <div class="if container">
        <div class="if tabs dark">
            <ul class="if" role="tablist">
                <li class="if" role="presentation">
                    <a
                        class="if"
                        href="#section-tabs-1"
                        id="tab-tabs-1"
                        role="tab"
                        aria-selected="true"
                        >Section 1</a
                    >
                </li>
                <li class="if" role="presentation">
                    <a class="if" href="#section-tabs-2" id="tab-tabs-2" role="tab" tabindex="-1"
                        >Section 2</a
                    >
                </li>
                <li class="if" role="presentation">
                    <a class="if" href="#section-tabs-3" id="tab-tabs-3" role="tab" tabindex="-1"
                        >Section 3</a
                    >
                </li>
            </ul>
            <section
                aria-labelledby="tab-tabs-1"
                id="section-tabs-1"
                class="if tab-panel"
                role="tabpanel"
                tabindex="-1"
            >
                <div class="if alert-banner error">
                    <p>
                        Vi minder dig om, at din selvrisiko ikke er blevet betalt. Du kan indbetale
                        beløbet via MobilePay eller via det girokort, vi har sendt dig. Du kan se
                        bort fra denne besked, hvis du netop har betalt.
                    </p>
                </div>
            </section>
            <section
                aria-labelledby="tab-tabs-2"
                id="section-tabs-2"
                class="if tab-panel tab-panel--selected"
                role="tabpanel"
                tabindex="-1"
                hidden=""
            >
                <h2 class="if">Section 2</h2>
                <p class="if">
                    Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper,
                    eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec
                    turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed
                    dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a
                    aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat
                    tellus.
                </p>
            </section>
            <section
                aria-labelledby="tab-tabs-3"
                id="section-tabs-3"
                class="if tab-panel tab-panel--selected"
                role="tabpanel"
                tabindex="-1"
                hidden=""
            >
                <h2 class="if">Section 3</h2>
                <p class="if">
                    Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper,
                    eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec
                    turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed
                    dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a
                    aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat
                    tellus.
                </p>
            </section>
        </div>
    </div>
</div>

Edit this section

Tab overflow

<div class="if" style="position:relative; ">
    <div class="if dropdown-filter-holder truncated-tabs">
        <button
            type="button"
            aria-controls="behaviours-toolbar-office-filters-1"
            aria-haspopup="true"
            role="combobox"
            aria-owns="behaviours-toolbar-office-filters-1"
            aria-expanded="false"
            class="if dropdown-filter-button"
        >
            <span class="if">Anatomy</span>
        </button>
        <nav class="if dropdown-filter dropdown-menu" role="listbox">
            <ul class="if">
                <li class="if">
                    <a href="#" class="if">Tabs</a>
                </li>
                <li class="if">
                    <a href="#" class="if">Behaviours</a>
                </li>
                <li class="if">
                    <a href="#" class="if is-active">Anatomy</a>
                </li>
                <li class="if">
                    <a href="#" class="if">Implementation</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

Edit this section

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.22.2 (2022-05-03)

Miscellaneous chores

package locks: update package locks (813eac7)

14.20.1 (2022-04-19)

Miscellaneous chores

changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.18.3 (2022-04-13)

Bug Fixes

changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.16.0 (2022-04-07)

Bug Fixes

🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.9.0 (2022-03-03)

Miscellaneous chores

🤖 Bootstrap (6822f5b)

14.8.1 (2022-02-23)

Bug Fixes

🐛 Add missing imports of typography CSS variables (e716c65) , closes #559412

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

use correct versions (f1b5deb)

14.3.0 (2022-02-09)

Bug Fixes

Use correct vars and mixins (f879b28)
Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

💡 Change focus styles, remove whatinput (75fd31b) , closes #505205
rebuild and reinstall (f9fb687)

reinstall (885c74b)

fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

reinstall.. again.. (8f5efa8)
revert to v13.12.2 (2ff5399)

13.12.3 (2021-11-09)

⚠ BREAKING CHANGES

🧨 The scope for If Design System npm packages has now changed from @if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core
🧨 Util is now renamed to Utils
🧨 We have now changed the navigation structure for the documentation site. Please update any saved links!
🧨 Navigation structure has now changed. Please see release notes!

Bug Fixes

fix decimal issues (bb194c9)

Documentation Updates

✏️ Adjust documentation, examples etc (d161cd3)
✏️ Documentation adjustments (73c09e3) , closes #467386
✏️ Make variations tables more condensed (4344a3a)
✏️ Move position of the quick links (5cb0897)
✏️ Update documentation (b1baa6d)
✏️ Update links and change navigation structure (0bfd27d) , closes #490579
✏️ Update Tabs documentation (3200ec5) , closes #467386

Code Refactoring

💡 Categorize components (9965266) , closes #490579
💡 Reduce spacing tokens, use correct size tokens (97aa461)
💡 Remove manual box-shadow on example (5cd6477)
💡 Rename scope and repository (3ea5423)
💡 Use new navigation structure for documentation (415aee5) , closes #490579
another change in the structure (38a0d2e)

Miscellaneous chores

🤖 Prune changelogs (2c660c2)
🤖 Rename util to utils (f78721f)

bootstrap (6fc1ed8)

fix after merge (ba93e38)
fix all old references to util (d57bf17)
prepare for merge (0184490)

reinstall (da80dba)

Rename scope and repo (257684e)
use correct version for utils (49e72d9)

13.12.0 (2021-10-22)

Bug Fixes

🐛 util (bc7fb32) , closes #491994 . Fix sass compiler calc function precision

13.11.0 (2021-10-19)

Features

🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

🐛 Complete the pseudo-element fix (1dcee2c)

13.7.0 (2021-09-22)

Code Refactoring

💡 Reduced code, attempting to solve responsive issue (65848f6) . ✅ Closes: 459429
💡 Tabs now have new design and new default truncation (ee0e777) , closes #459429

Documentation Updates

✏️ Update documentation for tabs (ed7db56) , closes #459429
✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

🐛 Update repository urls (3dae3a3) , closes #465976

13.6.0 (2021-09-08)

Documentation Updates

Use default shortcut listing for demo links (a746602)
🤖 Use node v14 (4009973)

bootstrap (d23e139)

🤖 Use correct order for diff (cc6a4fd)

12.14.1 (2021-08-12)

Miscellaneous chores

🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621
🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
🤖 Reinstall (e660696)
🤖 Update published date (61e7ccf)

12.6.0 (2021-05-27)

Bug Fixes

🐛 Manually set firstPublished and lastModified (e83af7d)
🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

⚠ BREAKING CHANGES

🧨 All of the mixins have now been renamed
🧨 Teasers are no more. It has been replaces with Lifestyle Navigational Card, Text Navigational Card. Studio Teasers is gone, use Studio Navigational Card instead, which is based on the old Studio Crosslinks
🧨 Notification is now renamed to Alert Banner
🧨 This extracts the Hero variation with no image into a separate, design updated component named Header
🧨 Footer is now renamed to Global Footer

Features

🎸 Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component

Bug Fixes

🐛 Update references (c08f107)

Code Refactoring

💡 Remove Teasers, added Text and Lifestyle cards (1247479) , closes #336508
💡 Rename and consolidate mixins (67cf470) , closes #268081
💡 Rename Footer to Global Footer (7cb7239) , closes #336508
💡 Rename Notification to Alert Banner (8b4e48d) , closes #336508

Miscellaneous chores

🤖 Convert util tokens from theo to style-dictionary (99fb4f5)
🤖 Finalize breakpoint token conversion (f50ea0d)
🤖 Reinstall (2c763ea)
🤖 Reinstall (69e1a5b)
🤖 Update all design token references (c640d15)
🤖 Update references to util variables (b79ec36)
🤖 Updating links (70f166e)

rebuild (7edb430)

🤖 Rename Change Log to Changelog (d412e63)
🤖 Remove all references to sketch (35fc554) , closes #339203
🤖 Update package fields (200c0af)

10.0.0 (2021-02-15)

⚠ BREAKING CHANGES

🧨 form-group is now renamed to input-wrapper, a more logical name

Code Refactoring

💡 Rename form-group to input-wrapper (7ee3bae)
reinstall packages (fcfacf4)

7.1.0 (2020-11-16)

Features

🎸 Add support for auto generation of components index (9444600) , closes #309650

6.43.3 (2020-11-03)

Miscellaneous chores

🤖 Manually set version (e4d9ca6)
🤖 Rename repository from guybrush to if-design-system (c18bccd)

reinstall (2cefe15)

6.36.0 (2020-10-12)

Features

🎸 Add updated focus styling for tabs (890f0a0)

Miscellaneous chores

🤖 Add what-input to demo and dev files (56801b7)
🤖 Rename focus style mixins (e18b688)

6.29.3 (2020-09-07)

Documentation Updates

✏️ Merge atoms/molecules/organisms into components (90ed590)

6.28.0 (2020-09-02)

Bug Fixes

🐛 Fix tabs for hero, and fix tab bottom border (a2d814d)

6.27.1 (2020-08-31)

Bug Fixes

🐛 Fix tab horizontal line, and tabs in hero (ecb1287)

Miscellaneous chores

🤖 Add example on tabs in hero in dev (8dbd033)

6.26.12 (2020-08-03)

Documentation Updates

✏️ Update documentation for the new registry (3e7ba20)

Miscellaneous chores

🤖 lerna bootstrap (d835ec9)
🤖 Temporarily remove package-lock.json-files (87b3f7f)
🤖 Update references to new scope (b5575dd)

6.26.10 (2020-07-14)

Miscellaneous chores

🤖 Manually update some links (ecc0133)
🤖 Update CHANGELOG.md links to workitems and commits (ab2887b)
🤖 Revert block padding-bottom 0 fix for tabs (bc6cded)

6.26.0 (2020-07-13)

Features

🎸 Make tabs more positionable in the general layout (7b2dc8b)

6.23.0 (2020-07-01)

Miscellaneous chores

reinstall (1ab1527)

6.22.0 (2020-07-01)

Miscellaneous chores

🤖 Search and replace old color usage (3e5abb0)

6.21.6 (2020-06-11)

Miscellaneous chores

🤖 Remove .zip files from .npmignore (b3bc7dc)

6.19.0 (2020-06-02)

Miscellaneous chores

🤖 Finalize documentation on tabs (e3a3240)
🤖 Update preprocessor files for tabs (3e39845)

reinstall (3416c65)

6.17.1 (2020-05-25)

Bug Fixes

🐛 Fix hover bolding increasing container with for tabs titles (6aa4668)

Documentation Updates

✏️ Update semantics for documentation of tabs (b8e3071)

Miscellaneous chores

🤖 Update preprocessor files for tabs (e9935b9)

6.16.1 (2020-05-20)

Bug Fixes

🐛 Fix routing for dev server (295db6e)

6.15.5 (2020-05-15)

Miscellaneous chores

🤖 Fix tyos (8ce274f)
prepped and ready to separate documentation site from code (d3e1fd9)
pruning and reinstalling (5cda0bc)

reinstall (939dae6)

reinstall (cae55fb)

Remove livingcss data and add frontmatter data (b384946)

6.15.4 (2020-05-14)

Miscellaneous chores

lerna bootstrap (0c4f599)

6.15.2 (2020-05-11)

Miscellaneous chores

reinstall and build (aedc097)

6.15.0 (2020-05-07)

Miscellaneous chores

🤖 reinstall (80dc63c)
update deps (3fbea80)

6.11.2 (2020-04-22)

Bug Fixes

🐛 Clean up the margin/padding mess I made with lists (a107891)

6.11.0 (2020-04-22)

Bug Fixes

🐛 Add sr only text for footer logo link (2971dd9)

6.10.9 (2020-04-22)

Miscellaneous chores

🤖 Add *.zip-files to .npmignore-files (062b8b0)

6.10.6 (2020-04-17)

Miscellaneous chores

🤖 lerna bootstrap (d8faf26)

6.9.1 (2020-04-16)

Documentation Updates

✏️ Use correct badge color in README.md (03b563e)

6.6.0 (2020-04-09)

Documentation Updates

✏️ Change edit this document to edit this section (791b646)

6.5.3 (2020-04-06)

Documentation Updates

✏️ Some more sg updates and tweaks (d1d6802)

6.3.4 (2020-04-01)

Miscellaneous chores

🤖 Use more of if styling on documentation site (2eaf386)

5.3.0 (2020-03-18)

Bug Fixes

🐛 Adjust responsive view for tabs (0cc442e)

5.2.0 (2020-03-17)

Code Refactoring

💡 Reorganized sections in the documentations (dd31802) . Adjust navigation styling on the left hand side. The reorganization is mostly to make the site load a bit smoother

5.0.4 (2020-03-14)

Miscellaneous chores

🤖 Delete really old install files, update README files (c5d4893)
🤖 Remove .npmrc fles (4e26249)

5.0.1-alpha.164 (2020-03-13)

Features

🎸 Add component tabs (3b6c11b)
🎸 Add new component: Tabs (76646b1)

Miscellaneous chores

🤖 Remove packages not approved for VID (2ef74aa)
lerna bootstrap (8af99ba)

5.0.0 (2019-09-11)

Miscellaneous chores

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

🎸 Add new font styles (1c3e3b7)

3.2.11 (2019-08-07)

Miscellaneous chores

🤖 Remove packages not approved for VID (2ef74aa)

5.0.0 (2019-09-11)

Miscellaneous chores

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

🎸 Add new font styles (1c3e3b7)

3.2.11 (2019-08-07)

Miscellaneous chores

🤖 Remove packages not approved for VID (2ef74aa)

5.0.0 (2019-09-11)

Miscellaneous chores

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

🎸 Add new font styles (1c3e3b7)

5.0.0 (2019-09-11)

Miscellaneous chores

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

🎸 Add new font styles (1c3e3b7)

4.2.0 (2019-07-08)

Features

🎸 Add new font styles (1c3e3b7)

Miscellaneous chores

🤖 Update deps (2e84691)

3.2.2 (2019-05-08)

Bug Fixes

🐛 Set a min height and let the text align to bottom. (806e5cd) , closes #220

3.1.6 (2019-04-12)

Documentation Updates

✏️ Clarify usage of npm token, and change name to gb (224fe32)

3.0.0 (2019-01-15)

⚠ BREAKING CHANGES

Class syntax has completely changed.

Features

🎸 Scoping down guybrush (33e0d71)

2.7.2 (2018-11-21)

Bug Fixes

🐛 Remove all references to verb (2397d6b)

2.6.2 (2018-11-19)

Miscellaneous chores

🤖 Remove references to guybrush in documentation, for nw (002e662)

2.6.1 (2018-11-19)

Documentation Updates

✏️ Remove @guybrush-prefix from instal notes (c8d373e)

2.4.5 (2018-10-25)

Documentation Updates

update docs according to new style (2a7aa89)

2.4.4 (2018-10-25)

Code Refactoring

💡 Refactor styleguide, new theme (c202302)

1.18.2 (2018-09-19)

Miscellaneous chores

🤖 Make gulp run more silent (56e050e)

1.18.1 (2018-09-17)

Miscellaneous chores

🤖 Add a .npmrc into each module (eed608f)
release: :bookmark: publish v1.18.1 (f8aed44)

1.18.0 (2018-09-17)

Miscellaneous chores

release: :bookmark: publish v1.18.0 (aa3271d)

1.17.1 (2018-09-18)

Miscellaneous chores

release: :bookmark: publish v1.17.1 (2d8219c)

1.18.1 (2018-09-17)

Miscellaneous chores

🤖 Add a .npmrc into each module (eed608f)
release: :bookmark: publish v1.18.1 (f8aed44)

1.18.0 (2018-09-17)

Miscellaneous chores

release: :bookmark: publish v1.18.0 (aa3271d)

1.17.0 (2018-09-10)

Miscellaneous chores

release: :bookmark: publish v1.16.0 (b5316b2)
release: :bookmark: publish v1.17.0 (01db781)

1.15.0 (2018-09-07)

Miscellaneous chores

release: :bookmark: publish v1.15.0 (31be150)

1.14.0 (2018-09-06)

Miscellaneous chores

release: :bookmark: publish v1.14.0 (7b15e64)

1.13.0 (2018-09-04)

Features

🎸 Add speccer for specs (3edaa3e)

Code Refactoring

💡 Ease footprint of modules (70fe5c9)

Miscellaneous chores

release: :bookmark: publish v1.13.0 (b99e16d)

1.12.1 (2018-08-23)

Miscellaneous chores

🤖 Some refactoring, added version to bundle, package def (e4ee4a8) . to stylus files, updated prism and templates
release: :bookmark: publish v1.12.1 (189057f)

1.12.0 (2018-08-22)

Miscellaneous chores

release: :bookmark: publish v1.12.0 (7c44ddc)

1.11.0 (2018-08-21)

Miscellaneous chores

packages: don'tuse dist in filename (c65ce81)
release: :bookmark: publish v1.11.0 (cbd5359)

1.10.38 (2018-08-20)

Miscellaneous chores

release: :bookmark: publish v1.10.38 (7d59fc9)

1.10.35 (2018-08-20)

Miscellaneous chores

release: :bookmark: publish v1.10.35 (719ac06)

1.10.34 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.34 (3af5229)

1.10.33 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.33 (adec027)

1.10.32 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.32 (994e8a8)

1.10.31 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.31 (7a31e83)

1.10.30 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.30 (2fbaba0)

1.10.29 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.29 (d9cdb30)

1.10.28 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.28 (70864a5)

1.10.27 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.27 (4ff395c)

1.10.26 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.26 (30d9bbc)

1.10.25 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.25 (a77f3e4)

1.10.24 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.24 (ff3fe91)

1.10.23 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.23 (a1df933)

1.10.22 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.22 (04a1fbc)

1.10.21 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.21 (94e201d)

1.10.20 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.20 (25c40aa)

1.10.19 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.19 (607b524)

1.10.18 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.18 (ef6b333)

1.10.17 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.17 (5e54e21)

1.10.16 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.16 (479e563)

1.10.15 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.15 (508bffb)

1.10.14 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.14 (585912a)

1.10.13 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.13 (9fc1d4b)

1.10.12 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.12 (e638d67)

1.10.11 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.11 (e329aea)

1.10.10 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.10 (b594d1e)

1.10.9 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.9 (6f68c59)

1.10.8 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.8 (1b7ef57)

1.10.7 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.7 (95bc695)

1.10.6 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.6 (ad7cbab)

1.10.5 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.5 (a7efeed)

1.10.4 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.4 (4f08bfa)

1.10.3 (2018-08-17)

Documentation Updates

✏️ Update onboarding documentation (505ae9b)

Miscellaneous chores

release: :bookmark: publish v1.10.3 (7ca1bcf)

1.10.2 (2018-08-16)

Miscellaneous chores

release: :bookmark: publish v1.10.2 (781968c)

1.10.1 (2018-08-16)

Miscellaneous chores

release: :bookmark: publish v1.10.1 (aee140f)

1.10.0 (2018-08-16)

Miscellaneous chores

release: :bookmark: publish v1.10.0 (7dac7da)
table: scaffolding (1d06368)

1.9.1 (2018-08-16)

Miscellaneous chores

release: :bookmark: publish v1.9.1 (0516f24)

1.9.0 (2018-08-15)

Features

🎸 Add new component Tabs (cd2d8fb)

Miscellaneous chores

release: :bookmark: publish v1.9.0 (9718b47)

Edit this section

CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, Opens in new window

Table of Contents

Modifiers

Default

Section 2

Section 3

Wide

Section 2

Section 3

Dark

Section 2

Section 3

Truncation

Tab overflow

Changelog

Change Log

14.22.2 (2022-05-03)

Miscellaneous chores

14.20.1 (2022-04-19)

Miscellaneous chores

14.18.3 (2022-04-13)

Bug Fixes

14.16.0 (2022-04-07)

Bug Fixes

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

14.3.0 (2022-02-09)

Bug Fixes

14.2.2 (2021-12-10)

Code Refactoring

13.12.3 (2021-11-09)

⚠ BREAKING CHANGES

Bug Fixes

Documentation Updates

Code Refactoring

Miscellaneous chores

13.12.0 (2021-10-22)

Bug Fixes

13.11.0 (2021-10-19)

Features

13.9.2 (2021-09-30)

Bug Fixes

13.7.0 (2021-09-22)

Code Refactoring

Documentation Updates

13.6.3 (2021-09-17)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

12.14.1 (2021-08-12)

Miscellaneous chores

12.13.1 (2021-08-11)

Bug Fixes

12.6.0 (2021-05-27)

Bug Fixes

12.0.0 (2021-05-05)

⚠ BREAKING CHANGES

Features

Bug Fixes

Code Refactoring

Miscellaneous chores

10.0.0 (2021-02-15)

⚠ BREAKING CHANGES

Code Refactoring

7.1.0 (2020-11-16)

Features

6.43.3 (2020-11-03)

Miscellaneous chores

6.36.0 (2020-10-12)

Features

Miscellaneous chores

6.29.3 (2020-09-07)

Documentation Updates

6.28.0 (2020-09-02)

Bug Fixes

6.27.1 (2020-08-31)

Bug Fixes

Miscellaneous chores