BX Swiss Component Library

Tabs

The tabs pattern is used to allow users to toggle pieces of information that are not initialy visible on page load.

It’s comprised of multiple components that show and hide sections of content through the use of JavaScript.

<div class="container">
    <div class="grid">
        <div class="cell cell--1 cell--small-1/2 cell--medium-1/4">
            <a href="#" class="box ">
                <div class="media ">
                    <div class="media__visual">
                        <svg viewBox="0 0 24 24" class="icon icon--s ">
                    		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#news"></use>
                    	</svg>
                    </div>
                    <div class="media__content">
                        News / ad-hoc media releases
                    </div>
                </div>
            </a>
        </div>
        <div class="cell cell--1 cell--small-1/2 cell--medium-1/4">
            <a href="#" class="box ">
                <div class="media ">
                    <div class="media__visual">
                        <svg viewBox="0 0 24 24" class="icon icon--s ">
                    		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#list"></use>
                    	</svg>
                    </div>
                    <div class="media__content">
                        Listings
                    </div>
                </div>
            </a>
        </div>
        <div class="cell cell--1 cell--small-1/2 cell--medium-1/4">
            <a href="#" class="box is-active">
                <div class="media ">
                    <div class="media__visual">
                        <svg viewBox="0 0 24 24" class="icon icon--s ">
                    		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#suspended"></use>
                    	</svg>
                    </div>
                    <div class="media__content">
                        Suspensions
                    </div>
                </div>
            </a>
        </div>
        <div class="cell cell--1 cell--small-1/2 cell--medium-1/4">
            <a href="#" class="box ">
                <div class="media ">
                    <div class="media__visual">
                        <svg viewBox="0 0 24 24" class="icon icon--s ">
                    		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#time"></use>
                    	</svg>
                    </div>
                    <div class="media__content">
                        Latest trades
                    </div>
                </div>
            </a>
        </div>
    </div>
    <section class="is-hidden">
        <div class="box">
            <p class="heading">No news available</p>
        </div>
    </section>
    <section class="is-hidden">
        <div class="box">
            <p class="heading">No listings available</p>
        </div>
    </section>
    <section>
        <div class="box">
            <p class="heading">No suspensions available</p>
        </div>
    </section>
    <section class="is-hidden">
        <div class="box">
            <p class="heading">No latest trades available</p>
        </div>
    </section>
</div>
 
<div class="container">
    <div class="grid">
        {{#each tabs}}
            <div class="cell cell--1 cell--small-1/2 cell--medium-1/4">
                <a href="#" class="box {{#if isActive}}is-active{{/if}}">
                    {{> @media text=title icon=icon}}
                </a>
            </div>
        {{/each}}
    </div>
    {{#each tabs}}
        <section {{#unless isActive}}class="is-hidden"{{/unless}}>
            <div class="box">
                <p class="heading">{{content}}</p>
            </div>
        </section>
    {{/each}}
</div>
 
{
  "tabs": [
    {
      "title": "News / ad-hoc media releases",
      "icon": "news",
      "content": "No news available"
    },
    {
      "title": "Listings",
      "icon": "list",
      "content": "No listings available"
    },
    {
      "title": "Suspensions",
      "icon": "suspended",
      "content": "No suspensions available",
      "isActive": true
    },
    {
      "title": "Latest trades",
      "icon": "time",
      "content": "No latest trades available"
    }
  ]
}