pui-css-tabs
v3.1.3 bootstrap pivotal ui pivotal ui modularized css
pui-css-tabs
A CSS tabs component that can be installed via this npm package. This package provides all of the CSS you need to use the component.
Installation
To install the package from the command line:
npm install pui-css-tabs
Usage
Note: this requires Boostrap's JavaScript.
<div class="tab-highlight">
<div class="row">
<div class="col-md-8">
<h1>Service Plans</h1>
<ul class="nav nav-stacked">
<li class="active">
<a data-toggle="tab" href="#home">
<div class="row">
<div class="col-md-10 tab-title">Spark</div>
<div class="col-md-14">Free</div>
</div>
</a>
</li>
<li>
<a data-toggle="tab" href="#profile">
<div class="row">
<div class="col-md-10 tab-title">Boost</div>
<div class="col-md-14">$10/month</div>
</div>
</a>
</li>
<li>
<a data-toggle="tab" href="#messages">
<div class="row">
<div class="col-md-10 tab-title">Amp</div>
<div class="col-md-14">$50/month</div>
</div>
</a>
</li>
<li>
<a data-toggle="tab" href="#settings">
<div class="row">
<div class="col-md-10 tab-title">
Shockingly long plan name is important to test
</div>
<div class="col-md-14">$1000/month</div>
</div>
</a>
</li>
</ul>
</div>
<div class="col-md-16">
<h1>Plan Features</h1>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">Content 1</div>
<div class="tab-pane fade" id="profile">Content 2</div>
<div class="tab-pane fade" id="messages">Content 3</div>
<div class="tab-pane fade" id="settings">Content 4</div>
</div>
</div>
</div>
</div>
You can find more examples of the tabs component in the pui style guide
This is a component of Pivotal UI, a collection of React and CSS components for rapidly building and prototyping UIs.
(c) Copyright 2017 Pivotal Software, Inc. All Rights Reserved.