Introduction

npm install pui-css-forms --save

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default.

Wrap labels and controls in .form-group for optimum spacing.

Basic Forms

Accordions

npm install pui-css-collapse --save

These are frequently used in combination with our panel components. They have a header and body.

Accordions can be used with any background color class, add them to the header and body.

Basic

Use this to expand and collapse content.

Look at this content.

Styles

Accordion with Divider:

This adds a divider between the accordion header and accordion body.

This content should hide and show when the trigger is clicked.

You can combine the accordion with any panel class to have a styled panel that opens and closes.

With Icons

Accordion with plus/minus icon:

This content should hide and show when the trigger is clicked.

Alerts

npm install pui-css-alerts --save

Alerts are used to display flash messages to the user. When using alerts with simple one-line text, wrap the text in a <p> with .em-high.

Success

Alerts are also used to bring important notes to a user's attention. If the content of your alert is a little more complicated, we would recommend using headings coupled with the content.

You should know...

There are some things you should note. Just in case you didn't figure it out already.

  • thing 1
  • thing 2

If you want to include a link in your alert, use the class alert-link.

Important Link

It is very important that you click here

Alert Types

Our 4 alert types are:

Everything is wonderful. Be happy.
Info for you. Tell me more.
Warning: There is no parking on the dancefloor. Be alert.
Something has gone horribly awry. You've made a huge mistake.

Dismissable Alerts

By adding .alert-dismissable and a button, you can also make alerts dismissable.

Click the 'X' over there------>

Alignment

npm install pui-css-alignment --save

The following classes can be used to for horizontal alignment.

.txt-l

.txt-c

.txt-r

On display: inline and display: table-cell elements, the following classes can be used to for vertical alignment.

This long text is used to expand the height of this table so that we can demonstrate our verticle alignment classes to the right. .txt-t .txt-m .txt-b

If you need to vertically align an element that does not fit into those display types, take a look at vertical alignment.

Backgrounds

npm install pui-css-backgrounds --save

Background color classes can be applied to any element. See colors for a list of background classes.

Full Bleed

This example uses an about us hero image by default, but you can change it to any image you would like. Keep in mind, blurry, treated images will look better when stretched to fit a particular content area.

Full bleed background image

To modify this component to use a custom image, use an inline background-image style like so:

Full bleed background image

Overlays

.bg-cloud
.bg-glow

Box Shadows

npm install pui-css-box-shadows --save

Box-shadows are used to to describe the visual hierarchy of objects. Key light shadows are directional, ambient light shadows come from all sides, and shadow combines them both.

.box-shadow-key-1
.box-shadow-amb-1
.box-shadow-1
.box-shadow-key-2
.box-shadow-amb-2
.box-shadow-2
.box-shadow-key-3
.box-shadow-amb-3
.box-shadow-3

Buttons

npm install pui-css-buttons --save

Button styles can be applied to any element. Typically you'll want to use either a <button> or an <a> element:

If your button is actually a link to another page, please use the <a> element, while if your button performs an action, such as submitting a form or triggering some javascript event, then use a <button> element.

Styles

Every button type has a default style, an alt style (with inverted colors and a transparent background) and a flat style (alt with transparent borders).

Button Button Alt Button Flat Description
This the default button style.
Use this button for primary actions.
This button is for delete actions, these actions should also have a confirmation dialog
This button is for marketing purposes only

The most common button examples are below:

Disabling

Buttons can be disabled. If given the disabled attribute, a button will be functionally disabled, but will look unchanged. If given the disabled class, a button will be functionally disabled, and will also change visually.

Sizes

There are three sizes for buttons: Large, small, and default. Simply apply the size modifier class for the desired size.

Button Group

npm install pui-css-button-group --save

Button groups wrap a series of buttons.

You can also mark buttons in the group as selected by swapping between alt button styles.

If you are using flat buttons, there is a thinner, flat button group

Code

npm install pui-css-code --save

This is your basic unstyled code sample:

class Foo
  def bar
    puts 'hi'
  end
end

Inline

This is an example of a paragraph with an inline code snippet within it.

Inline Dark

This is an example of a paragraph with a dark inline code snippet within it.

Styled Code

Special installation instructions

Our code is styled using PrismJS. You will need some additional setup to get it to work:

  1. Install pui-prismjs. This package provides the code parsing magic.

    Install Prismjs npm install pui-prismjs --save
  2. Include `pui-prismjs` in your main javascript file:

    require("pui-prismjs");
  3. Install a PrismJs theme. This makes the code look pretty.

    Install Prismjs npm install prismjs-<theme>-theme --save

    The two light and dark Pivotal themes are:

    • prismjs-okaidia-theme
    • prismjs-default-theme

