Section 3 #Components
Components

Section 3.1 #Components.Accordion
Accordion

Leverage spacing utility classes for padding and margin for the content within the accordion. To show the content of the accordion toggle the class active on pui-accordion. These accordions are also keyboard accessible.

Platform UI accordions were designed to be stacked.

Example:

This is the accordion content.

Markup:

<div class="pui-accordion">
   <a href="#" class="pui-accordion__header px-3 py-3 flex--justify-between flex--align-center">
     <div class="flex flex--align-center">
       <p>This is an accordion header. </p>
     </div>
     <i class="pi-angle-down pui-accordion__icon text-med-blue"></i>
   </a>
   <div class="pui-accordion__content px-3 py-3">
     <p>This is the accordion content.</p>
   </div>
 </div>
<div class="pui-accordion">
   <a href="#" class="pui-accordion__header px-3 py-3 flex--justify-between flex--align-center">
     <div class="flex flex--align-center">
       <p>This is an accordion header. </p>
     </div>
     <i class="pi-angle-down pui-accordion__icon text-med-blue"></i>
   </a>
   <div class="pui-accordion__content px-3 py-3">
     <p>This is the accordion content.</p>
   </div>
 </div>

Source: sass/_accordion.scss, line 9

Section 3.1.1 #Components.Accordion.Active
Active

Adding .active changes the default header bar background and hover highlight.

Example:

This is the accordion content.

Markup:

<div class="pui-accordion active">
   <a href="#" class="pui-accordion__header px-3 py-3 flex--justify-between flex--align-center">
     <div class="flex flex--align-center">
       <p>This is an accordion header.</p>
     </div>
     <i class="pi-angle-down pui-accordion__icon text-med-blue"></i>
   </a>
   <div class="pui-accordion__content px-3 py-3">
     <p>This is the accordion content.</p>
   </div>
 </div>

Source: sass/_accordion.scss, line 42

Section 3.1.2 #Components.Accordion.Nested
Nested

Nesting accordions gives the appearance of active accordions within.

Example:

This is the accordion content.

This is the nested accordion content.

Markup:

<div class="pui-accordion active">
   <a href="#" class="pui-accordion__header px-3 py-3 flex--justify-between flex--align-center">
     <div class="flex flex--align-center">
       <p>This is an accordion header.</p>
     </div>
     <i class="pi-angle-down pui-accordion__icon text-med-blue"></i>
   </a>
  <div class="pui-accordion__content">
    <div class="px-3 py-3">
      <p>This is the accordion content.</p>
    </div>
    <div class="pui-accordion">
      <a href="#" class="pui-accordion__header px-3 py-3 flex flex--justify-between flex--align-center">
        <div class="flex flex--align-center">
          <p>This is a nested accordion header.</p>
        </div>
        <i class="pi-angle-down pui-accordion__icon text-med-blue"></i>
      </a>
      <div class="pui-accordion__content">
        <div class="px-3 py-3">
          <p>This is the nested accordion content.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Source: sass/_accordion.scss, line 61

Section 3.2 #Components.Button
Button

Each button has a default button style. Color can be added to any button using a combination of background and text utilities.

Add icons to buttons using platform icons icons: <i class="pi-plus"></i>

The default platform button. Usually paired visually with an icon. Can be the default size or large.

.button
.button .button--lg

Example:

Markup:

<button class="button mb-2">Basic Button</button>
<button class="button mb-2">Add <i class="pi-plus"></i></button>
<button class="button button--lg">Add <i class="pi-plus"></i></button>

Source: sass/_buttons.scss, line 9

Section 3.2.1 #Components.Button.Accessibility
Accessibility

For our links that should look like buttons, and contain an icon, we need to add specific aria-roles for accessibility. These are links that look like buttons but do not have the same html.

Another accessibility consideration is to add aria-labels appropriately. In the example below, we have a button only containing a font icon. To make this button accessible for screen readers, you should add an aria-label and apply aria-hidden="true" to the icon.

Learn more about aria-label.

Example:

Markup:

<a class="button button--secondary" role="button" aria-label="Download">
 <i class="pi-download" aria-hidden="hidden"></i>
</a>

Source: sass/_buttons.scss, line 124

Section 3.2.2 #Components.Button.Active
Active

By adding the class active to a button, the button's hover effect is mimicked.

Example:

Markup:

<button class="button mb-2">Add <i class="pi-plus" aria-hidden="hidden"></i></button>
<button class="button button--lg active">Add <i class="pi-plus" aria-hidden="hidden"></i></button>
<div class="button-group mt-4">
  <a class="button button--secondary" role="button" aria-label="Download">
    <i class="pi-download" aria-hidden="hidden"></i>
  </a>
  <a class="button button--secondary active" role="button" aria-label="locked">
    <i class="pi-lock" aria-hidden="hidden"></i>
  </a>
</div>

Source: sass/_buttons.scss, line 144

Section 3.2.3 #Components.Button.Colors
Colors

We loop through a map to give you these color variations. The white button is not in this map however. A white ghost button, on hover, will resemble our standard .button look. You can get really fancy if you want by adding a specific text color on hover with any of these buttons. See the second ghost white button example below.

Example:

Markup:

<div class="button-group mb-4 p-2">
  <button class="button button--navy">Navy</button>
  <button class="button button--skyblue">Skyblue</button>
  <button class="button button--lightblue">Lightblue</button>
  <button class="button button--med-blue">Med-blue</button>
  <button class="button button--beige">Beige</button>
  <button class="button button--peach">Peach</button>
  <button class="button button--salmon">Salmon</button>
  <button class="button button--brown">Brown</button>
  <button class="button button--orange">Orange</button>
</div>
<div class="button-group mb-4 p-2 background-lighter">
  <button class="button button--ghost button--navy">Navy</button>
  <button class="button button--ghost button--skyblue">Skyblue</button>
  <button class="button button--ghost button--lightblue">Lightblue</button>
  <button class="button button--ghost button--med-blue">Med-blue</button>
  <button class="button button--ghost button--beige">Beige</button>
  <button class="button button--ghost button--peach">Peach</button>
  <button class="button button--ghost button--salmon">Salmon</button>
  <button class="button button--ghost button--brown">Brown</button>
  <button class="button button--ghost button--orange">Orange</button>
</div>
<div class="button-group p-2 background-med-blue">
  <button class="button button--white button--ghost">Button</button>
  <button class="button button--white button--ghost text-med-blue--hover">Button</button>
</div>

Source: sass/_buttons.scss, line 197

Section 3.2.4 #Components.Button.Disabled
Disabled

To make a button look inactive, add the disabled attribute.

<a> elements do not support the disabled attribute. In order to make an <a> that is a button look disabled, add the .disabled class. Also, note that adding specific aria roles and attributes to your button will help with screen readers and other assitive technology.

Although the links look disabled and have the css property of pointer-events: none, users can still navigate to the links and use them via keyboard navigation. To ensure that your users could not interact with disabled links, it's recommended to use JavaScript to disable functionality further.

Example:

Status Account

Markup:

<div class="button-group">
  <button class="button" disabled>
    Download
    <i class="pi-download" aria-hidden="hidden"></i>
  </button>
  <button class="button" disabled>
    Lock
    <i class="pi-lock" aria-hidden="hidden"></i>
  </button>
  <button class="button button--post" disabled>
    Submit
  </button>
</div>
<div class="button-group mt-4">
  <a href="#" class="button disabled" disabled role="button" aria-disabled="true">
    Status
  </a>
  <a href="#" class="button disabled" disabled role="button" aria-disabled="true">
    Account
  </a>
</div>

Source: sass/_buttons.scss, line 162

