Accordions display a list of high-level options than can expand to reveal more content.

<Accordion>

The content to be displayed inside of the open Accordion.

children

The title text displayed inside the collapsed and open Accordion.

title

If true, will load the Accordion in it's open state.

startOpen

Set to true if you would like to use the Accordion inside a Card component with the correct padding.

inCard

Use a font awesome class to display an icon inside of the Accordion title. Ex: "fas fa-atom"

icon

size

Set the Accordion to it's disabled state.

disabled

dark

Execute the defined function on Accordion click.

onClick

className

Add extra styling onto the Accordion wrapper.

style

Accordion

Use the base class <code class="pier-body-text__inline-code">pier-accordion</code> that wraps two elements <code class="pier-body-text__inline-code">pier-accordion__title</code> and <code class="pier-body-text__inline-code">pier-accordion__content</code>. <code class="pier-body-text__inline-code">pier-accordion__title</code> should wrap the persistant header Accordion content and <code class="pier-body-text__inline-code">pier-accordion__content</code> should wrap the content that will be revealed on click.

Base

Use the modifier class <code class="pier-body-text__inline-code">pier-accordion--open</code> to reveal the contents of the Accordion.

Open

Use the modifier class <code class="pier-body-text__inline-code">pier-accordion--card</code> if the Accordion is in a Card component without padding.

In Card

Use the modifier classes <code class="pier-body-text__inline-code">pier-accordion--xs</code>, <code class="pier-body-text__inline-code">pier-accordion--sm</code>, <code class="pier-body-text__inline-code">pier-accordion--md</code>, or <code class="pier-body-text__inline-code">pier-accordion--lg</code> to change the size of the Accordion.

Sizes

Use the modifier class <code class="pier-body-text__inline-code">pier-accordion--disabled</code> to change the state of the Accordion to disabled.

Disabled

Use the modifier class <code class="pier-body-text__inline-code">pier-accordion--dark</code> to change the style of the Accordion for dark UI themes.

Dark

Breadcrumbs are a list of related links that help with site navigation.

<Breadcrumbs>

Breadcrumbs should only wrap <BreadcrumbsLink> components to display breadcrumbs links.

The max amount of breadcrumbs links to be displayed inside of Breadcrumbs. Must be a number greater than 2 and less than the number of children.

maxCrumbs

Add classes onto the Breadcrumbs wrapper.

Add extra styling onto the Breadcrumbs wrapper.

<BreadcrumbsLink>

Set the breadcrumbs link to it's disabled state.

Execute the defined function on breadcrumbs link click.

Add extra styling onto the breadcrumbs link.

Breadcrumbs

Use the base class <code class="pier-body-text__inline-code">pier-breadcrumbs</code> on a wrapper element that wraps many elements with the element class <code class="pier-body-text__inline-code">pier-breadcrumbs__crumb</code> which should wrap link elements with the class <code class="pier-body-text__inline-code">pier-link</code>.

Use the element class <code class="pier-body-text__inline-code">pier-breadcrumbs__ellipsis</code> to indicate a condensed list of crumbs.

With Ellipsis

Use the modifier class <code class="pier-body-text__inline-code">pier-breadcrumbs--dark</code> to change the style of the Breadcrumbs for dark UI themes.

Bubble Menus are nested menus that display a list of choices or links when it's parent element is interacted with.

<BubbleMenu>

The content to be displayed inside of the open Bubble Menu.

open

position

Add classes onto the Bubble Menu wrapper.

Add extra styling onto the Bubble Menu wrapper.

<BubbleMenuLabel>

The text to be displayed inside the Bubble Menu label.

Add extra styling onto the Bubble Menu label.

<BubbleMenuItem>

The text to be displayed inside the Bubble Menu item.

Execute the defined function on Bubble Menu item click.

Add extra styling onto the Bubble Menu item.

Bubble Menu

Use the base class <code class="pier-body-text__inline-code">pier-bubble-menu</code> that wraps many elements with the class <code class="pier-body-text__inline-code">pier-bubble-menu__label</code> or <code class="pier-body-text__inline-code">pier-bubble-menu__item</code>. Use the modifier class <code class="pier-body-text__inline-code">pier-bubble-menu--open</code> to reveal the Bubble Menu.

Use the modifier classes <code class="pier-body-text__inline-code">pier-bubble-menu--sm</code>, <code class="pier-body-text__inline-code">pier-bubble-menu--md</code>, or <code class="pier-body-text__inline-code">pier-bubble-menu--lg</code> to change the size of the Bubble Menu.

Use the modifier classes <code class="pier-body-text__inline-code">pier-bubble-menu--top-left</code>, <code class="pier-body-text__inline-code">pier-bubble-menu--bottom-left</code>, <code class="pier-body-text__inline-code">pier-bubble-menu--top-right</code>, or <code class="pier-body-text__inline-code">pier-bubble-menu--bottom-right</code> to change the position of the Bubble Menu.

Position