In order to show syntax-highlighted code, you will need to apply a language specific class to the code tag. For example, .language-ruby.

There are several languages already available (and others available from the Prismjs.com website), including:

  • Markup
  • CSS
  • C-like
  • JavaScript
  • Java
  • PHP
  • PHP
  • CoffeeScript
  • Sass
  • Bash
  • Python
  • HTTP
  • Ruby
  • Go
class Foo
  def bar
    puts 'hi'
  end
end

Make it scrollable

class Foo
  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end
end

Scrollable with too little content:

class Foo
  def bar
    puts 'hi'
  end
end

If you would like a set a default height, please add it manually.

Terminal Window

Special installation instructions

You will need to follow the PrismJS installation instructions in the styled code section.

class Foo
  def bar
    puts 'hi'
  end
end

class Bar
  def bar
    puts 'hi'
  end
end

class Baz
  def bar
    puts 'hi'
  end
end

class Bop
  def bar
    puts 'hi'
  end
end

Colors

npm install pui-css-colors --save

Our color pallet is composed of several different colors. At any given point it captures the current evolution of our design and likely includes old and new colors. Whenever possible, evolve the old colors rather than adding new ones.

Sass variables should only be used in variables.css.scss.

They should never be used directly when building components, because it makes it very hard to change the values later if you can't tell how they might have been used. You should define your own variables that use these colors in variables.css.scss.

If you do want to use variables and mixins, install this module:

npm install pui-css-variables-and-mixins

This example shows proper use of Sass variables.

$tabs-active-bg-color: $gray-2;

To use the color classes:

Prepend any color variable with 'bg-' to apply that color to the background Prepend any color variable with 'type-' to apply that color to the text

neutral-1

neutral-2

neutral-3

neutral-4

neutral-5

neutral-6

neutral-7

neutral-8

neutral-9

neutral-10

neutral-11

dark-1

dark-2

dark-3

dark-4

dark-5

dark-6

dark-7

dark-8

dark-9

dark-10

dark-11

brand-1

brand-2

brand-3

brand-4

brand-5

brand-6

brand-7

brand-8

brand-9

brand-10

brand-11

accent-1

accent-2

accent-3

accent-4

accent-5

accent-6

error-1

error-2

error-3

error-4

error-5

error-6

warn-1

warn-2

warn-3

warn-4

warn-5

warn-6

success-1

success-2

success-3

success-4

success-5

success-6

Shadows & Glows

$shadow-1
$shadow-2
$shadow-3
$shadow-4
$glow-1
$glow-2
$glow-3
$glow-4
$glow-5

Dividers

npm install pui-css-dividers --save

Dividers draw horizontal lines between different content groupings.





Dropdowns

npm install pui-css-dropdowns --save

Dropdowns are menus that can be triggered by buttons.

This is the basic dropdown.

Dropdowns with dividers

If you want to add a divider between items in the dropdown, add a `li.divider` between list items.

Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu

No links as dropdowns

Instead of using an a tag as a dropdown, use a button.btn.btn-link.

Here's a crazy-complex dropdown. Not for the faint of heart.

Ellipsis

npm install pui-css-ellipsis --save

The type .type-ellipsis adds ellipsis to text when there is too much. Combine it with .col-md-* classes to get the width you want.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Embeds

Responsive

npm install pui-css-bootstrap --save

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to <iframe>, <embed>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.

16-by-9

4-by-3

Checkboxes & Radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default (stacked)

Inline Checkboxes & Radios

Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.

Disabled Controls

Controls will occasionally need to be disabled. You can do that by adding the disabled attribute. Inputs, selects, checkboxes, fieldsets, buttons, and other form controls can all be disabled.

Help Text

Help text Block level help text for form controls.

Inline Forms

Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

Always add labels to every input.

Screen readers will have trouble with your forms if you don't. You can always hide the labels using the .sr-only class.

Inline Forms with Labels

Add .form-inline.inline-labels to your <form> for left-aligned and inline-block controls with labels inline with inputs.

Inputs & Labels

An input with the label top aligned (this is the default layout).

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.

An input with the label left aligned

An input with the label right aligned (N.B., control-label class provides the right alignment):

An unstyled input that doesn't have any of the default input styles

HTML5 Controls

Examples of standard form controls supported in an example form layout.

Inputs Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Inputs will only be fully styled if their type is properly declared.

Password field

Date

Number

With a min/max and default starting value

With a different increment value

Email

Use this with fields that require email addresses to pop up the correct keyboard on mobile

URL