Section 3.2.5 #Components.Button.Group
Group

Evenly space any group of buttons.

.button--group

Example:

Markup:

<div class="button-group">
  <a class="button button--secondary"><i class="pi-download"></i></a>
  <a class="button button--secondary"><i class="pi-lock"></i></a>
  <a class="button button--secondary"><i class="pi-save"></i></a>
</div>

Source: sass/_buttons.scss, line 77

Section 3.2.6 #Components.Button.Loading
Loading

Buttons with a loading icon. Example for form submissions.

Notice: For styleguide purposes all of the code is rendered here. The things that should be toggled are the aria-label="Loading" and the text in the button. So for example, on submit, you would add <span class="sr-only">Loading...</span> the class sr-only is key to prevent the button from changin size.

Example:

Markup:

<div class="button-group">
  <button class="button loading mb-2" aria-label="Loading...">
    Submit
    <span class="sr-only">Loading...</span>
  </button>
  <button class="button button--lg loading mb-2" aria-label="Loading...">
    Submit
    <span class="sr-only">Loading...</span>
  </button>
  <button class="button button--secondary loading mb-2" aria-label="Download" aria-label="Loading...">
    <i class="pi-download" aria-hidden="hidden"></i>
    <span class="sr-only">Loading...</span>
  </button>
  <button class="button button--post loading mb-2" aria-label="Loading...">
    Submit
    <span class="sr-only">Loading...</span>
  </button>
</div>

Source: sass/_buttons.scss, line 92

Section 3.2.7 #Components.Button.Post
Post

Used exclsively in Post, or blog, content imported into the platform. e.g., CRM dashboard.

.button .button--post
.button .button--post .button--lg

Example:

Markup:

<button class="button button--post mb-2">Post Button</button>
<button class="button button--post button--lg">Large Post Button</button>

Source: sass/_buttons.scss, line 64

Section 3.2.8 #Components.Button.Secondary
Secondary

The secondary platform button. Always a round button paired with a Platform icon. Can be the default size or large.

.button
.button .button--secondary
.button .button--secondary .button--lg

Example:

Markup:

<button class="button button--secondary"><i class="pi-download"></i></button>

Source: sass/_buttons.scss, line 28

Section 3.2.9 #Components.Button.SecondaryText
Secondary - Text

If you want to use the secondary button for the look and hover effect, but you need to include text, you can. Include the class has-text on the secondary button. So the classes tould be, button button--secondary has-text. What this does is add width: auto and a little padding for the text.

If you want to display text only on hover, add a data attribute named data-button-text, this will insert the value of that attribute on hover.

.button
.button .button--secondary
.button .button--secondary .has-text

Example:

Markup:

<div class="button-group">
  <button class="button button--secondary has-text">Open <i class="pi-download"></i></button>
  <button class="button button--secondary" data-button-text="Download"><i class="pi-download"></i></button>
  <button class="button button--secondary loading" data-button-text="Download"><i class="pi-download"></i></button>
</div>

Source: sass/_buttons.scss, line 41

Section 3.3 #Components.Cards
Cards

Cards can be great for seperating blocks of content. A pui-card comes standard with a white background, light grey border, and some padding.

Note: The use of the block-container and block classes are only to give the pui-card size.

Example:

This is a card.

Markup:

<div class="block-container">
  <div class="block block-4">
    <div class="pui-card">
      <p>This is a card.</p>
    </div>
  </div>
</div>

Source: sass/_cards.scss, line 8

Section 3.3.1 #Components.Cards.Headers
Headers

For the headings in your cards, you generally want to wrap them in the class pui-card__header. This works best when you have a layout of inline content that should have space between. The class pui-card__group will give the element display: flex. When it is nested inside the class pui-card__header it will also have align-items: center.

Example:

Card content.

Markup:

<div class="block-container">
  <div class="block block-4">
    <div class="pui-card">
      <div class="pui-card__header">
        <div class="pui-card__group">
          <i class="pi-quill"></i>
          <div class="pui-card__title">Card Header</div>
        </div>
        <button class="button">Button</button>
      </div>
      <p>Card content.</p>
    </div>
  </div>
</div>

Source: sass/_cards.scss, line 26

Section 3.3.2 #Components.Cards.ImageCard
Image Card

Images can be placed at the top of cards. The <img> element gets the class pui-card__image and is expected to be the first child element of the card. When rounded- modifiers are used on the card, the image takes on the radius as well. Other modifiers can be used as needed.

Example:

Part 1

1:45

Card Title

Donec malesuada semper risus vitae placerat. Morbi tristique, odio vel hendrerit sollicitudin, massa orci blandit felis, ac vehicula nulla mauris vitae arcu.

Part 1

1:45

Card Title

Donec malesuada semper risus vitae placerat. Morbi tristique, odio vel hendrerit sollicitudin, massa orci blandit felis, ac vehicula nulla mauris vitae arcu.

Part 1

1:45

Card Title

Donec malesuada semper risus vitae placerat. Morbi tristique, odio vel hendrerit sollicitudin, massa orci blandit felis, ac vehicula nulla mauris vitae arcu.

Part 1

1:45

Card Title

Donec malesuada semper risus vitae placerat. Morbi tristique, odio vel hendrerit sollicitudin, massa orci blandit felis, ac vehicula nulla mauris vitae arcu.

Markup:

<div class="block-container blocks p-3 mb-3 tablet-up-4">
<div class="block">
<div class="pui-card rounded-3">
    <img class="pui-card__image background-lightblue p-3" src="site-assets/images/svg/course-1.svg" alt="" />
    <div class="pui-card__content">
        <div class="flex flex--justify-between">
            <div class="text--bold text--uppercase">Part 1</div>
            <div class="text--bold flex flex--align-center">
                <i class="pi-clock text-navy mr-1" aria-hidden="true"></i>
                1:45
            </div>
        </div>
        <h3 class="text-med-blue">Card Title</h3>
        <p>Donec malesuada semper risus vitae placerat. Morbi tristique, odio vel hendrerit sollicitudin, massa orci blandit felis, ac vehicula nulla mauris vitae arcu.</p>
    </div>
</div>
</div>
<div class="block">
<div class="pui-card">
    <img class="pui-card__image background-lightblue p-3" src="site-assets/images/svg/course-1.svg" alt="" />
    <div class="pui-card__content">
        <div class="flex flex--justify-between">
            <div class="text--bold text--uppercase">Part 1</div>
            <div class="text--bold flex flex--align-center">
                <i class="pi-clock text-navy mr-1" aria-hidden="true"></i>
                1:45
            </div>
        </div>
        <h3 class="text-med-blue">Card Title</h3>
        <p>Donec malesuada semper risus vitae placerat. Morbi tristique, odio vel hendrerit sollicitudin, massa orci blandit felis, ac vehicula nulla mauris vitae arcu.</p>
    </div>
</div>
</div>
<div class="block">
<div class="pui-card rounded-3">
    <img class="pui-card__image" src="https://i.picsum.photos/id/1061/600/400.jpg" alt="" />
    <div class="pui-card__content">
        <div class="flex flex--justify-between">
            <div class="text--bold text--uppercase">Part 1</div>
            <div class="text--bold flex flex--align-center">
                <i class="pi-clock text-navy mr-1" aria-hidden="true"></i>
                1:45
            </div>
        </div>
        <h3 class="text-med-blue">Card Title</h3>
        <p>Donec malesuada semper risus vitae placerat. Morbi tristique, odio vel hendrerit sollicitudin, massa orci blandit felis, ac vehicula nulla mauris vitae arcu.</p>
    </div>
