open-index/open-npm huggingface dataset:
npm package: @npmcorp/pui-css-sidebars
Description: sidebars css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 1.0.0-1

# @npmcorp/pui-css-sidebars

A CSS sidebars component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-sidebars
```


*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-css-spinners
Description: spinners css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 8.5.0

# @npmcorp/pui-css-spinners

A CSS spinners component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-spinners
```

## Usage

```html
<div class="spinner-lg bkg-default-5 out">
  <i class="fa fa-spin fa-cog mtxl"></i>
</div>

<div class="spinner-sm bkg-default-5 out">
  <i class="fa fa-spin fa-cog mtxl"></i>
</div>
```

You can find more examples of the spinners component in the [pui style guide](http://styleguide.pivotal.io/elements.html#iconography_spinner)

*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-css-svg-iconography
Description: svg-iconography css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 8.5.0

# @npmcorp/pui-css-svg-iconography

A CSS svg-iconography component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-svg-iconography
```

## Usage

Note that this requires the Font Awesome font to be loaded.

```html
<i class="fa fa-download type-brand-8 title"></i>
```


You can find more examples of the svg-iconography component in the [pui style guide](http://styleguide.pivotal.io)

*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-css-svgeople
Description: svgeople css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 8.4.1

# @npmcorp/pui-css-svgeople

A CSS svgeople component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-svgeople
```


*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-css-tables
Description: tables css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 7.1.1

# @npmcorp/pui-css-tables

A CSS tables component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-tables
```

## Usage

```html
<table class="table table-data table-light">
  <thead>
    <tr>
      <th>Service Instance</th>
      <th>Service Plan</th>
      <th>Bound Apps</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>oracle-db-sct</td>
      <td>Oracle DB</td>
      <td>12</td>
    </tr>
    <tr>
      <td>oracle-db-sct</td>
      <td>Oracle DB</td>
      <td>12</td>
    </tr>
    <tr>
      <td>oracle-db-sct</td>
      <td>Oracle DB</td>
      <td>12</td>
    </tr>
    <tr>
      <td>oracle-db-sct</td>
      <td>Oracle DB</td>
      <td>12</td>
    </tr>
  </tbody>
</table>
```


You can find more examples of the tables component in the [pui style guide](http://styleguide.pivotal.io/objects.html#table)

*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-css-tabs
Description: tabs css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 8.4.0

# @npmcorp/pui-css-tabs

A CSS tabs component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-tabs
```

## Usage

Note: this requires Boostrap's JavaScript.

```html
<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](http://styleguide.pivotal.io/objects.html#tab)

*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-css-tile-layout
Description: tile-layout css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 6.4.0

# @npmcorp/pui-css-tile-layout

A CSS tile-layout component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-tile-layout
```

## Usage

This contains styles used only in `pui-react-tile-layout`

You can find more examples of the tile-layout component in the [pui style guide](http://styleguide.pivotal.io/react.html#tile_layout)

*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-css-tooltips
Description: tooltips css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 8.5.0

# @npmcorp/pui-css-tooltips

A CSS tooltips component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-tooltips
```

## Usage

Note: this requires the Bootstrap JavaScript.

```html
<p>
  Check out this
  <a id="link-with-tooltip-1" href="#" data-toggle="tooltip" data-placement="left" title="I should be on the left">
    tooltip on the left!
  </a>
</p>

<p>
  Check out this
  <a id="link-with-tooltip-2" href="#" data-toggle="tooltip" data-placement="right" title="I should be on the right">
    tooltip on the right!
  </a>
</p>

<p>
  <button id="button-with-tooltip-1" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="I should be on the top">
    Check out this tooltip on the top!
  </button>
</p>

<p>
  <button id="button-with-tooltip-2" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="I should be on the bottom">
    Check out this tooltip on the bottom!
  </button>
</p>
```


You can find more examples of the tooltips component in the [pui style guide](http://styleguide.pivotal.io/objects.html#tooltip)

*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-css-traffic-lights
Description: traffic-lights css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 8.5.0

# @npmcorp/pui-css-traffic-lights

A CSS traffic-lights component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-traffic-lights
```

## Usage

```html
<h3>On</h3>
<ul class="traffic-lights list-unstyled mvm">
  <li class="green-light">
    <i class="fa fa-circle"></i>
    5
  </li>
  <li class="gray-light">
    <i class="fa fa-circle"></i>
    1
  </li>
  <li class="red-light">
    <i class="fa fa-circle"></i>
    8
  </li>
</ul>
```

You can find more examples of the traffic-lights component in the [pui style guide](http://styleguide.pivotal.io/section.html#traffic-lights)

*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-css-typography
Description: typography css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 8.5.0

# @npmcorp/pui-css-typography

A CSS typography component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-typography
```

## Usage

```html
<h1 class="title">h1.title 42px</h1>
<h2>h2 25px</h2>
<p class="type-sm">small text 14px</p>
```

You can find more examples of the typography component in the [pui style guide](http://styleguide.pivotal.io/elements.html#typography)

*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-css-utils
Description: utils css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 8.2.1

# @npmcorp/pui-css-utils

A CSS utils component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-utils
```

## Usage

```html
<h3 class="invisible-no-js">Won't show if browser doesn't support JS.</h3>
```


You can find more examples of the utils component in the [pui style guide](http://styleguide.pivotal.io/section.html#utils)

*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-css-vertical-alignment
Description: vertical-alignment css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 6.4.0

# @npmcorp/pui-css-vertical-alignment

A CSS vertical-alignment component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-vertical-alignment
```

## Usage

```html
<div class="aligner txt-c">
  <a class="aligner-item" href="http://bitly.com/ZTHUDU">Centered content</a>
</div>
```


You can find more examples of the vertical-alignment component in the [pui style guide](http://styleguide.pivotal.io/layout.html#vertical_align)

*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-css-viewport-panes
Description: viewport-panes css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 8.5.0

# @npmcorp/pui-css-viewport-panes

A CSS viewport-panes component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-viewport-panes
```

## Usage

```html
<div class="pane bg-dark-2 viewport-pane-long">
  <div class="container bg-glow">
    <h1 class="type-neutral-11">This is a long viewport pane. There should be just enough to see the fold under it.</h1>
  </div>
</div>
```

```html
<div class="pane bg-dark-2 viewport-pane">
  <div class="container bg-glow">
    <h1 class="type-neutral-11">This is a viewport pane. There should be enough to see content below it.</h1>
  </div>
</div>
```

```html
<div class="pane bg-dark-2">
  <div class="container bg-glow">
    <h1 class="type-neutral-11">This is a regular pane. It's here to show the other two's behavior.</h1>
  </div>
</div>
```


You can find more examples of the viewport-panes component in the [pui style guide](http://styleguide.pivotal.io/layout.html#pane)

*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-css-whitespace
Description: whitespace css component for the npm fork of Pivotal UI, based on Bootstrap
Author: npm, Inc
Latest version: 6.4.0

# @npmcorp/pui-css-whitespace

A CSS whitespace component that can be installed via this npm package. The package provides all of the
CSS you need to use the component.



## Installation

To install the package, from the command line, type:

```
npm install pui-css-whitespace
```

## Usage

Letter                           | Description
-------------------------------- | ------------------------------------------------------------------
p, m                             | padding, margin
a, t, r, b, l, h, v              | all, top, right, bottom, left, horizontal, vertical
n, s, m, l, xl, xxl, xxxl, xxxxl | none(0px), small(5px), medium(7px), large(10px), extra large(20px), extra extra large (40px), extra extra extra large (120px), extra extra extra extra large (140px)

A CSS class is constructed by choosing one of the letters from each row. For example:

```html
<p>A normal paragraph</p>
<p class="pal">A paragraph with large padding</p>
```


You can find more examples of the whitespace component in the [pui style guide](http://styleguide.pivotal.io/all.html#list_whitespace)

*****************************************

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

[Styleguide](http://styleguide.pivotal.io)
[Github](https://github.com/pivotal-cf/pivotal-ui)

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-alerts
Description: React components to display flash messages to the user
Author: Pivotal Software, Inc
Latest version: 8.5.0

# pui-react-alerts

React components to display flash messages to the user

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#alerts_react) for fully rendered examples.

## Components

### SuccessAlert

Display a flash message to the user indicating success.

```js
var SuccessAlert = require('

#### Properties

- `dismissable`
  - `Boolean`: Determines whether the alert can be closed by the user
  - `Function`: Called when the user closes the alert

- `withIcon`
  - `Boolean`: Whether to show an icon with the alert text.


### InfoAlert

Display an informational flash message to the user.

```js
var InfoAlert = require('

#### Properties

- `dismissable`
  - `Boolean`: Determines whether the alert can be closed by the user
  - `Function`: Called when the user closes the alert

- `withIcon`
  - `Boolean`: Whether to show an icon with the alert text.


### WarningAlert

Display a flash message to warn the user.

```js
var WarningAlert = require('

#### Properties

- `dismissable`
  - `Boolean`: Determines whether the alert can be closed by the user
  - `Function`: Called when the user closes the alert

- `withIcon`
  - `Boolean`: Whether to show an icon with the alert text.


### ErrorAlert

Display a flash message to the user indicating an error condition.

```js
var ErrorAlert = require('

#### Properties

- `dismissable`
  - `Boolean`: Determines whether the alert can be closed by the user
  - `Function`: Called when the user closes the alert

- `withIcon`
  - `Boolean`: Whether to show an icon with the alert text.


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-autocomplete
Description: React autocomplete component
Author: Pivotal Software, Inc
Latest version: 8.2.4

# pui-react-autocomplete

React autocomplete component

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#autocomplete_react) for fully rendered examples.

## Components

### Autocomplete

An autocomplete that comes with a dropdown list

```js
var Autocomplete = require('

#### Properties

- `disabled`
  - `Bool`: Greys out and turns off event handlers.

- `input`
  - `React Component`: Use if you want to override the default AutocompleteInput.

- `maxItems`
  - `Number`: Cap the number of items that can appear in the dropdown list.

- `onClick`
  - `Function`: Event handler for click on the input (e.g. to automatically select value text).

- `onFilter`
  - `Function`: Optionally filter list items (other than by the input value).

- `onFocus`
  - `Function`: Event handler for focus on the input (e.g. to automatically show the list).

- `onInitializeItems`
  - `Function`: Your one chance to populate the list.

- `onPick`
  - `Function`: Event handler for choosing an item in the list.

- `onSearch`
  - `Function`: Override default search algorithm called whenever input value changes.

- `placeholder`
  - `String`: Placeholder text for the input.

- `selectedSuggestion`
  - `Any`: Matcher for the item in the list that is currently selected.

- `value`
  - `String`: The value of the input.


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-back-to-top
Description: React Back to Top component
Author: Pivotal Software, Inc
Latest version: 8.5.0

# pui-react-back-to-top

React Back to Top component

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#back_to_top) for fully rendered examples.

## Components

### BackToTop

A component for scrolling to the top of a page

```js
var BackToTop = require('



### BackToTopJquery

A component for scrolling to the top of a page using jQuery
Included in your JavaScript with `require('

```html
<a class="back-to-top" data-position="back-to-top" href="#" target="_blank" style="display: inline;"></a>
```



*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-buttons
Description: A collection of React components providing styled buttons and links
Author: Pivotal Software, Inc
Latest version: 8.5.0

# pui-react-buttons

A collection of React components providing styled buttons and links

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#button_react) for fully rendered examples.

## Components

### UIButton

A wrapper around the Pivotal UI button component

```js
var UIButton = require('

#### Properties

- `href`
  - `String`: Makes a button-styled link pointing to the given URL

- `block`
  - `Boolean`: Makes the button fill the width of its container

- `large`
  - `Boolean`: Enlarges the button


### DefaultButton





#### Properties

- `href`
  - `String`: Makes a button-styled link pointing to the given URL

- `block`
  - `Boolean`: Makes the button fill the width of its container

- `large`
  - `Boolean`: Enlarges the button


### DefaultAltButton





#### Properties

- `href`
  - `String`: Makes a button-styled link pointing to the given URL

- `block`
  - `Boolean`: Makes the button fill the width of its container

- `large`
  - `Boolean`: Enlarges the button


### LowlightButton





#### Properties

- `href`
  - `String`: Makes a button-styled link pointing to the given URL

- `block`
  - `Boolean`: Makes the button fill the width of its container

- `large`
  - `Boolean`: Enlarges the button


### DangerButton





#### Properties

- `href`
  - `String`: Makes a button-styled link pointing to the given URL

- `block`
  - `Boolean`: Makes the button fill the width of its container

- `large`
  - `Boolean`: Enlarges the button


### HighlightButton





#### Properties

- `href`
  - `String`: Makes a button-styled link pointing to the given URL

- `block`
  - `Boolean`: Makes the button fill the width of its container

- `large`
  - `Boolean`: Enlarges the button


### HighlightAltButton





#### Properties

- `href`
  - `String`: Makes a button-styled link pointing to the given URL

- `block`
  - `Boolean`: Makes the button fill the width of its container

- `large`
  - `Boolean`: Enlarges the button


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-collapse
Description: React components providing accordions for showing and hiding content
Author: Pivotal Software, Inc
Latest version: 8.5.0

# pui-react-collapse

React components providing accordions for showing and hiding content

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#collapse_react) for fully rendered examples.

## Components

### BaseCollapse

An unstyled accordion for showing and hiding content

```js
var BaseCollapse = require('

#### Properties

- `header`
  - `Element`: HTML to use as the accordion toggle

- `divider`
  - `Boolean`: Adds a line between the accordion header and accordion body


### Collapse

An accordion with an arrow icon in the toggle

```js
var Collapse = require('

#### Properties

- `header`
  - `Element`: HTML to use as the accordion toggle

- `divider`
  - `Boolean`: Adds a line between the accordion header and accordion body


### AltCollapse

An accordion with a plus/minus icon in the toggle

```js
var AltCollapse = require('

#### Properties

- `header`
  - `Element`: HTML to use as the accordion toggle

- `divider`
  - `Boolean`: Adds a line between the accordion header and accordion body


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-dividers
Description: React components providing horizontal rules for dividing content
Author: Pivotal Software, Inc
Latest version: 6.4.0

# pui-react-dividers

React components providing horizontal rules for dividing content

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#divider_react) for fully rendered examples.

## Components

### Divider

Draws horizontal lines between different content groupings.

```js
var Divider = require('

#### Properties

- `size`
  - `String`: If set to `large`, makes the line thicker


### InverseDivider

A Divider for use on dark backgrounds.

```js
var InverseDivider = require('

#### Properties

- `size`
  - `String`: If set to `large`, makes the line thicker


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-draggable-list
Description: A React component for showing a list of items that can be re-ordered by the user
Author: Pivotal Software, Inc
Latest version: 8.5.0

# pui-react-draggable-list

A React component for showing a list of items that can be re-ordered by the user

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#list_draggable_react) for fully rendered examples.

## Components

### DraggableList

A list that can be re-ordered via drag-drop

```js
var DraggableList = require('

#### Properties

- `onDrop`
  - `Function`: A callback called when the user re-orders list items


### DraggableListItem

Denotes list items of a DraggableList





*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-dropdowns
Description: A React dropdown component
Author: Pivotal Software, Inc
Latest version: 8.5.0

# pui-react-dropdowns

A React dropdown component

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#dropdown_react) for fully rendered examples.

## Components

### Dropdown

A menu that opens when triggered by a button

```js
var Dropdown = require('

#### Properties

- `title`
  - `String`: Sets the text of the dropdown trigger button


### DropdownItem

Denotes the elements of a dropdown menu



#### Properties

- `href`
  - `String`: A URL to link to

- `divider`
  - `Boolean`: If set, inserts a horizontal line instead of a link


### LinkDropdown

An alternate style for the dropdown trigger button



#### Properties

- `title`
  - `String`: Sets the text of the dropdown trigger button


### DefaultAltDropdown

An alternate style for the dropdown trigger button



#### Properties

- `title`
  - `String`: Sets the text of the dropdown trigger button


### LowlightDropdown

An alternate style for the dropdown trigger button



#### Properties

- `title`
  - `String`: Sets the text of the dropdown trigger button


### DangerDropdown

An alternate style for the dropdown trigger button



#### Properties

- `title`
  - `String`: Sets the text of the dropdown trigger button


### HighlightDropdown

An alternate style for the dropdown trigger button



#### Properties

- `title`
  - `String`: Sets the text of the dropdown trigger button


### HighlightAltDropdown

An alternate style for the dropdown trigger button



#### Properties

- `title`
  - `String`: Sets the text of the dropdown trigger button


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-expander
Description: A React component that provides an accordion for showing and hiding content where the toggle and the content can be in separate places
Author: Pivotal Software, Inc
Latest version: 6.4.0

# pui-react-expander

A React component that provides an accordion for showing and hiding content where the toggle and the content can be in separate places

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#expander_react) for fully rendered examples.

## Components

### ExpanderTrigger

A button that when clicked, shows or hides the content in the corresponding ExpanderContent

```js
var ExpanderTrigger = require('



### ExpanderContent

Denotes content that can be toggled via a corresponding ExpanderTrigger





*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-grids
Description: React components for laying-out content in a grid
Author: Pivotal Software, Inc
Latest version: 6.4.0

# pui-react-grids

React components for laying-out content in a grid

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#grid_react) for fully rendered examples.

## Components

### Row

Denotes a container of grid columns for the Pivotal UI 24-column mobile-first grid system

```js
var Row = require('

#### Properties

- `gutter`
  - `String`: Sets the spacing between columns (either `sm`, `md`, or `lg`).


### Col

Denotes a column within a row of the Pivotal UI grid system



#### Properties

- `xs`
  - `Number`: The width of the column (1-24) in extra small devices (<= 768px)

- `sm`
  - `Number`: The width of the column (1-24) in small devices (> 768px)

- `md`
  - `Number`: The width of the column (1-24) in medium devices (> 992px)

- `lg`
  - `Number`: The width of the column (1-24) in large devices (> 992px)

- `xsOffset`
  - `Number`: The number of column-widths to use as left margin in extra small devices

- `smOffset`
  - `Number`: The number of column-widths to use as left margin in small devices

- `mdOffset`
  - `Number`: The number of column-widths to use as left margin in medium devices

- `lgOffset`
  - `Number`: The number of column-widths to use as left margin in large devices

- `xsPush`
  - `Number`: Move this column to the right by the given number of column-widths in extra small devices

- `smPush`
  - `Number`: Move this column to the right by the given number of column-widths in small devices

- `mdPush`
  - `Number`: Move this column to the right by the given number of column-widths in medium devices

- `lgPush`
  - `Number`: Move this column to the right by the given number of column-widths in large devices

- `xsPull`
  - `Number`: Move this column to the left by the given number of column-widths in extra small devices

- `smPull`
  - `Number`: Move this column to the left by the given number of column-widths in small devices

- `mdPull`
  - `Number`: Move this column to the left by the given number of column-widths in medium devices

- `lgPull`
  - `Number`: Move this column to the left by the given number of column-widths in large devices


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-helpers
Description: A collection of helpers used by pivotal-ui-react components
Author: Pivotal Software, Inc
Latest version: 6.4.0

# pui-react-helpers

A collection of helpers used by pivotal-ui-react components

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io) for fully rendered examples.

## Components

### mergeProps

A helper function that merges default props and provided props

```js
var {mergeProps} = require('



*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-iconography
Description: A React component for rendering Font Awesome icons
Author: Pivotal Software, Inc
Latest version: 8.5.0

# pui-react-iconography

A React component for rendering Font Awesome icons

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#icon_react) for fully rendered examples.

## Components

### Icon

Inserts a Font Awesome icon

```js
var Icon = require('

#### Properties

- `name`
  - `String`: The name of the icon (without the fa- prefix)

- `size`
  - `String`: Can either be a PUI typography size (title, h1,
h2, h3, h4, h5, h6, sm, xs) or a FA size (lg, 2x, 3x, 4x, 5x).


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-images
Description: A React component for rendering responsive and linked images
Author: Pivotal Software, Inc
Latest version: 6.5.0

# pui-react-images

A React component for rendering responsive and linked images

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#image_react) for fully rendered examples.

## Components

### Image

A wrapper around the `<img>` tag that adds linking and responsiveness

```js
var Image = require('

#### Properties

- `src`
  - `String`: The URL to the image.

- `responsive`
  - `Boolean`: Whether to have the image fill its container while preserving aspect ratio

- `href`
  - `String`: If given a URL, makes the image link to that URL


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-labels
Description: A React component for showing a colored pill of text
Author: Pivotal Software, Inc
Latest version: 6.4.0

# pui-react-labels

A React component for showing a colored pill of text

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#label_react) for fully rendered examples.

## Components

### Label

Highlighted pill of text

```js
var Label = require('



*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-lists
Description: A collection of React components for rendering different kinds of lists
Author: Pivotal Software, Inc
Latest version: 8.5.0

# pui-react-lists

A collection of React components for rendering different kinds of lists

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#list_react) for fully rendered examples.

## Components

### ListItem

An element of a list component





### UnorderedList

A bulleted list

```js
var UnorderedList = require('

#### Properties

- `spacing`
  - `String`: One of `n`, `s`, `m`, `l`, or `xl`: sets the amount of space between list items


### OrderedList

A numbered list

```js
var OrderedList = require('

#### Properties

- `spacing`
  - `String`: One of `n`, `s`, `m`, `l`, or `xl`: sets the amount of space between list items


### InlineList

A list where the items are stacked horizontally

```js
var InlineList = require('

#### Properties

- `spacing`
  - `String`: One of `n`, `s`, `m`, `l`, or `xl`: sets the amount of space between list items


### GroupList

A list where the items are separated by lines

```js
var GroupList = require('

#### Properties

- `spacing`
  - `String`: One of `n`, `s`, `m`, `l`, or `xl`: sets the amount of space between list items


### GroupListInverse

A list where the items are separated by lines, for use on a dark background

```js
var GroupListInverse = require('

#### Properties

- `spacing`
  - `String`: One of `n`, `s`, `m`, `l`, or `xl`: sets the amount of space between list items


### StepList

A numbered list of steps in a workflow

```js
var StepList = require('

#### Properties

- `spacing`
  - `String`: One of `n`, `s`, `m`, `l`, or `xl`: sets the amount of space between list items


### BreadcrumbList

A list of breadcrumbs for hierarchical navigation

```js
var BreadcrumbList = require('

#### Properties

- `spacing`
  - `String`: One of `n`, `s`, `m`, `l`, or `xl`: sets the amount of space between list items


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-media
Description: React components for laying out images/audio/video next to text content
Author: Pivotal Software, Inc
Latest version: 6.4.0

# pui-react-media

React components for laying out images/audio/video next to text content

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#media_react) for fully rendered examples.

## Components

### Media

Displays a media object (images, video, or audio) to the left or right of a block of content

```js
var Media = require('

#### Properties

- `leftImage`
  - `Element`: `<Image>`, `<Video>`, or `<Audio>` to be shown left of the content

- `rightImage`
  - `Element`: `<Image>`, `<Video>`, or `<Audio>` to be shown right of the content

- `vAlign`
  - `String`: One of `middle` or `bottom`--if given, re-positions the content vertically

- `stackSize`
  - `String`: One of `xsmall`, `small`, `medium`, or `large`--if given, sets the breakpoint at which the media object stacks

- `leftMediaSpacing`
  - `String`: One of `small`, `medium`, `large` (default), or `xlarge`--sets the amount of space between the left media and the content

- `rightMediaSpacing`
  - `String`: One of `small`, `medium`, `large` (default), or `xlarge`--sets the amount of space between the right media and the content


### Flag

Displays a media object (images, video, or audio) to the left or right of a block of content with vertical centering



#### Properties

- `leftImage`
  - `Element`: `<Image>`, `<Video>`, or `<Audio>` to be shown left of the content

- `rightImage`
  - `Element`: `<Image>`, `<Video>`, or `<Audio>` to be shown right of the content

- `stackSize`
  - `String`: One of `xsmall`, `small`, `medium`, or `large`--if given, sets the breakpoint at which the media object stacks

- `leftMediaSpacing`
  - `String`: One of `small`, `medium`, `large` (default), or `xlarge`--sets the amount of space between the left media and the content

- `rightMediaSpacing`
  - `String`: One of `small`, `medium`, `large` (default), or `xlarge`--sets the amount of space between the right media and the content


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-modals
Description: React components for opening and closing modal windows
Author: Pivotal Software, Inc
Latest version: 8.5.0

# pui-react-modals

React components for opening and closing modal windows

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#modal_react) for fully rendered examples.

## Components

### Modal

Opens a modal window with scrim. The modal can be closed by either clicking the "x" button, clicking on the scrim, pressing Escape, or calling `modal#close` as in the example.

```js
var Modal = require('

#### Properties

- `title`
  - `String`: Header text for the modal window


### ModalBody

Denotes content for the body of a `<Modal>`





### ModalFooter

Denotes content for the footer of a `<Modal>`





*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-notifications
Description: A React component for showing a dropdown of notification messages
Author: Pivotal Software, Inc
Latest version: 8.5.0

# pui-react-notifications

A React component for showing a dropdown of notification messages

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#notifications_react) for fully rendered examples.

## Components

### Notifications

A dropdown for showing a count (in the trigger) and list (in the menu) of notifications

```js
var Notifications = require('



### AlertNotifications

A dropdown for showing a list of notifications with an alert icon in the trigger if there are notifications

```js
var AlertNotifications = require('



### NotificationItem

A notification in notifications component



#### Properties

- `href`
  - `String`: A URL to link to when the notification is clicked


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.
npm package: @npmcorp/pui-react-overlay-trigger
Description: A React component for displaying a tooltip or popover on user action
Author: Pivotal Software, Inc
Latest version: 6.4.0

# pui-react-overlay-trigger

A React component for displaying a tooltip or popover on user action

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#tooltips_react) for fully rendered examples.

## Components

### OverlayTrigger

Display a tooltip or popover on a specified user action

```js
var OverlayTrigger = require('

#### Properties

- `placement`
  - `String`: One of `left`, `right` (default), `top`, or `bottom`--determines where the place the overlay relative to the trigger

- `trigger`
  - `String, Array<String>`: One of `hover` (default), `focus` (default), or `click`--defines which user actions trigger the overlay

- `overlay`
  - `Element`: The HTML for the overlay


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.