Use this with fields that require urls to pop up the correct keyboard on mobile

Telephone

Use this with fields that require telephone numbers to pop up the dialpad on mobile

Sizing

Set heights using the form control classes .input-lg and .input-sm. Create larger or smaller form controls that match button sizes.

Set widths using grid column classes like .col-lg-*. Wrap selects in grid columns, or any custom parent element, to easily enforce desired widths.

Read-Only Inputs

Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.

Selects

Selects are excellent to use because they will automatically behave as expected cross browser on different devices. Prefer them over a custom dropdown whenever possible.

Sizing

Set heights using the form control classes .input-lg and .input-sm. Create larger or smaller form controls that match button sizes.

Set widths using grid column classes like .col-lg-*. Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

Static Controls

When you need to place plain text next to a form label within a form, use the .form-control-static class on a <p>.

Here's an example in a horizontal form:

email@example.com

Here's an example in a vertical form:

someguy@test.com

Text Areas

Text areas are used for larger amounts of input.

Toggle Switches

A toggle switch is a horizontally styled checkbox which represents true with blue and false with gray. It comes in two sizes, default and large.

Validations

To show validation errors on a field, add .has-error to the field's form group. This class can be used for all types of inputs.

Error messages should use the classes .help-block.has-error.

Error help text
Error help text

Grids

npm install pui-css-grids --save

Pivotal ui (via bootstrap) includes a responsive, mobile first fluid grid system that appropriately scales up to 24 columns as the device or viewport size increases. To work with the system, you need to treat mobile as your default and build more complex layouts up from there.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the bootstrap grid system works:

  • Rows must be placed within a .container for proper alignment and padding.

  • Use .row to create horizontal groups of columns.

  • Content should be placed within columns (e.g. .col-sm-11, .col-lg-6, etc.). Only columns may be immediate children of rows.

Columns are defined by two properties: the breakpoint at which they start acting like columns, and their relative width (on a scale of 24) beginning at this breakpoint. For example:

  • A column with the class .col-sm-11 will take up 100% of the container for devices with screen-width < 768px (the extra small breakpoint), and 11/24ths for devices ≥ 768px.

  • A column with the class .col-lg-6 will take up 100% of the container for devices with < 1200px, and 1/4th (6/24ths) for devices ≥ 1200px.

  • 3 .col-md-8 columns would fill a row for devices ≥ 992px. They would each take up their own row on devices < 992px.

  • Use the .col-xs-* classes to use a grid on mobile.

Look to the examples for applying these principles to your code.

Media Queries

We use the following media queries in our sass files to create the key breakpoints in our grid system.

Name Size Variable Name
mobile no media query since this is the default in bootstrap
x-small 480px $screen-xs-min
small 768px $screen-sm-min
medium 992px $screen-md-min
large 1200px $screen-lg-min
x-large 1800px $screen-xl-min

Grid Sizes

See how aspects of the bootstrap grid system work across multiple devices with a handy table.

extra small devices phones (≤768px) small devices tablets (>768px) medium devices laptops (>992px) large devices desktops (>1200px)
grid behavior horizontal at all times collapsed to start, horizontal above breakpoints
container width none (auto) 750px 970px 1170px
class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 24
column width auto ~62px ~81px ~97px
gutter width 30px (15px on each side of a column)
nestable yes
offsets yes
column ordering yes

Examples

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

The .grid-show class in the examples is for demo purposes. Don't use it IRL.

Example: Mobile and Desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

Example: Mobile, Tablet, Desktops

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

Example: Column Wrapping

If more than 24 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

note In the second row, since 10 + 10 + 5 > 24, the 5-column-wide div gets wrapped onto a new line as one contiguous unit. Subsequent columns continue along the new line.

Gutter Sizes

You can change the size of a row's gutters with these classes.

Class Padding between columns
default 20px
.row-gutter-md 10px
.row-gutter-sm 5px

Here's what the gutters look like in action.

Responsive Column Resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

Offsetting Columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

Column Ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes. This is useful if you want to change the order of columns at different screen sizes.

Flex Grids

npm install pui-css-flex-grids --save

Examples

The .grid-show class in the examples is for demo purposes. Don"t use it IRL.

Gutters

You can create a flex grid with and without gutters. Here are examples of what each would look like.

Sizing

Using a single set of .col-n grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .grid:

You can also specify how the columns grow with .col-grow-n (n = 2 - 11). These columns will attempt to respect their given ratio until the content of the column exceeds their parameters, after which the column will drop onto another row:

Fixing Column Size

You can fix the width of a column by using the .col-fixed class.

Break Points