Use the modifier class <code class="pier-body-text__inline-code">pier-bubble-menu--dark</code> to change the style of the Bubble Menu for dark UI themes.

Buttons - hero is the primary button defined by the primaryBoulevard gradient

<Button>

The content to be displayed inside of the button.

theme

Use a font awesome class to display an icon inside of the button. Ex: "fas fa-atom"

type

value

pill

error

block

secondary

onMouseEnter

onMouseLeave

Event handler on button when focus has left the button

onBlur

onFocus

Button - Hero

Use the base class <code class="pier-body-text__inline-code">pier-button-hero</code> and nest inside <code class="pier-body-text__inline-code">pier-button-hero__content</code> to create a default hero button

Use the modifier classes <code class="pier-body-text__inline-code">pier-button-hero--xs</code>, <code class="pier-body-text__inline-code">pier-button-hero--sm</code>, <code class="pier-body-text__inline-code">pier-button-hero--md</code>, or <code class="pier-body-text__inline-code">pier-button-hero--lg</code> to change the size of the button-hero.

Use the modifier class <code class="pier-body-text__inline-code">pier-button-hero--disabled</code> to change the state of the hero button to disabled.

Use the modifier class <code class="pier-body-text__inline-code">pier-button-hero--pill</code> to change the state of the hero button to pill.

Pill

Use the modifier class <code class="pier-body-text__inline-code">pier-button-hero--dark</code> to change the style of the hero button for dark UI themes.

Use the modifier classes <code class="pier-body-text__inline-code">pier-button-hero--cap-left</code> will cap the left border radius to 0 <code class="pier-body-text__inline-code">pier-button-hero--cap-right</code> will cap the right border radius to 0, <code class="pier-body-text__inline-code">pier-button-hero--cap</code> will cap both sides to a border radius of 0

Group

Use the modifier class <code class="pier-body-text__inline-code">pier-button-hero--block</code> to change the state of the hero button to block.

Block

Button - Icon is a button that contains an icon and no accompanying text.

<ButtonIcon>

danger

hero

iconStyle

Button - Icon

Use the base class <code class="pier-body-text__inline-code">pier-button-icon</code> to create a default icon button

Use the modifier classes <code class="pier-body-text__inline-code">pier-button-icon--xs</code>, <code class="pier-body-text__inline-code">pier-button-icon--sm</code>, <code class="pier-body-text__inline-code">pier-button-icon--md</code>, or <code class="pier-body-text__inline-code">pier-button-icon--lg</code> to change the size of the button-icon.

Use the modifier class <code class="pier-body-text__inline-code">pier-button-icon--disabled</code> to change the state of the icon button to disabled.

Use the modifier class <code class="pier-body-text__inline-code">pier-button-icon--pill</code> to change the state of the icon button to pill.

Use the modifier class <code class="pier-body-text__inline-code">pier-button-icon--hero</code> to change the state of the icon button to hero.

Hero

Use the modifier class <code class="pier-body-text__inline-code">pier-button-icon--secondary</code> to change the state of the icon button to secondary.

Secondary

Use the modifier class <code class="pier-body-text__inline-code">pier-button-icon--danger</code> to change the state of the icon button to danger.

Danger

Use the modifier class <code class="pier-body-text__inline-code">pier-button-icon--dark</code> to change the style of the icon button for dark UI themes.

Button - Standard is the secondary button defined by the primary cyan color

Button - Standard

Use the base class <code class="pier-body-text__inline-code">pier-button-standard</code> to create a default standard button

Use the modifier classes <code class="pier-body-text__inline-code">pier-button-standard--xs</code>, <code class="pier-body-text__inline-code">pier-button-standard--sm</code>, <code class="pier-body-text__inline-code">pier-button-standard--md</code>, or <code class="pier-body-text__inline-code">pier-button-standard--lg</code> to change the size of the button-standard.

Use the modifier class <code class="pier-body-text__inline-code">pier-button-standard--disabled</code> to change the state of the standard button to disabled.

Use the modifier class <code class="pier-body-text__inline-code">pier-button-standard--pill</code> to change the state of the standard button to pill.

Use the modifier class <code class="pier-body-text__inline-code">pier-button-standard--secondary</code> to change the state of the standard button to secondary.

Use the modifier class <code class="pier-body-text__inline-code">pier-button-standard--dark</code> to change the style of the standard button for dark UI themes.

Use the modifier class <code class="pier-body-text__inline-code">pier-button-standard--error</code> to change the state of the standard button to error.

Error

Use the modifier classes <code class="pier-body-text__inline-code">pier-button-standard--cap-left</code> to cap the left border radius to 0, <code class="pier-body-text__inline-code">pier-button-standard--cap-right</code>to cap the right border radius to 0, <code class="pier-body-text__inline-code">pier-button-standard--cap</code>to cap both sides to a border radius of 0

Use the modifier class <code class="pier-body-text__inline-code">pier-button-standard--block</code> to change the state of the standard button to block.