</div>
</div>
<div class="block">
<div class="pui-card">
    <img class="pui-card__image" src="https://i.picsum.photos/id/1061/600/400.jpg" alt="" />
    <div class="pui-card__content">
        <div class="flex flex--justify-between">
            <div class="text--bold text--uppercase">Part 1</div>
            <div class="text--bold flex flex--align-center">
                <i class="pi-clock text-navy mr-1" aria-hidden="true"></i>
                1:45
            </div>
        </div>
        <h3 class="text-med-blue">Card Title</h3>
        <p>Donec malesuada semper risus vitae placerat. Morbi tristique, odio vel hendrerit sollicitudin, massa orci blandit felis, ac vehicula nulla mauris vitae arcu.</p>
    </div>
</div>
</div>
</div>

Source: sass/_cards.scss, line 50

Section 3.3.3 #Components.Cards.Overflow
Content Overflow

If you have a lot of content in a card that is causing other cards to grow too much, you could add the class pui-card__content--scroll to the pui-card__content in order to set a height and add an overflow-y: auto;.

Example:

Card content.

Desc

Carol from accounting need to get some updates.

Markup:

<div class="block-container mobile-up-3 blocks px-2">
  <div class="block">
    <div class="pui-card flex flex--column flex--justify-between">
        <div class="pui-card__header">
            <div class="pui-card__group">
                <div class="pui-card__title pui-card__title--normal">Card Header</div>
            </div>
            <div class="pui-card__header-actions"><a role="button" aria-label="remove"
                    class="pui-card-action text-light"><i class="pi-trash" aria-hidden="true"></i></a>
                <a role="button" aria-label="edit" class="pui-card-action text-light"><i class="pi-edit"
                        aria-hidden="true"></i></a></div>
        </div>
        <div class="pui-card__content">
            <p>Card content.</p>
        </div>
        <div class="pui-card__footer pui-card__footer">
            <div>
                <p><i class="pi-calendar text-skyblue" aria-hidden="true"></i> <time
                        datetime="22 Jul 2019">22 Jul 2019</time></p>
                <p><i class="pi-clock text-skyblue" aria-hidden="true"></i> <time datetime="9:15 am">9:15
                        am</time></p>
            </div>
            <div class="div-btn">
                <div class="check-circle">
                    <div class="pill pill--circle-large text-light"><i class="pi-check pi-xl" aria-hidden="true"></i>
                    </div>
                    <p class="check-circle__status">Complete</p>
                </div>
                <p class="check-circle__status">Complete</p>
            </div>
        </div>
        <div class="flex">
            <!---->
        </div>
    </div>
  </div>
  <div class="block">
    <div class="pui-card flex flex--column flex--justify-between">
        <div class="pui-card__header">
            <div class="pui-card__group">
                <h2 class="pui-card__title pui-card__title--normal">Testing stuff</h2>
            </div>
            <div class="pui-card__header-actions"><a role="button" aria-label="remove"
                    class="pui-card-action text-light"><i class="pi-trash" aria-hidden="true"></i></a>
                <a role="button" aria-label="edit" class="pui-card-action text-light"><i class="pi-edit"
                        aria-hidden="true"></i></a></div>
        </div>
        <div class="pui-card__content pui-card__content--scroll">
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
            <p>Desc</p>
        </div>
        <div class="pui-card__footer pui-card__footer">
            <div>
                <p><i class="pi-calendar text-skyblue" aria-hidden="true"></i> <time
                        datetime="23 Jul 2019">23 Jul 2019</time></p>
                <p><i class="pi-clock text-skyblue" aria-hidden="true"></i> <time datetime="12:00 am">12:00
                        am</time></p>
            </div>
            <div class="div-btn">
                <div class="check-circle">
                    <div class="pill pill--circle-large text-light"><i class="pi-check pi-xl" aria-hidden="true"></i>
                    </div>
                    <p class="check-circle__status">Complete</p>
                </div>
                <p class="check-circle__status">Complete</p>
            </div>
        </div>
        <div class="flex">
            <!---->
        </div>
    </div>
  </div>
  <div class="block">
    <div class="pui-card flex flex--column flex--justify-between">
        <div class="pui-card__header">
            <div class="pui-card__group">
                <h2 class="pui-card__title pui-card__title--normal">Call Carol</h2>
            </div>
            <div class="pui-card__header-actions"><a role="button" aria-label="remove"
                    class="pui-card-action text-light"><i class="pi-trash" aria-hidden="true"></i></a>
                <a role="button" aria-label="edit" class="pui-card-action text-light"><i class="pi-edit"
                        aria-hidden="true"></i></a></div>
        </div>
        <div class="pui-card__content">
            <p>Carol from accounting need to get some updates.</p>
        </div>
        <div class="pui-card__footer pui-card__footer">
            <div>
                <p><i class="pi-calendar text-skyblue" aria-hidden="true"></i> <time
                        datetime="23 Jul 2019">23 Jul 2019</time></p>
                <p><i class="pi-clock text-skyblue" aria-hidden="true"></i> <time datetime="6:30 pm">6:30
                        pm</time></p>
            </div>
            <div class="div-btn">
                <div class="check-circle">
                    <div class="pill pill--circle-large text-light"><i class="pi-check pi-xl" aria-hidden="true"></i>
                    </div>
                    <p class="check-circle__status">Complete</p>
                </div>
                <p class="check-circle__status">Complete</p>
            </div>
        </div>
        <div class="flex">
            <!---->
        </div>
    </div>
  </div>
</div>

Source: sass/_cards.scss, line 125

Section 3.4 #Components.Drawer
Drawer

Drawers slide up or in-from-right.

There are some key classes you need for the drawer to work properly. Be sure to use pui-drawer pui-drawer--closed on each drawer. From this point, you want to add the proper animation class to the drawer. In the examples below, we have the classes set for the direction of the drawer animation. Now all you need to do is toggle the class pui-drawer--closed to show or hide the drawer.

You can have a drawer open from the bottom by using the class pui-drawer-bottom. To have a drawer open from the right use pui-drawer-right.

If you want a smaller drawer you can add the class pui-drawer--single-row. This class has a min-height and is best used in cases where less content will be needed.

Example:

Content.

Single row drawer without a header.

Markup:

<div class="block-container">
  <button class="button button--post button--lg pui-drawer__open mr-2" data-drawer="default">Toggle default drawer</button>
  <button class="button button--post button--lg pui-drawer__open" data-drawer="single-row">Toggle single row drawer</button>
</div>
<div id="default" class="pui-drawer pui-drawer-bottom pui-drawer--closed animated slideInUp fastest">
  <div class="pui-drawer__inner animated slideInUp fastest">
    <div class="pui-drawer__header">
      <button class="button pui-drawer__close" data-drawer="default">Close <i class="pi-times" aria-hidden="true"></i></button>
      <h3 class="mb-2">Header.</h3>
    </div>
    <div class="pui-drawer__content">
      <p>Content.</p>
    </div>
  </div>
</div>
<div id="single-row" class="pui-drawer pui-drawer-bottom pui-drawer--single-row pui-drawer--closed animated slideInUp fastest">
  <div class="pui-drawer__inner animated slideInUp fastest">
    <div class="pui-drawer__content">
      <button class="button pui-drawer__close" data-drawer="single-row">Close <i class="pi-times" aria-hidden="true"></i></button>
      <p>Single row drawer without a header.</p>
    </div>
  </div>
</div>

Source: sass/_drawer.scss, line 7

Section 3.4.1 #Components.Drawer.Left
Drawer Left

This Drawer slides in from the left.

Example:

Drawer Left

Markup:

<button class="button button--post button--lg pui-drawer__open" data-drawer="left">Toggle left drawer</button>
<div id="left" class="pui-drawer pui-drawer-left slide-left-enter-active pui-drawer--closed background-note pt-5 pb-3 px-4">
  <div class="flex flex--align-center flex--justify-between pb-3 mb-2">
    <div class="flex flex--align-center">
      <button class="button button--secondary js-toggle-form">
        <i class="pi-plus"></i>
      </button>
      <h2 class="ml-2 my-0 text-navy">Drawer Left</h2>
    </div>
    <button class="button pui-drawer__close" data-drawer="left">Close <i class="pi-times" aria-hidden="true"></i></button>
  </div>
</div>

Source: sass/_drawer.scss, line 69

Section 3.4.2 #Components.Drawer.Right
Drawer Right

This Drawer slides in from the right.

Example:

Drawer Right

Markup:

<button class="button button--post button--lg pui-drawer__open" data-drawer="right">Toggle right drawer</button>
<div id="right" class="pui-drawer pui-drawer-right slide-right-enter-active pui-drawer--closed background-note pt-5 pb-3 px-4">
  <div class="flex flex--align-center flex--justify-between pb-3 mb-2">
    <div class="flex flex--align-center">
      <button class="button button--secondary js-toggle-form">
        <i class="pi-plus"></i>
      </button>
      <h2 class="ml-2 my-0 text-navy">Drawer Right</h2>
    </div>
    <button class="button pui-drawer__close" data-drawer="right">Close <i class="pi-times" aria-hidden="true"></i></button>
  </div>
</div>

Source: sass/_drawer.scss, line 49

Section 3.5 #Components.Figure
Figure Hover

To hide and show the figcaption on hover, you can add the class figure-hover to a figure. Notice the figcaption transitions on hover.

Example:

Markup:

<figure class="figure-hover">
  <img src="https://via.placeholder.com/500x250.png/e2e3e5/666666?text=This+Is+A+Test+Figure" alt="Figcaption goes here.">
  <figcaption>Figcaption goes here.</figcaption>
</figure>

Source: sass/_figure.scss, line 1

Section 3.6 #Components.ImageRound
Image Round

Circular pills can also have images.

Example:

Markup:

<div class="image--round-small background-navy">
  <img src="https://images.unsplash.com/photo-1565191999001-551c187427bb?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="pretty mountain">
</div>
<div class="image--round-small">
  <img src="https://images.unsplash.com/photo-1565191999001-551c187427bb?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="pretty">
</div>
<div class="image--round-medium">
  <img src="https://images.unsplash.com/photo-1565191999001-551c187427bb?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="pretty">
</div>
<div class="image--round-large">
  <img src="https://images.unsplash.com/photo-1565191999001-551c187427bb?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="pretty">
</div>

Source: sass/_images.scss, line 6

Section 3.7 #Components.info
Info Box

Click the button to toggle the info box.

Example:

Markup:

<div class="pui-info-box">
  <button class="button button--secondary toggle-hidden" role="button" aria-label="Toggle">
    <i class="pi-filter" aria-hidden="hidden"></i>
  </button>
  <div class="pui-info-box__content hidden">
    <button class="button pui-info-box__close">
      Close <i class="pi-times" aria-hidden="hidden"></i>
    </button>
    <form action="" class="block-container block-mb-4 pui-form">
      <label for="dob" class="block pui-form__field has-icon">Birthday
        <input id="dob" type="date" placeholder="DD/MM/YYYY">
        <i class="pi-calendar text-skyblue background-white"></i>
      </label>
      <fieldset class="block pui-form__field">
        <legend>Please Choose</legend>
        <div class="pui-toggle">
          <div class="pui-toggle__content">
            <input class="pui-toggle__input" id="smoking" type="radio" checked name="rate">
            <label for="smoking">This one</label>
          </div>
          <div class="pui-toggle__content">
            <input class="pui-toggle__input" id="non-smoking" type="radio" name="rate">
            <label for="non-smoking">That one</label>
          </div>
        </div>
      </fieldset>
      <fieldset class="block pui-form__field">
        <legend>Also Choose</legend>
        <div class="pui-toggle">
          <div class="pui-toggle__content">
            <input class="pui-toggle__input" id="Single" type="radio" checked name="household">
            <label for="Single">Red Fish</label>
          </div>
          <div class="pui-toggle__content">
            <input class="pui-toggle__input" id="household" type="radio" name="household">
            <label for="household">Blue Fish</label>
          </div>
        </div>
      </fieldset>
      <fieldset class="block pui-form__field">
        <legend id="radio-heading">Pick Some Letters</legend>
        <div class="block-container" role="radiogroup" aria-labelledby="radio-heading">
          <div class="block-3 my-2 px-1">
            <span class="pill background-light text-white flex--align-center" id="a" tabindex="0" role="radio" aria-checked="false">
              <i class="pi-circle"></i> A
            </span>
          </div>
          <div class="block-3 my-2 px-1">
            <span class="pill background-light text-white flex--align-center" id="B" tabindex="0" role="radio" aria-checked="false">
              <i class="pi-circle"></i> B
            </span>
          </div>
          <div class="block-3 my-2 px-1">
            <span class="pill background-light text-white flex--align-center" id="C" tabindex="0" role="radio" aria-checked="false">
              <i class="pi-circle"></i> C
            </span>
          </div>
          <div class="block-3 my-2 px-1">
            <span class="pill background-light text-white flex--align-center" id="D" tabindex="0" role="radio" aria-checked="false">
              <i class="pi-circle"></i> D
            </span>
          </div>
          <div class="block-3 my-2 px-1">
            <span class="pill background-light text-white flex--align-center" id="F" tabindex="0" role="radio" aria-checked="false">
              <i class="pi-circle"></i> F
            </span>
          </div>
          <div class="block-3 my-2 px-1">
            <span class="pill background-light text-white flex--align-center" id="G" tabindex="0" role="radio" aria-checked="false">
              <i class="pi-circle"></i> G
            </span>
          </div>
          <div class="block-3 my-2 px-1">
            <span class="pill background-light text-white flex--align-center" id="Hi-F" tabindex="0" role="radio" aria-checked="false">
              <i class="pi-circle"></i> Hi-F
            </span>
          </div>
          <div class="block-3 my-2 px-1">
            <span class="pill background-light text-white flex--align-center" id="K" tabindex="0" role="radio" aria-checked="false">
              <i class="pi-circle"></i> K
            </span>
          </div>
          <div class="block-3 my-2 px-1">
            <span class="pill background-light text-white flex--align-center" id="L" tabindex="0" role="radio" aria-checked="false">
              <i class="pi-circle"></i> L
            </span>
          </div>
          <div class="block-3 my-2 px-1">
            <span class="pill background-light text-white flex--align-center" id="M" tabindex="0" role="radio" aria-checked="false">
              <i class="pi-circle"></i> M
            </span>
          </div>
          <div class="block-3 my-2 px-1">
            <span class="pill background-light text-white flex--align-center" id="N" tabindex="0" role="radio" aria-checked="false">
              <i class="pi-circle"></i> N
            </span>
          </div>
          <div class="block-3 my-2 px-1">
            <span class="pill background-light text-white flex--align-center" id="All" tabindex="0" role="radio" aria-checked="false">
              <i class="pi-circle"></i> All
            </spann>
          </div>
        </div>
      </fieldset>
      <div class="pui-form__field pui-form__button-group">
        <button class="button button--post button--lg">Submit</button>
      </div>
    </form>
  </div>
</div>

Source: sass/_info-box.scss, line 7

Section 3.8 #Components.Lists
Lists