You can specify three different media breakpoints with the .col-sm, .col-md, and .col-lg classes.

Alignment

Aligning columns relative to the grid:

Aligning content relative to the column it is in:

Some content that sits at the top of the column
Some content that sits in the middle of the column
Some content that sits at the bottom of the column

Hoverable

npm install pui-css-hoverable --save

This component is for showing hidden actions on hover. If you put this on an element then hovering on that parent element will show the hidden element.

List example:

This can be used with any kind of list but the list group style seems to fit this use case best.

  • List Item 1 Edit
  • List Item 2 Edit
  • List Item 3 Edit
  • Not hoverable

Table example:

Name
Row 1 Delete
Row 2 Delete
Row 3 Delete
Not hoverable

Iconography

npm install pui-css-iconography --save

We use custom SVG icons, available at http://pivotalicons.cfapps.io. We recommend using the React Iconography component if you are using icons. We do provide all icons as svgs inside of the pui-css-iconography node module (inside node_moduldes/pui-css-iconography/svgs/). If you are not using JavaScript and would like to use a Pivotal UI Icon, you can copy these svgs directly, either with an img tag or as inlined svg. When styling the svgs, remember to use the fill or stroke attributes instead of color.

Images

Responsive

npm install pui-css-images --save

Images can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. See bootstrap 3 for further documentation of this feature.

Responsive image
Responsive image
Responsive image

Responsive SVG

SVG can be made responsive-friendly via the addition of the .svg-responsive class on a wrapper div and the .svg-content class on the svg itself. You'll also need to to define the height to width ratio as an inline padding bottom style on the .svg-responsive element like so:

<div class="svg-responsive" style="padding-bottom: 78.31%">
  <svg class="svg-content" viewBox="38 45 125 120" preserveAspectRatio="xMinYMin meet">
    ...
  </svg>
</div>

The padding-bottom should equal the height divided by the width of your specific svg.

For more information about setting up your svg, read this article about svg coordinates systems by Sara Soueidan.

Labels

npm install pui-css-labels --save

Labels are based on Bootstrap's labels. Here's an example of a label on its own.

new

You can also place labels within HTML elements. It will be sized based on the element's font size and its font modifiers.

I am a P. new

I am an H3. new

I am an H3 with an H5 modifier. new

Removable Labels

Removable labels are used as tags in an editable list. The user will either enter text or select content (i.e.: a dropdown item), and it will be styled as a removable label (most likely in a list). Developers who use these labels must implement the close functionality for when the user clicks the close button.

Removable

Layout Lists

Sometimes you might want to use lists to lay out elements on the page.

Inline lists and vertical divider lists are particularly useful when you don't know the width of the element you want to layout, or you want to vertically align it.

Use Card lists if you'd like to make a grid of vertically and horizontally aligned cards.

Links

npm install pui-css-links --save

Add the class link-text on any text links. This will make the link underlined on hover (except lowlight links).

There are four different kinds of links you can use to connect related content. In most cases (unless the designer specifically asks for another type of link) you should choose the default link.

Link Class Description
default link link-text Important links
lowlight link link-text link-lowlight Less important links
inverse link link-text link-inverse I go on a non-white background

Lists

npm install pui-css-lists --save

This section contains different list styles.

Breadcrumb

The .list-breadcrumb can be used to provide additional page navigation.

Breadcrumbs use their own monospace font-family.

Cards

As the browser width changes, list-cards fill in one after another. There are two card types, type-card-1 and type-card-2. For this example, we've set both of them to stack on mobile sized screens.

  • list-card-1

  • list-card-2

You can specify the breakpoint in which the cards stack by using the list-card-* classes. If the breakpoint is not specified, the cards fill 100% of the list-cards width.

List Card Breakpoints Class Names
extra-small .list-card-xs
small .list-card-sm
medium .list-card-md
large .list-card-lg
extra-large .list-card-xl

The cards list should only be used in fully liquid layouts, otherwise grids are a better choice.

This is an example of a card list with the list-cards-xs stack point applied. Resize the browser to see how cards stack on desktop sizes and expand on mobile sizes.

  • lorem ipsum 1

  • lorem ipsum 2

  • lorem ipsum 3

  • lorem ipsum 4

  • lorem ipsum 5

  • lorem ipsum 6

  • lorem ipsum 7

  • lorem ipsum 8

If you would like custom card dimensions, in your sass include the makeCard mixin, like so: @include makeCard(height, width, name); You can then access the class via .list-card-#{name}.

Clickable List Cards

If you want your list cards to function as links (i.e. be clickable), wrap all the inner content in a with class list-card-link.

Group