A Card is a styled block container for related content of high importance.

<Card>

The content to be displayed inside of the Card.

isLink

Execute the defined function on Card click.

Card

Use the base class <code class="pier-body-text__inline-code">pier-card</code> to wrap the content to be displayed in the card. Typical use should wrap <code class="pier-body-text__inline-code">pier-section</code> elements for it's padding.

Use the modifier class <code class="pier-body-text__inline-code">pier-card--link</code> to make the Card interactive on hover for links.

Link

Use the modifier classes <code class="pier-body-text__inline-code">pier-card--sm</code>, <code class="pier-body-text__inline-code">pier-card--md</code>, or <code class="pier-body-text__inline-code">pier-card--lg</code> to change the Card size.

Size

Use the modifier classes <code class="pier-body-text__inline-code">pier-card--primary</code>, <code class="pier-body-text__inline-code">pier-card--error</code>, <code class="pier-body-text__inline-code">pier-card--green</code>, or <code class="pier-body-text__inline-code">pier-card--blue</code> to change the Card theme.

Color

Use the modifier class <code class="pier-body-text__inline-code">pier-card--dark</code> to change the style of the Card for dark UI themes.

Forms are a user interface (UI) element that allows the user to send information to a server.

<Form>

The content to be displayed inside of the form.

name

action

method

autocomplete

Form

Use the base class <code class="pier-body-text__inline-code">pier-form</code> to create a default form

Input Form

Use a Horizontal Rule to draw a line to divide content.

<HR>

Add extra styling onto the Horizontal Rule.

Horizontal Rule

Use the base class <code class="pier-body-text__inline-code">pier-hr</code> to create a Horizontal Rule. Use the modifier classes <code class="pier-body-text__inline-code">pier-hr--dark</code> or <code class="pier-body-text__inline-code">pier-hr--hero</code> to change the style.

Styles

Use the modifier classes <code class="pier-body-text__inline-code">pier-hr--sm</code>, <code class="pier-body-text__inline-code">pier-hr--md</code>, or <code class="pier-body-text__inline-code">pier-hr--lg</code> to change the size of the Horizontal Rule.

Use the modifier classes <code class="pier-body-text__inline-code">pier-hr--white</code> to change the style of the Horizontal Rule to white.

Checkbox inputs are used for confirming an option

<InputCheckbox>

The content to be displayed inside of the input checkbox.

checked

indeterminate

Set the input checkbox to it's disabled state.

Set the input checkbox to it's dark theme.

Fires the moment when the value of the input checkbox is changed

onChange

Add extra styling onto the input checkbox.

Event handler on input checkbox hover out

Event handler on input checkbox when focus has left the input checkbox

Event handler on input checkbox when on focus

Input - Checkbox

Use the base class <code class="pier-body-text__inline-code">pier-input-checkbox</code> to create a default input checkbox

Use the modifier class <code class="pier-body-text__inline-code">pier-input-checkbox--partial</code> to change the state of the input checkbox to partial.

Partial

Use the modifier classes <code class="pier-body-text__inline-code">pier-input-checkbox--sm</code>, <code class="pier-body-text__inline-code">pier-input-checkbox--md</code>, or <code class="pier-body-text__inline-code">pier-input-checkbox--lg</code> to change the size of the input-checkbox.

Use the modifier class <code class="pier-body-text__inline-code">pier-input-checkbox--error</code> to change the state of the input checkbox to error.

Use the modifier class <code class="pier-body-text__inline-code">pier-input-checkbox--disabled</code> to change the state of the input checkbox to disabled.

Use the modifier class <code class="pier-body-text__inline-code">pier-input-checkbox--dark</code> to change the style of the input checkbox for dark UI themes.

Partial Dark

Error Dark

Combo inputs are used for combining input elements with button elements

<InputCombo>

The content to be displayed inside of the input combo.

Input - Combo

Use the class <code class="pier-body-text__inline-code">pier-input-combo</code> to create a default input combo group

Input Combo Group

Use the class <code class="pier-body-text__inline-code">pier-input-combo</code> to combine multiple select inputs and buttons.

Input Select Combo Group

Input groups are used for combining input elements with labels and validations

<InputGroup>

The content to be displayed inside of the input group.

htmlFor property reflects the value of the content of the input group.

htmlFor

label

Add validation text to the input group—i.e. (*required)

validation

Input - Group

Use the base class <code class="pier-body-text__inline-code">pier-input-group</code> to create a default input group

Use the modifier classes <code class="pier-body-text__inline-code">pier-input-group--sm</code>, <code class="pier-body-text__inline-code">pier-input-group--md</code>, or <code class="pier-body-text__inline-code">pier-input-group--lg</code> to change the size of the input-group.

Use the modifier class <code class="pier-body-text__inline-code">pier-input-group--error</code> to change the state of the input group to error.

Pier Design System

Welcome to Pier Design System!

Abstracts

Components

Utilities

Links to Resources

Github

NPM