The ul within platform-ui have margin: 0 and a padding-left: 1rem. The lis in those lists have margin-bottom: .5rem. Each post-item also has a border-bottom all except the last item in the list.

Source: sass/_lists.scss, line 6

Section 3.8.1 #Components.Lists.Post
Post Lists

A post-listis a pretty basic list. The margin and padding is removed from the list itself. Thepost-items which should be added to thelis in the list, have apadding-bottom: 1remandmargin-bottom: 1rem`.

Adding the class post-list--inline gives the list an inline look using display: flex.

You can add some arrow icons to be in front of each li by adding the class post-list--arrow.

Example:

This is a list item.
This is a list item.
This is a list item.

This is an inline list item.
This is an inline list item.
This is an inline list item.

This is a list item with a leading arrow.
This is a list item with a leading arrow.
This is a list item with a leading arrow.

Markup:

<ul class="post-list">
  <li class="post-item">This is a list item.</li>
  <li class="post-item">This is a list item.</li>
  <li class="post-item">This is a list item.</li>
</ul>
<br>
<ul class="post-list post-list--inline">
  <li class="post-item">This is an inline list item.</li>
  <li class="post-item">This is an inline list item.</li>
  <li class="post-item">This is an inline list item.</li>
</ul>
<br>
<ul class="post-list post-list--arrow">
  <li class="post-item">This is a list item with a leading arrow.</li>
  <li class="post-item">This is a list item with a leading arrow.</li>
  <li class="post-item">This is a list item with a leading arrow.</li>
</ul>

Source: sass/_lists.scss, line 13

Section 3.8.2 #Components.Lists.RimList
pui-list

The pui-list is a simplified list that strips the list-style-type, margin, and padding. You can have a bordered list by adding the pui-list--bordered modifier. Be sure to add the class pui-list__item to the li. This puts a top border on the list, as well as a border-bottom on each li.

Example:

This is a pui-list item.
This is a pui-list item.
This is a pui-list item.

This is a pui-list item.
This is a pui-list item.
This is a pui-list item.

Markup:

<ul class="pui-list">
  <li>This is a pui-list item.</li>
  <li>This is a pui-list item.</li>
  <li>This is a pui-list item.</li>
</ul>
<br>
<div class="mt-4">
  <ul class="pui-list pui-list--bordered">
    <li class="pui-list__item">This is a pui-list item.</li>
    <li class="pui-list__item">This is a pui-list item.</li>
    <li class="pui-list__item">This is a pui-list item.</li>
  </ul>
</div>

Source: sass/_lists.scss, line 43

Section 3.9 #Components.Messages
Messages

These are examples of global messages or alerts

Example:

This is an example of a message that fires after an error has occured.

This is an example of a message that displays a success message. Congratulations! You're form has been submitted.

This is an example of a message that displays a warning but not necessarily an error.

This is an example of a message that displays some simple information.

This is an example of a message that fires after an error has occured.

This is an example of a message that displays a success message. Congratulations! You're form has been submitted.

This is an example of a message that displays a warning but not necessarily an error.

This is an example of a message that displays some simple information.

Markup:

<div class="pui-message pui-message--error">
  <p>This is an example of a message that fires after an error has occured. </p>
</div>
<div class="pui-message pui-message--success">
  <p>This is an example of a message that displays a success message. Congratulations! You're form has been submitted. </p>
</div>
<div class="pui-message pui-message--warning">
  <p>This is an example of a message that displays a warning but not necessarily an error.</p>
</div>
<div class="pui-message pui-message--info">
  <p>This is an example of a message that displays some simple information.</p>
</div>
<div class="pui-message pui-message--error" data-header="Alternate heading based on data-header">
  <p>This is an example of a message that fires after an error has occured. </p>
</div>
<div class="pui-message pui-message--success" data-header="Alternate heading based on data-header">
  <p>This is an example of a message that displays a success message. Congratulations! You're form has been submitted. </p>
</div>
<div class="pui-message pui-message--warning" data-header="Alternate heading based on data-header">
  <p>This is an example of a message that displays a warning but not necessarily an error.</p>
</div>
<div class="pui-message pui-message--info" data-header="Alternate heading based on data-header">
  <p>This is an example of a message that displays some simple information.</p>
</div>

Source: sass/_messages.scss, line 8

Section 3.10 #Components.modal
Modal

Modal default state is closed. Toggling .pui-modal--closed on both the .pui-modal--overlay and .pui-modal will diplay the modal.

.pui-modal__close on the close button is also a handle for JS.

Animation note: using animated must be placed on .pui-modal__inner to maintain correct positioning.

The default size of the modal is medium, you can use pui-modal--small, pui-modal--large, or pui-modal--full for different sized modals.

You can center a modal in the middle of the window with the modifier pui-modal--centered.

You may run into issues where the background scrolls while your modal is open. To prevent this behavior, add the .modal-open class to your body element when a modal is open. See demo below for example and note how adding the .modal-open class to the body on open makes the background scroll bar go away.

Example:

pui-modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend convallis quam fermentum sagittis. Curabitur nec ullamcorper nibh, et rhoncus ipsum. Cras quam lacus, gravida id pharetra sit amet, eleifend vel enim. Donec non est ullamcorper tellus aliquam molestie. Morbi vitae nisi velit. Nam tincidunt justo eros, quis posuere quam condimentum ac. Curabitur mi diam, efficitur laoreet iaculis non, volutpat ac ligula. Nullam ut luctus arcu. Donec a turpis mi. Pellentesque fermentum, turpis at bibendum laoreet, lorem lorem tempor lectus, congue viverra nisi dui nec purus. Donec ultricies ut risus sit amet mollis.

Full Screen Modal

Markup:

<div id="default-modal" class="pui-modal pui-modal--closed" tabindex="-1">
  <div class="pui-modal__inner animated slideInUp faster">
    <div class="pui-modal__header">
      <button class="button pui-modal__close" data-modal="default-modal">Close <i class="pi-times"></i></button>
      Standard Modal
    </div>
    <div class="pui-modal__content">
      <h3>pui-modal</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend convallis quam fermentum sagittis. Curabitur nec ullamcorper nibh, et rhoncus ipsum. Cras quam lacus, gravida id pharetra sit amet, eleifend vel enim. Donec non est ullamcorper tellus aliquam molestie. Morbi vitae nisi velit. Nam tincidunt justo eros, quis posuere quam condimentum ac. Curabitur mi diam, efficitur laoreet iaculis non, volutpat ac ligula. Nullam ut luctus arcu. Donec a turpis mi. Pellentesque fermentum, turpis at bibendum laoreet, lorem lorem tempor lectus, congue viverra nisi dui nec purus. Donec ultricies ut risus sit amet mollis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend convallis quam fermentum sagittis. Curabitur nec ullamcorper nibh, et rhoncus ipsum. Cras quam lacus, gravida id pharetra sit amet, eleifend vel enim. Donec non est ullamcorper tellus aliquam molestie. Morbi vitae nisi velit. Nam tincidunt justo eros, quis posuere quam condimentum ac. Curabitur mi diam, efficitur laoreet iaculis non, volutpat ac ligula. Nullam ut luctus arcu. Donec a turpis mi. Pellentesque fermentum, turpis at bibendum laoreet, lorem lorem tempor lectus, congue viverra nisi dui nec purus. Donec ultricies ut risus sit amet mollis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend convallis quam fermentum sagittis. Curabitur nec ullamcorper nibh, et rhoncus ipsum. Cras quam lacus, gravida id pharetra sit amet, eleifend vel enim. Donec non est ullamcorper tellus aliquam molestie. Morbi vitae nisi velit. Nam tincidunt justo eros, quis posuere quam condimentum ac. Curabitur mi diam, efficitur laoreet iaculis non, volutpat ac ligula. Nullam ut luctus arcu. Donec a turpis mi. Pellentesque fermentum, turpis at bibendum laoreet, lorem lorem tempor lectus, congue viverra nisi dui nec purus. Donec ultricies ut risus sit amet mollis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend convallis quam fermentum sagittis. Curabitur nec ullamcorper nibh, et rhoncus ipsum. Cras quam lacus, gravida id pharetra sit amet, eleifend vel enim. Donec non est ullamcorper tellus aliquam molestie. Morbi vitae nisi velit. Nam tincidunt justo eros, quis posuere quam condimentum ac. Curabitur mi diam, efficitur laoreet iaculis non, volutpat ac ligula. Nullam ut luctus arcu. Donec a turpis mi. Pellentesque fermentum, turpis at bibendum laoreet, lorem lorem tempor lectus, congue viverra nisi dui nec purus. Donec ultricies ut risus sit amet mollis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend convallis quam fermentum sagittis. Curabitur nec ullamcorper nibh, et rhoncus ipsum. Cras quam lacus, gravida id pharetra sit amet, eleifend vel enim. Donec non est ullamcorper tellus aliquam molestie. Morbi vitae nisi velit. Nam tincidunt justo eros, quis posuere quam condimentum ac. Curabitur mi diam, efficitur laoreet iaculis non, volutpat ac ligula. Nullam ut luctus arcu. Donec a turpis mi. Pellentesque fermentum, turpis at bibendum laoreet, lorem lorem tempor lectus, congue viverra nisi dui nec purus. Donec ultricies ut risus sit amet mollis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend convallis quam fermentum sagittis. Curabitur nec ullamcorper nibh, et rhoncus ipsum. Cras quam lacus, gravida id pharetra sit amet, eleifend vel enim. Donec non est ullamcorper tellus aliquam molestie. Morbi vitae nisi velit. Nam tincidunt justo eros, quis posuere quam condimentum ac. Curabitur mi diam, efficitur laoreet iaculis non, volutpat ac ligula. Nullam ut luctus arcu. Donec a turpis mi. Pellentesque fermentum, turpis at bibendum laoreet, lorem lorem tempor lectus, congue viverra nisi dui nec purus. Donec ultricies ut risus sit amet mollis.</p>
    </div>
  </div>
</div>
<div id="small-modal" class="pui-modal pui-modal--small pui-modal--closed" tabindex="-1">
  <div class="pui-modal__inner animated slideInUp faster">
    <div class="pui-modal__header">
      <button class="button pui-modal__close" data-modal="small-modal">Close <i class="pi-times"></i></button>
      Modal
    </div>
    <div class="pui-modal__content">
      <p>Modal Content</p>
    </div>
  </div>
</div>
<div id="centered-modal" class="pui-modal pui-modal--centered pui-modal--closed" tabindex="-1">
  <div class="pui-modal__inner animated slideInUp faster">
    <div class="pui-modal__header">
      <button class="button pui-modal__close" data-modal="centered-modal">Close <i class="pi-times"></i></button>
      Modal
    </div>
    <div class="pui-modal__content">
      <p>Modal Content</p>
    </div>
  </div>
</div>
<div id="large-modal" class="pui-modal pui-modal--large pui-modal--closed" tabindex="-1">
  <div class="pui-modal__inner animated slideInUp faster">
    <div class="pui-modal__header">
      <button class="button pui-modal__close" data-modal="large-modal">Close <i class="pi-times"></i></button>
      Modal
    </div>
    <div class="pui-modal__content">
      <p>Modal Content</p>
    </div>
  </div>
</div>
<div id="full-modal" class="pui-modal pui-modal--full pui-modal--closed" tabindex="-1">
  <div class="pui-modal__inner animated slideInUp faster">
    <div class="pui-modal__header">
      <button class="button pui-modal__close" data-modal="full-modal">Close <i class="pi-times"></i></button>
      Modal
    </div>
    <div class="pui-modal__content">
      <h3>Full Screen Modal</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend convallis quam fermentum sagittis. Curabitur nec ullamcorper nibh, et rhoncus ipsum. Cras quam lacus, gravida id pharetra sit amet, eleifend vel enim. Donec non est ullamcorper tellus aliquam molestie. Morbi vitae nisi velit. Nam tincidunt justo eros, quis posuere quam condimentum ac. Curabitur mi diam, efficitur laoreet iaculis non, volutpat ac ligula. Nullam ut luctus arcu. Donec a turpis mi. Pellentesque fermentum, turpis at bibendum laoreet, lorem lorem tempor lectus, congue viverra nisi dui nec purus. Donec ultricies ut risus sit amet mollis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend convallis quam fermentum sagittis. Curabitur nec ullamcorper nibh, et rhoncus ipsum. Cras quam lacus, gravida id pharetra sit amet, eleifend vel enim. Donec non est ullamcorper tellus aliquam molestie. Morbi vitae nisi velit. Nam tincidunt justo eros, quis posuere quam condimentum ac. Curabitur mi diam, efficitur laoreet iaculis non, volutpat ac ligula. Nullam ut luctus arcu. Donec a turpis mi. Pellentesque fermentum, turpis at bibendum laoreet, lorem lorem tempor lectus, congue viverra nisi dui nec purus. Donec ultricies ut risus sit amet mollis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend convallis quam fermentum sagittis. Curabitur nec ullamcorper nibh, et rhoncus ipsum. Cras quam lacus, gravida id pharetra sit amet, eleifend vel enim. Donec non est ullamcorper tellus aliquam molestie. Morbi vitae nisi velit. Nam tincidunt justo eros, quis posuere quam condimentum ac. Curabitur mi diam, efficitur laoreet iaculis non, volutpat ac ligula. Nullam ut luctus arcu. Donec a turpis mi. Pellentesque fermentum, turpis at bibendum laoreet, lorem lorem tempor lectus, congue viverra nisi dui nec purus. Donec ultricies ut risus sit amet mollis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend convallis quam fermentum sagittis. Curabitur nec ullamcorper nibh, et rhoncus ipsum. Cras quam lacus, gravida id pharetra sit amet, eleifend vel enim. Donec non est ullamcorper tellus aliquam molestie. Morbi vitae nisi velit. Nam tincidunt justo eros, quis posuere quam condimentum ac. Curabitur mi diam, efficitur laoreet iaculis non, volutpat ac ligula. Nullam ut luctus arcu. Donec a turpis mi. Pellentesque fermentum, turpis at bibendum laoreet, lorem lorem tempor lectus, congue viverra nisi dui nec purus. Donec ultricies ut risus sit amet mollis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend convallis quam fermentum sagittis. Curabitur nec ullamcorper nibh, et rhoncus ipsum. Cras quam lacus, gravida id pharetra sit amet, eleifend vel enim. Donec non est ullamcorper tellus aliquam molestie. Morbi vitae nisi velit. Nam tincidunt justo eros, quis posuere quam condimentum ac. Curabitur mi diam, efficitur laoreet iaculis non, volutpat ac ligula. Nullam ut luctus arcu. Donec a turpis mi. Pellentesque fermentum, turpis at bibendum laoreet, lorem lorem tempor lectus, congue viverra nisi dui nec purus. Donec ultricies ut risus sit amet mollis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend convallis quam fermentum sagittis. Curabitur nec ullamcorper nibh, et rhoncus ipsum. Cras quam lacus, gravida id pharetra sit amet, eleifend vel enim. Donec non est ullamcorper tellus aliquam molestie. Morbi vitae nisi velit. Nam tincidunt justo eros, quis posuere quam condimentum ac. Curabitur mi diam, efficitur laoreet iaculis non, volutpat ac ligula. Nullam ut luctus arcu. Donec a turpis mi. Pellentesque fermentum, turpis at bibendum laoreet, lorem lorem tempor lectus, congue viverra nisi dui nec purus. Donec ultricies ut risus sit amet mollis.</p>
    </div>
  </div>
</div>
<div class="block-container mobile-up-1 tablet-up-4 desktop-up-5 blocks px-2 mb-3">
    <div class="block">
        <button class="button button--post button--lg pui-modal__open" data-modal="default-modal">Trigger Modal</button>
    </div>
    <div class="block">
        <button class="button button--post button--lg pui-modal__open" data-modal="small-modal">Small Modal</button>
    </div>
    <div class="block">
        <button class="button button--post button--lg pui-modal__open" data-modal="centered-modal">Centered Modal</button>
    </div>
    <div class="block">
        <button class="button button--post button--lg pui-modal__open" data-modal="large-modal">Large Modal</button>
    </div>
    <div class="block">
        <button class="button button--post button--lg pui-modal__open" data-modal="full-modal">Full Screen Modal</button>
    </div>
</div>

Source: sass/_modal.scss, line 6

Section 3.11 #Components.Pez
Pez

Pez represent square and rectangular rounded labels throughout the platform. A Pez can support color by adding a text or background modifier as do Pills.

Pez were created to handle a specific need in our system for georaphic states. States and Products are used as buttons, so they are here as well.

For accessibility purposes, add aria-label="{state name}".

Pez have 3 states, default, disabled, and pressed

Example:

Markup:

<div class="pez" aria-label="Alaska">
  AK
</div>
<div class="pez disabled" aria-label="Washington DC">
  DC
</div>
<div class="pez pressed" aria-label="Georgia">
  GA
</div>

Source: sass/_pez.scss, line 7

Section 3.11.1 #Components.Pez.CornerLabel
Corner label

Pez can also have corner labels. These were designed to be used with the platform icon pi-check.

Example:

Markup:

<button class="pez" aria-label="Alaska">
  AK
  <div class="pez__check-wrapper">
    <i class="pi-check" aria-hidden="true"></i>
  </div>
</button>
<button class="pez disabled" aria-label="Washington DC">
  DC
  <div class="pez__check-wrapper">
    <i class="pi-check" aria-hidden="true"></i>
  </div>
</button>
<button class="pez pressed" aria-label="Georgia">
  GA
  <div class="pez__check-wrapper">
    <i class="pi-check" aria-hidden="true"></i>
  </div>
</button>

Source: sass/_pez.scss, line 31

Section 3.12 #Components.Pill
Pill

Pills represent rounded labels throughout the platform. A pill can support color by adding a text or background modifier.

Pills have no hover state.

Source: sass/_pills.scss, line 8

Section 3.12.1 #Components.Pill.Circle
Circle

Pills can be circular. Sizes above dot, can have content. They come in 5 sizes, dot, empty, pill--circle (default), pill--circle-medium, pill--circle-large

Example:

Markup:

<div class="pill pill--circle-empty-dot negative"></div>
<div class="pill pill--circle-empty-dot positive"></div>
<div class="pill pill--circle-empty negative"></div>
<div class="pill pill--circle-empty positive"></div>
<div class="pill pill--circle">
  33
</div>
<div class="pill pill--circle text-white background-salmon">
  33
</div>
<div class="pill pill--circle-medium">
  33
</div>
<div class="pill pill--circle-medium text-white background-salmon">
  33
</div>
<div class="pill pill--circle-large">
  33
</div>
<div class="pill pill--circle-large text-white background-salmon">
  33
</div>

Source: sass/_pills.scss, line 67

Section 3.12.2 #Components.Pill.Close
Close

Example:

Active

Markup:

<div class="pill">
 <div class="pill__close"><i class="pi-times-solid text-salmon"></i></div>
  Active
</div>

Source: sass/_pills.scss, line 57

Section 3.12.3 #Components.Pill.Default
Default

A pill can also have a label of it's own. A slight variation of a pill is a straight circle with a very small amount of content.

Example:

Active

Markup:

<div class="pill">
  Active
</div>
<div class="pill text-white background-navy">
  Active
</div>
<div class="pill text-white background-skyblue">
  Active
</div>
<div class="pill text-white background-salmon">
  Active
</div>

Source: sass/_pills.scss, line 17

Section 3.12.4 #Components.Pill.Split
Split

Example:

Left:

Right

Left:

Right

Left

Middle

Right

Markup:

<div class="pill pill--split">
  <div class="pill__label">Left:</div>
  <div class="pill__content">Right</div>
</div>
<div class="pill pill--split text-white background-peach">
  <div class="pill__label text-brown">Left:</div>
  <div class="pill__content">Right</div>
</div>
<div class="pill pill--split text-white background-navy">
  <div class="pill__content background-salmon">Left</div>
  <div class="pill__content background-olive">Middle</div>
  <div class="pill__content background-skyblue">Right</div>
</div>

Source: sass/_pills.scss, line 38

Section 3.13 #Components.Stats
Stats

Used to display statistics in different situations throughout the platform. There are three sizes, pui-stat--lg, pui-stat--md(default), and pui-stat--sm. pui-stat requires data-stat-label and aria-label attributes.

Example:

Monthly Statistics

4374

Monthly Statistics

New Stats

474

Markup:

<div class="pui-card">
 <div class="pui-card__header">
    <div class="pui-card__group">
     <i class="pi-calendar pui-card__title-icon--large"></i>
     <h2 class="pui-card__title">Stats</h2>
    </div>
    <div class="pui-card__group button-group">
     <button class="button">Add <i class="pi-plus" aria-hidden="hidden"></i></button>
     <button class="button">View All <i class="pi-arrow-right" aria-hidden="hidden"></i></button>
    </div>
 </div>
 <div class="pui-card__content">
     <div class="block-container blocks p-2 tablet-up-3">
         <div class="block flex flex--align-center">
             <div class="text-light">Monthly Statistics</div>
         </div>
         <div class="block">
             <div class="pui-stat pui-stat--lg text-salmon" data-stat-label="Total Stats" aria-label="Total Stats">
                 <span class="pui-stat__number">4374</span>
             </div>
         </div>
         <div class="block">
             <div class="pui-stat pui-stat--lg text-navy" data-stat-label="New Stats" aria-label="New Stats">
                 <span class="pui-stat__number">46</span>
             </div>
         </div>
     </div>
     <hr class="background-lighter" />
     <div class="block-container blocks-py-2 blocks-px-2 tablet-up-3">
         <div class="block flex flex--align-center">
             <div class="text-light">Monthly Statistics</div>
         </div>
         <div class="block">
             <div class="pui-stat pui-stat--md text-salmon" data-stat-label="New Stats" aria-label="New Stats">
                 <span class="pui-stat__number">10</span>
             </div>
         </div>
         <div class="block">
             <div class="pui-stat pui-stat--md text-salmon" data-stat-label="New Stats" aria-label="New Stats">
                 <span class="pui-stat__number">56</span>
             </div>
         </div>
     </div>
     <hr class="background-lighter" />
     <div class="block-container blocks-py-2 blocks-px-2 tablet-up-3">
         <div class="block flex flex--align-center">
             <div class="text-light">New Stats</div>
         </div>
         <div class="block">
             <div class="pui-stat pui-stat--sm text-salmon" data-stat-label="Submitted Stats" aria-label="Submitted Stats">
                 <span class="pui-stat__number">474</span>
             </div>
         </div>
         <div class="block">
             <div class="pui-stat pui-stat--sm text-salmon" data-stat-label="New Stats" aria-label="New Stats">
                 <span class="pui-stat__number">4</span>
             </div>
         </div>
     </div>
   </div>
</div>

Source: sass/_stats.scss, line 5

Section 3.14 #Components.Tabs
Tabs

The content for a tabbed section needs to live inside the .pui-tabs class. The tabs are radio inputs. Be sure to add a specific id to the input and add a for to the label with a value that matches the corresponding input. The label needs the class of pui-tab.

The content for the tabs needs the class of pui-tab-panel and it needs to be directly after the pui-tab label.

The tabs themselves or the .pui-tab have a specific width of 16rem as well as a specific height of 4rem.

Example:

Tab 1

Tab 2

Tab 3

Markup:

<div class="pui-tabs">
  <input type="radio" id="tab-input-a" name="tabs" checked>
  <label for="tab-input-a" class="pui-tab">
    <i class="pi-folder-open" focusable="false" aria-hidden="hidden"></i> Tab 1
  </label>
  <div class="pui-tab-panel">
    <img src="https://placeimg.com/640/480/animals?t=1565635383449" style="max-width: 100%;">
  </div>
  <input type="radio" id="tab-input-b" name="tabs">
  <label for="tab-input-b" class="pui-tab">
    <i class="pi-folder" focusable="false" aria-hidden="hidden"></i> Tab 2
  </label>
  <div class="pui-tab-panel">
    <img src="https://placeimg.com/640/480/animals?t=1565635267224" style="max-width: 100%;">
  </div>
  <input type="radio" id="tab-input-c" name="tabs">
  <label for="tab-input-c" class="pui-tab">
    <i class="pi-users" focusable="false" aria-hidden="hidden"></i> Tab 3
  </label>
  <div class="pui-tab-panel">
    <img src="https://placeimg.com/640/480/animals?t=1565635322782" style="max-width: 100%;">
  </div>
</div>

Source: sass/_tabs.scss, line 9

Section 3.14.1 #Components.Tabs.Flat
Tabs Flat

If you want the borders removed from the tabs, add the class pui-tab--flat to the pui-tab.

Example:

Tab 1

Tab 2

Tab 3

Markup:

<div class="pui-tabs pui-tabs--flat">
  <input type="radio" id="tab-input-2a" name="tabs-2" checked>
  <label for="tab-input-2a" class="pui-tab">
    <i class="pi-folder-open" focusable="false" aria-hidden="hidden"></i> Tab 1
  </label>
  <div class="pui-tab-panel">
    <img src="https://placeimg.com/640/480/animals?t=1565635383449" style="max-width: 100%;">
  </div>
  <input type="radio" id="tab-input-2b" name="tabs-2">
  <label for="tab-input-2b" class="pui-tab">
    <i class="pi-folder" focusable="false" aria-hidden="hidden"></i> Tab 2
  </label>
  <div class="pui-tab-panel">
    <img src="https://placeimg.com/640/480/animals?t=1565635267224" style="max-width: 100%;">
  </div>
  <input type="radio" id="tab-input-2c" name="tabs-2">
  <label for="tab-input-2c" class="pui-tab">
    <i class="pi-users" focusable="false" aria-hidden="hidden"></i> Tab 3
  </label>
  <div class="pui-tab-panel">
    <img src="https://placeimg.com/640/480/animals?t=1565635322782" style="max-width: 100%;">
  </div>
</div>

Source: sass/_tabs.scss, line 49

Section 3.14.2 #Components.Tabs.FlatResponsive
Tabs Flat-Responsive

The flat tabs do not change at lower/higher screen resolutions. You can make the tabs respond, however, by adding the class responsive to pui-tabs pui-tabs--flat. This will make the tabs stack at the mobile breakpoint and go back to the flat tab look above mobile.

Example:

Tab 1

Tab 2

Tab 3

Markup:

<div class="pui-tabs pui-tabs--flat responsive">
  <input type="radio" id="tab-input-ar" name="tabs-r" checked>
  <label for="tab-input-ar" class="pui-tab">
    <i class="pi-folder-open" focusable="false" aria-hidden="hidden"></i> Tab 1
  </label>
  <div class="pui-tab-panel">
    <img src="https://placeimg.com/640/480/animals?t=1565635383449" style="max-width: 100%;">
  </div>
  <input type="radio" id="tab-input-br" name="tabs-r">
  <label for="tab-input-br" class="pui-tab">
    <i class="pi-folder" focusable="false" aria-hidden="hidden"></i> Tab 2
  </label>
  <div class="pui-tab-panel">
    <img src="https://placeimg.com/640/480/animals?t=1565635267224" style="max-width: 100%;">
  </div>
  <input type="radio" id="tab-input-cr" name="tabs-r">
  <label for="tab-input-cr" class="pui-tab">
    <i class="pi-users" focusable="false" aria-hidden="hidden"></i> Tab 3
  </label>
  <div class="pui-tab-panel">
    <img src="https://placeimg.com/640/480/animals?t=1565635322782" style="max-width: 100%;">
  </div>
</div>

Source: sass/_tabs.scss, line 81

Section 3.15 #Components.Tooltip
Tooltip

Add your tooltip text to a data-pui-tooltip attribute on any item you want a tooltip.

To specify the placement of your tooltip, add a tooltip-{direction} class. Directions include, top, left, bottom, right.

Adding the class tooltip-inline will add a dashed underline to identify the tooltip. See example below.

We use a font icon for our tooltip, but we don't want the hover to take place on the icon. Be sure to add the tooltip data attribute to the <div> wrapper instead. Place any color changes, whether they be a hover or not, on the <div> as well. This will ensure that our tooltip text does not render a different font due to the icon having the font-awesome font style.

If you want a tooltip to be mobile friendly, add the class tooltip-mobile. This will ensure that the tooltip, when fired, will be centered in the middle of the page. This will happen within the mobile breakpopint. In platform UI's case, below 768px.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mi nunc, egestas id consectetur a, consectetur a lorem. Maecenas interdum enim felis, eget fringilla massa rhoncus sed.

Mobile tooltip.

Markup:

<div class="block-container pb-3 flex flex--justify-between">
  <div class="tooltip-right" data-pui-tooltip="This is a right facing tooltip.">right</div>
  <div class="tooltip-bottom" data-pui-tooltip="This is a bottom facing tooltip.">bottom</div>
  <div class="tooltip-top" data-pui-tooltip="This is a top facing tooltip.">top</div>
  <div class="tooltip-left" data-pui-tooltip="This is a left facing tooltip.">left</div>
</div>
<div class="block-container pb-3">
  <p>Lorem ipsum dolor sit amet, <span data-pui-tooltip="This is a default tooltip with data-inline." class="tooltip-inline">consectetur</span> adipiscing elit. Maecenas mi nunc, egestas id consectetur a, consectetur a lorem. Maecenas interdum enim felis, eget fringilla massa rhoncus sed.
</div>
<div class="block-container pb-3">
  <div class="tooltip-right" data-pui-tooltip="Not a true help tooltip.">
    <i class="pi-help-solid" focusable="false" aria-hidden="true"></i>
  </div>
</div>
<p>Mobile tooltip.</p>
<div class="block-container pb-3">
  <div class="tooltip-right tooltip-mobile" data-pui-tooltip="This tooltip is centered on a mobile screen.">
    <i class="pi-help-solid" focusable="false" aria-hidden="true"></i>
  </div>
</div>
<div class="tooltip-right" data-pui-tooltip="This is what our tooltips look like.">Tooltip</div>

Source: sass/_tooltip.scss, line 5