Use this list when you need simple gray borders between items

  • item 1
  • item 2
  • item 3

Group Inverse

Use this list when you need simple gray borders between items on a dark background. It is very subtle.

  • item 1
  • item 2
  • item 3

Inline

An inline list is one of the three methods for laying out content (including grids and the media block).

  • feep
  • fop
  • meep

You can use inline lists to lay out elements. Here's an example of a header next to a button:

Inline Divider

Places all list items on a single line with display: inline-block; and some light padding. The .list-inline-divider also adds a simple gray border.

Here's an example on a dark background (add .list-inline-divider-light to make the border white):

Ordered

  1. feep
  2. fop
  3. meep

Steps

Use this list when you need to show the steps in a flow.

  1. Sign up Account
  2. Create Organization
  3. Do other things
  4. And more things

Unordered

  • feep
  • fop
  • meep

Unstyled

Places all list items on a single line with display: inline-block; and some light padding. The .list-unstyled class can be applied to either a <ul> or and <ol>.

  • feep
  • fop
  • meep

Vertical Divider

Use this list when you need larger gray borders between items. It should be used in concert with grid column sizes when you want the items to take a particular width.

We achieve equal height columns using the padding/margin hack, so we need an additional .height-enforcer element to get the right min-height.

  • item 1
  • item 2
  • item 3, which is taller
  • item 1
  • item 2
  • item 3, which is taller

List Spacing

Most lists come with built in default spacing that should work for you. However, if you find yourself needing to modify the spacing, you should do that with list spacing classes rather than whitespace classes. A single class can be applied to the list and all direct children will be modified. The classes are constructed by specifying <type><location><size>.

Type:
l list Space on the inside of each of the li direct children of the element
Location:
h horizontal Adds spacing to the left and right of the li.
v vertical Adds spacing to the top and bottom of the li.
Size:
xl extra large Adds 21 pixels of space
l large Adds 10 pixels of space
m medium Adds 7 pixels of space
s small Adds 5 pixels of space
n none Sets any existing space to 0

Vertical Spacing Options (n -> xl)

  • feep
  • fop
  • meep
  • feep
  • fop
  • meep
  • feep
  • fop
  • meep
  • feep
  • fop
  • meep
  • feep
  • fop
  • meep

Horizontal Spacing Options (n -> xl)

  • feep
  • fop
  • meep
  • feep
  • fop
  • meep
  • feep
  • fop
  • meep
  • feep
  • fop
  • meep
  • feep
  • fop
  • meep

Timeline

A Timeline is a graphical representation of sequenced events. The Timeline list components are used to order list items by timestamp.

We achieve equal width columns for the time stamp by using a display table hack, so we need an additional inline style on the first list-timeline-date to specify the desired width.

  1. java buildpack (offline) (2.5) a minor release
  2. java buildpack (offline) (2.5) a minor release
  3. java buildpack (offline) (2.5) a minor release

Maps

npm install pui-css-google-maps --save

Full width map with marker at Pivotal Labs SF location, and an optional informational overlay.

Location

Pivotal Software Inc.
875 Howard Street
San Francisco, CA 94103

Support: support@run.pivotal.io

Twitter: @pivotalws

Media

npm install pui-css-media --save

The default media displays a media object (images, video, audio) to the left or right of a content block.

demo placeholder for media

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
demo placeholder for media

Wrap the image in a fixed-size .image-container to make sure the image isn't larger than the container

demo placeholder for media

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

You can also nest media objects inside of each other (useful for comment threads or articles lists).

demo placeholder for media

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

demo placeholder for media

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
demo placeholder for media

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
demo placeholder for media

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Alignment

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

demo placeholder for media

Top aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
demo placeholder for media

Middle aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
demo placeholder for media

Bottom aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Stackable

You can also make the media block stack with grid columns. Media objects switch from being stacked on top to being floated left of the media body as the screen size gets larger. For example, .media-stackable-xs is stacked on screen sizes from 0-480px and then left floated on larger screens.

demo placeholder for media

Extra-small stackable

demo placeholder for media

Small stackable

demo placeholder for media

Medium stackable

demo placeholder for media

Large stackable

Modals

npm install pui-css-modals --save

Modals bring desired content to the foreground and de-emphasize the rest of the page.

Pagination

npm install pui-css-pagination --save

Pagination should be used for navigation between pages. You can mark a link as .selected and as .disabled.

Panes

npm install pui-css-panes --save

Panes are horizontal groupings of content that are usually used to span the full browser window width (it's going to look funny here).

You can combine up to two background classes on the pane component. The one on the .pane element will span the full browser width. The one on the .container element will be constrained to the content width.

This is a pane

This is a pane

A laptop showing Pivotal Web Services dashboard.

This is another pane

Panels

npm install pui-css-panels --save

Panels are often used to group related content. They include box headers, footers, and can be combined with any backgrounds.

Panels are typically a combination of contours, backgrounds, and content including headers and footers. This section describes the contours.

Simple

Simple Panel

Basic

By default, all the .panel does is apply a basic shadow and padding to contain some content. You can have it with or without a title.

Basic Title
Basic Panel
Basic Panel

Basic Alternate

Basic alternate panels are panels with a border and shadow. You can have a panel-basic-alt with or without a title.

Basic Title Alt
Basic Panel
Basic Panel
Body Content
Panels and list cards

Panels are often used with list cards as a way to give list cards footers. Add the class list-card-wrapper on any panels inside list cards.

Panel with Loading Animation

Add a loading animation to a panel with the class panel-loading-indicator. The animation is intended for panels that utilize panel-header and panel-body.

Basic Title Alt
Look, I'm loading!

Panel Tile

Tile panels provide an animated footer on hover, at the bottom of a fixed-height panel.

Scrollable

The scrollable panel sets a fixed height of 183px and scrolls any content that is larger. If you want a different size, set an inline style on the .panel-scrollable.

Lo-fi fixie aute irony skateboard, officia pug. VHS Kickstarter semiotics elit ad. XOXO fashion axe Neutra aesthetic nihil, before they sold out seitan photo booth bitters paleo ea. XOXO mustache consectetur jean shorts wolf banh mi, food truck aute odio Neutra polaroid artisan mlkshk. Chillwave aesthetic hashtag, 3 wolf moon Neutra umami DIY swag eu veniam. Blue Bottle fap kale chips veniam kogi, placeat yr Portland nesciunt sustainable iPhone. Single-origin coffee messenger bag locavore Schlitz, ea farm-to-table aliquip anim umami master cleanse. Delectus selfies placeat, tilde hoodie qui selvage consectetur cred master cleanse readymade pop-up assumenda nisi. Eu deep v brunch McSweeney's. Raw denim aliquip Banksy, proident cred banjo qui placeat Brooklyn fashion axe crucifix normcore aesthetic. Esse Pinterest organic anim American Apparel, wolf next level Tumblr laboris normcore pop-up dolore lo-fi put a bird on it trust fund. Laborum organic authentic Williamsburg plaid, Wes Anderson dolore sunt chia small batch synth Carles cliche tilde. Food truck ethical freegan velit, Kickstarter semiotics labore American Apparel biodiesel street art gentrify trust fund. Selfies Austin ex, organic art party authentic ullamco kitsch plaid placeat roof party cornhole deserunt aute.

Highlight

This panel is used to highlight more important parts of the page.

Not Hoverable (use when the panel has no associated action, for instance if the action is disabled due to lack of permissions)

Alternate

Alternate panels can be in a default, off, or danger state.

Alternate Panel
Danger alternate panel
Stopped alternate panel
Off alternate panel
Editing alternate panel

Shadow

Shadow panels add a bottom shadow to the panel.

Shadow Panel
Shadow Panel
Shadow Panel
Shadow Panel

Card

Using panels with card lists makes any .panel-body have a minimum "card" height.

  • Card Panel
  • Card Panel
  • Card Panel

Clickable

These panels lighten on hover to indicate that they are clickable. Please use them when a click on the panel triggers an action.

Panel Clickable
Panel Clickable Alt

Sometimes you'll also want to adapt the way child elements look based on a hover on the parent element. There are a few helper classes for that.

Print

Similar to the regular responsive classes, use these for toggling content for print.

Classes Browser Print
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Visible
.hidden-print Visible

Progress Bars

npm install pui-css-progress-bars --save

This section contains static progress bar styles.

Default styles.

0 MB / 100 MB
0%
60 MB / 100 MB
60%

Customize the progress bar background color.

90 MB / 100 MB
90%

Customize the progress bar with a custom label, larger height, and background color.

60%

60 MB / 100 MB

Responsive Utilities

npm install pui-css-bootstrap --save

Use a single or combination of the available classes for toggling content across viewport breakpoints.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

The .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

Group of classes CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

So, for extra small (xs) screens for example, the available .visible-*-* classes are:

  • .visible-xs-block
  • .visible-xs-inline
  • .visible-xs-inline-block

Here's an example of the .visible-* and .hidden-* classes in action:

XS

XS

SM

SM

MD

MD

LG

LG

Tabs

npm install pui-css-tabs --save

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" on an element.

Highlight

Image

You can use any 130px by 130px svg for the icon in the center of the tab. Please add the class icon to any parts of the svg which form part of the icon. You may also use an icon font for the icon.

Agility Content
Choice Content
Open Source

Responsive

Simple

Spaces Content
Domains Content
Members Content

Simple Alt

You do not need the .panel to wrap around .tab-simple-alt. We have it there to demonstrate the interaction on a neutral background.

Dashboard Content
Notifications Content
EULA Content

Tables

npm install pui-css-tables --save

Class Description
.table Base table class, applies spacing and cross browser support. Unfortunately inherits some undesirable styles from bootstrap.
.table-hover Adds a light blue background color to table rows when the user hovers over them (use to indicate clickability)
.table-striped Applies zebra striping to a table.
.table-light Lightens the table background.

Scrollable

Table with borders where the contents of the table scroll but the header does not. The default height of the scrollable table is 183px. There are four other sizes provided which you can use by adding the following classes to the .table-scrollable element.

Table Scrollable sizes Height
default 183px
.table-scrollable-sm 300px
.table-scrollable-md 600px
.table-scrollable-lg 900px

If you would like a custom size, please add an inline style to the .table-scrollable-body element.

Design Note: The table-scrollable is often paired with table-data and table-light as in our example.

You will need to specify the width of every column in both the thead and the first row of the tbody. You can do this with inline width attributes.

# Status CPU Memory Disk Uptime
0 Running 0% 4.16 MB 6.75 MB 27 min
1 Running 0% 4.07 MB 6.75 MB 27 min
2 Running 0% 4.07 MB 6.75 MB 25 min
3 Running 0% 4.14 MB 6.75 MB 25 min
4 Running 0% 4.08 MB 6.75 MB 25 min
5 Running 0% 4.16 MB 6.75 MB 25 min
6 Running 0% 4.07 MB 6.75 MB 25 min
7 Running 0% 4.07 MB 6.75 MB 25 min
8 Running 0% 4.03 MB 6.75 MB 25 min
9 Running 0% 4.07 MB 6.75 MB 25 min

Alignment

See the alignment component for classes to use for table text alignment.

Data

This is a table used to display many rows of data (it is pretty much the default table). You can use grid column classes on th and td elements. See key-value table for example.

Design Note: The table-data is often paired with table-light as in our example.

Service Instance Service Plan Bound Apps
oracle-db-sct Oracle DB 12
oracle-db-sct Oracle DB 12
oracle-db-sct Oracle DB 12
oracle-db-sct Oracle DB 12

Key-Value

This table is used when the table headings are on the left. It looks better when you specify column widths for the th/tds.

Email joe@example.com
Current Password *******
First Name Joe
Last Name Bobs
Phone 415-555-0000

Tile Layout

npm install pui-css-tile-layout --save

Hey
What
Hello
What

Responsive Breakpoints

You can also set the number of columns for responsive breakpoints with a class. You can set separate column values (from 1 - 12 columns) for some or all of xs, sm, md, lg, and xl screen sizes.

So
Many
Responsive
Blocks
Change
The
Screen
Size

Gutters

You can make a TileLayout without gutters by omitting the 'tile-gutter' class.

So
Close
Together

Tooltip

npm install pui-css-tooltips --save

Tooltips are used to display extra information on hover. They can be used with any hoverable element.

The title attribute defines the text that appears on the tooltip. The data-placement attribute defines the tooltip's placement. If data-placement is not specified, the tooltip is placed on top by default.

Tooltips must be initialized with javascript: $(mySelector).tooltip();

Check out this tooltip on the left!

Check out this tooltip on the right!

If you want to use a tooltip on a disabled element, place the tooltip in a wrapper div with the class .button-with-tooltip-wrapper.

Typography

Source Sans Pro is our font family. It can be used with the following modifiers to achieve a variety of effects.

Sizes

Set font sizes using headings and modifier classes.

h1.title 42px

h1 31px

h2 25px

h3 20px

h4 18px

h5 16px
h6 13px

base font size 16px

small text 14px

extra small text 12px

Separating code and visual semantics

Sometimes you may need to use a heading which has different visual and code semantics. You can accomplish this by combining classes with elements (classes take visual precedence over elements in this case).

I am a h1!

I am a h2!

If it's not a heading but you need similar visual treatment you can add just the class to any element.

Use headings when possible since they add semantic value.

Heading level 2 on a div

Alignment

See the alignment component for classes to use for text alignment.

Colors

You can apply color to any text with the color classes.

I'm a brand color!

Here's a table of all the color classes.

Type inverse

Type inverse

.type-inverse

Type neutral 1

Type neutral 1

.type-neutral-1

Type neutral 2

Type neutral 2

.type-neutral-2

Type neutral 3

Type neutral 3

.type-neutral-3

Type neutral 4

Type neutral 4

.type-neutral-4

Type neutral 5

Type neutral 5

.type-neutral-5

Type neutral 6

Type neutral 6

.type-neutral-6

Type neutral 7

Type neutral 7

.type-neutral-7

Type neutral 8

Type neutral 8

.type-neutral-8

Type neutral 9

Type neutral 9

.type-neutral-9

Type neutral 10

Type neutral 10

.type-neutral-10

Type neutral 11

Type neutral 11

.type-neutral-11

Type dark 1

Type dark 1

.type-dark-1

Type dark 2

Type dark 2

.type-dark-2

Type dark 3

Type dark 3

.type-dark-3

Type dark 4

Type dark 4

.type-dark-4

Type dark 5

Type dark 5

.type-dark-5

Type dark 6

Type dark 6

.type-dark-6

Type dark 7

Type dark 7

.type-dark-7

Type dark 8

Type dark 8

.type-dark-8

Type dark 9

Type dark 9

.type-dark-9

Type dark 10

Type dark 10

.type-dark-10

Type dark 11

Type dark 11

.type-dark-11

Type accent 1

Type accent 1

.type-accent-1

Type accent 2

Type accent 2

.type-accent-2

Type accent 3

Type accent 3

.type-accent-3

Type accent 4

Type accent 4

.type-accent-4

Type accent 5

Type accent 5

.type-accent-5

Type accent 6

Type accent 6

.type-accent-6

Type brand 1

Type brand 1

.type-brand-1

Type brand 2

Type brand 2

.type-brand-2

Type brand 3

Type brand 3

.type-brand-3

Type brand 4

Type brand 4

.type-brand-4

Type brand 5

Type brand 5

.type-brand-5

Type brand 6

Type brand 6

.type-brand-6

Type brand 7

Type brand 7

.type-brand-7

Type brand 8

Type brand 8

.type-brand-8

Type brand 9

Type brand 9

.type-brand-9

Type brand 10

Type brand 10

.type-brand-10

Type brand 11

Type brand 11

.type-brand-11

Type error 1

Type error 1

.type-error-1

Type error 2

Type error 2

.type-error-2

Type error 3

Type error 3

.type-error-3

Type error 4

Type error 4

.type-error-4

Type error 5

Type error 5

.type-error-5

Type error 6

Type error 6

.type-error-6

Type success 1

Type success 1

.type-success-1

Type success 2

Type success 2

.type-success-2

Type success 3

Type success 3

.type-success-3

Type success 4

Type success 4

.type-success-4

Type success 5

Type success 5

.type-success-5

Type success 6

Type success 6

.type-success-6

Type warn 1

Type warn 1

.type-warn-1

Type warn 2

Type warn 2

.type-warn-2

Type warn 3

Type warn 3

.type-warn-3

Type warn 4

Type warn 4

.type-warn-4

Type warn 5

Type warn 5

.type-warn-5

Type warn 6

Type warn 6

.type-warn-6

Emphasis Modifiers

Type emphasis modifiers can be used on any type element.

Really Important

I mean reeeeeeeeeeeally

Here's a table of all the emphasis modifier classes.

Low emphasis

Default emphasis

High emphasis

Maximum emphasis

Emphasis alternate

Multiline Headings

Headings are spaced so their line height and padding are consistent on one or many lines.

One line heading

I am a
multiline heading

Vertical Alignment

npm install pui-css-vertical-alignment --save

The Aligner allows you to vertically align children to the top, center, or bottom. Its height is set by default to 230px.

This component is not supported in IE10 and below. While the content will appear, it will not be vertically aligned.

Override the default height by setting an inline style like so:

You can position both vertically and horizontally by combining the aligner with grids, or the text-alignment classes (.txt-l, .txt-r, and .txt-c)

Whitespace

npm install pui-css-whitespace --save

Sass variables should only be used in variables.css.scss.

They should never be used directly when building components, because it makes it very hard to change the values later if you can't tell how they might have been used. You should define your own variables that use these values in variables.css.scss.

If you do want to use variables and mixins, install this module:

npm install pui-css-variables-and-mixins

Standard

Should be used to modify the default spacing between objects (not between nodes of the same object) Please use judiciously. You want to be using defaults most of the time, these are exceptions! <type><location><size>

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 normal paragraph

A paragraph with large padding

List

See list spacing.

This documentation generated using Hologram