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 accordion. These accordions are also keyboard accessible.

Platform UI accordions were designed to be stacked.

Example:

This is the accordion content.

Markup:

<div class="accordion">
   <a href="#" class="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 accordion__icon text-med-blue"></i>
   </a>
   <div class="accordion__content px-3 py-3">
     <p>This is the accordion content.</p>
   </div>
 </div>
<div class="accordion">
   <a href="#" class="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 accordion__icon text-med-blue"></i>
   </a>
   <div class="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="accordion active">
   <a href="#" class="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 accordion__icon text-med-blue"></i>
   </a>
   <div class="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="accordion active">
   <a href="#" class="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 accordion__icon text-med-blue"></i>
   </a>
  <div class="accordion__content">
    <div class="px-3 py-3">
      <p>This is the accordion content.</p>
    </div>
    <div class="accordion">
      <a href="#" class="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 accordion__icon text-med-blue"></i>
      </a>
      <div class="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.Blockquote
Blockquote

Our blockquotes are similar to the browser default. We added a left border, which is a light gray by default. To attribute someone in the blockquote, you can do so by adding a <footer> followed by their name. If you're referencing a specific creative work, be sure to include that inside a <cite>. See the examples below.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Anger is an acid that can do more harm to the vessel in which it is stored than to anything on which it is poured.

—Mark Twain

Perhaps as you went along you did learn something. I did not care what it was all about. All I wanted to know was how to live in it. Maybe if you found out how to live in it you learned from that what it was all about.

—Ernest Hemingway, The Sun Also Rises

Markup:

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</p>
<blockquote>
    <p>Anger is an acid that can do more harm to the vessel in which it is stored than to anything on which it is poured.</p>
    <footer>—Mark Twain</footer>
</blockquote>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</p>
<blockquote cite="https://www.goodreads.com/quotes/tag/american-literature">
    <p>Perhaps as you went along you did learn something. I did not care what it was all about. All I wanted to know was how to live in it. Maybe if you found out how to live in it you learned from that what it was all about.</p>
    <footer>—Ernest Hemingway, <cite>The Sun Also Rises</cite></footer>
</blockquote>

Source: sass/_blockquote.scss, line 10

Section 3.2.1 #Components.Blockquote.Colors
Blockquote Colors

As previously mentioned, the default color of the left border is light gray, but you can change it if you like. You can change the color of the border by using a border utility. For example, adding the class border--color-navy, to the blockquote, will change the border to navy. Learn more about border utilities. You can view our list of colors available greyscale, brand colors, and secondary colors maps.

Example:

Anger is an acid that can do more harm to the vessel in which it is stored than to anything on which it is poured.

—Mark Twain

Beauty lies in the eyes of the beholder.

—Plato

Tell me and I forget. Teach me and I remember. Involve me and I learn.

—Benjamin Franklin

Markup:

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</p>
<blockquote class="border--color-navy">
    <p>Anger is an acid that can do more harm to the vessel in which it is stored than to anything on which it is poured.</p>
    <footer>—Mark Twain</footer>
</blockquote>
<blockquote class="border--color-dark">
    <p>Beauty lies in the eyes of the beholder.</p>
    <footer>—Plato</footer>
</blockquote>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</p>
<blockquote class="border--color-orange">
    <p>Tell me and I forget. Teach me and I remember. Involve me and I learn.</p>
    <footer>—Benjamin Franklin</footer>
</blockquote>

Source: sass/_blockquote.scss, line 35

Section 3.3 #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 10

Section 3.3.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 112

Section 3.3.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 132

Section 3.3.3 #Components.Button.Colors
Colors

You can make colored buttons using colors from the brand-colors and grayscale maps. So button button--navy will set the navy background color to the button.

The hover on the buttons will either darken, or lighten, based on the lightness of the background color applied to the button. Checkout the example below and you'll see that the darker buttons, like Navy and Black, will lighten on hover. Whereas buttons like Skyblue, Light Blue, and Beige, will darken on hover.

To ensure the proper color contrast is set on the buttons for accessibility, we check the lightness of the background color. Based on the value that is returned, the text will either be white, or one of the other grayscale colors.

NOTE: You can still add a text color utility class like text-salmon to any button you'd like and it will still work.

Markup:

<button class="button button--navy">Navy</button>
<button class="button button--skyblue">Skyblue</button>
<button class="button button--lightblue">Light Blue</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>
<button class="button button--white">White</button>
<button class="button button--lighter">Lighter</button>
<button class="button button--light-mid">Light Mid</button>
<button class="button button--light">Light</button>
<button class="button button--base">Base</button>
<button class="button button--dark">Dark</button>
<button class="button button--black">Black</button>

Secondary Button Colors

The secondary buttons will also work with background colors applied.

The hover state is based on the applied background color just like the standard background buttons. Notice, some of the buttons below have text displayed on hover.

Markup:

<button class="button button--secondary"><i class="pi-download"></i></button>
<button class="button button--secondary button--navy" data-button-text="Download"><i class="pi-download"></i></button>
<button class="button button--secondary button--skyblue has-text" data-button-text="Has Text"><i class="pi-download"></i></button>
<button class="button button--secondary button--lightblue"><i class="pi-download"></i></button>
<button class="button button--secondary button--med-blue"><i class="pi-download"></i></button>
<button class="button button--secondary button--beige"><i class="pi-download"></i></button>
<button class="button button--secondary button--peach"><i class="pi-download"></i></button>
<button class="button button--secondary button--salmon"><i class="pi-download"></i></button>
<button class="button button--secondary button--brown" data-button-text="Download"><i class="pi-download"></i></button>
<button class="button button--secondary button--orange"><i class="pi-download"></i></button>
<button class="button button--secondary button--white"><i class="pi-download"></i></button>
<button class="button button--secondary button--lighter"><i class="pi-download"></i></button>
<button class="button button--secondary button--light-mid"><i class="pi-download"></i></button>
<button class="button button--secondary button--light"><i class="pi-download"></i></button>
<button class="button button--secondary button--base"><i class="pi-download"></i></button>
<button class="button button--secondary button--dark"><i class="pi-download"></i></button>
<button class="button button--secondary button--black"><i class="pi-download"></i></button>

Ghost Buttons

Ghost buttons can be used by applying button--ghost to a button class. You set the color of the text and border by adding a button--{color} class. This will set the color and border-color using the color from the class.

When you hover over one of the buttons, it becomes inverted. The background color will change too that of the color used in the color class, and the text color will change to either white, or a darker color, based on the contrast of the background color.

Markup:

<button class="button button--ghost">Ghost</button>
<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>
<button class="button button--ghost button--white">White</button>
<button class="button button--ghost button--lighter">Lighter</button>
<button class="button button--ghost button--light-mid">Light Mid</button>
<button class="button button--ghost button--light">Light</button>
<button class="button button--ghost button--base">Base</button>
<button class="button button--ghost button--dark">Dark</button>
<button class="button button--ghost button--black">Black</button>

If none of these options work for you, buttons can be customized by using background, text, and hover (grouped with the background and text color documentation) utilities. See some examples below.

Example:

Markup:

<div class="button-group mb-4 p-2">
  <button class="button background-lightblue background-skyblue--hover text-navy text-white--hover border--color-med-blue">Blue</button>
  <button class="button background-skyblue background-navy--hover text-navy text-white--hover border--color-navy">Blue</button>
  <button class="button background-beige background-brown--hover text-brown text-white--hover border--color-brown">Brown</button>
  <button class="button background-lighter background-orange--hover text-black border--color-orange">Orange</button>
  <button class="button background-light-mid background-dark--hover text-dark text-white--hover border--color-dark">Dark Grey</button>
</div>

Source: sass/_buttons.scss, line 185

Section 3.3.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 150

Section 3.3.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 65

Section 3.3.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 80

Section 3.3.7 #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 29

Section 3.3.8 #Components.Button.Post
Post

NOTE: This button style is deprecated as of v1.2.2. To see how to recreate this look using utility classes, see the example below.

Used in CTA scenarios

Example:

Markup:

<button class="button button--secondary has-text">Post Button</button>
<button class="button button--secondary has-text button--lg px-3 py-2 h-auto">Large Post Button</button>

Source: sass/_buttons.scss, line 476

Section 3.3.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 would 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.

You can use has-text in combination with data-button-text="Some Text" and you will get the same result. See the last button in the example below.

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>
  <button class="button button--secondary has-text" data-button-text="Has Text"><i class="pi-download"></i></button>
</div>

Source: sass/_buttons.scss, line 42

Section 3.4 #Components.Cards
Cards

Cards can be great for seperating blocks of content. A 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 card size.

Example:

This is a card.

Markup:

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

Source: sass/_cards.scss, line 8

Section 3.4.1 #Components.Cards.Headers
Headers

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

Example:

Card content.

Markup:

<div class="block-container">
  <div class="block block-4">
    <div class="card">
      <div class="card__header">
        <div class="card__group">
          <i class="pi-quill"></i>
          <div class="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.4.2 #Components.Cards.ImageCard
Image Card

Images can be placed at the top of cards. The <img> element gets the class 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. If you're using cards inside a block layout, adding the cards class to the block-container will give the cards inside equal height.

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 cards blocks p-3 mb-3 tablet-up-4">
<div class="block">
<div class="card rounded-3">
    <img class="card__image background-lightblue p-3" src="site-assets/images/svg/course-1.svg" alt="" />
    <div class="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="card">
    <img class="card__image background-lightblue p-3" src="site-assets/images/svg/course-1.svg" alt="" />
    <div class="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="card rounded-3">
    <img class="card__image" src="https://i.picsum.photos/id/1061/600/400.jpg" alt="" />
    <div class="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="card">
    <img class="card__image" src="https://i.picsum.photos/id/1061/600/400.jpg" alt="" />
    <div class="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.4.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 card__content--scroll to the 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="card flex flex--column flex--justify-between">
        <div class="card__header">
            <div class="card__group">
                <div class="card__title card__title--normal">Card Header</div>
            </div>
            <div class="card__header-actions"><a role="button" aria-label="remove"
                    class="card-action text-light"><i class="pi-trash" aria-hidden="true"></i></a>
                <a role="button" aria-label="edit" class="card-action text-light"><i class="pi-edit"
                        aria-hidden="true"></i></a></div>
        </div>
        <div class="card__content">
            <p>Card content.</p>
        </div>
        <div class="card__footer 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="card flex flex--column flex--justify-between">
        <div class="card__header">
            <div class="card__group">
                <h2 class="card__title card__title--normal">Testing stuff</h2>
            </div>
            <div class="card__header-actions"><a role="button" aria-label="remove"
                    class="card-action text-light"><i class="pi-trash" aria-hidden="true"></i></a>
                <a role="button" aria-label="edit" class="card-action text-light"><i class="pi-edit"
                        aria-hidden="true"></i></a></div>
        </div>
        <div class="card__content 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="card__footer 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="card flex flex--column flex--justify-between">
        <div class="card__header">
            <div class="card__group">
                <h2 class="card__title card__title--normal">Call Carol</h2>
            </div>
            <div class="card__header-actions"><a role="button" aria-label="remove"
                    class="card-action text-light"><i class="pi-trash" aria-hidden="true"></i></a>
                <a role="button" aria-label="edit" class="card-action text-light"><i class="pi-edit"
                        aria-hidden="true"></i></a></div>
        </div>
        <div class="card__content">
            <p>Carol from accounting need to get some updates.</p>
        </div>
        <div class="card__footer 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.5 #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 drawer 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 drawer--closed to show or hide the drawer.

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

If you want a smaller drawer you can add the class 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 drawer__open mr-2" data-drawer="default">Toggle default drawer</button>
  <button class="button button--post button--lg drawer__open" data-drawer="single-row">Toggle single row drawer</button>
</div>
<div id="default" class="drawer drawer-bottom drawer--closed animated slideInUp fastest">
  <div class="drawer__inner animated slideInUp fastest">
    <div class="drawer__header">
      <button class="button drawer__close" data-drawer="default">Close <i class="pi-times" aria-hidden="true"></i></button>
      <h3 class="mb-2">Header.</h3>
    </div>
    <div class="drawer__content">
      <p>Content.</p>
    </div>
  </div>
</div>
<div id="single-row" class="drawer drawer-bottom drawer--single-row drawer--closed animated slideInUp fastest">
  <div class="drawer__inner animated slideInUp fastest">
    <div class="drawer__header">
      <button class="button drawer__close" data-drawer="default">Close <i class="pi-times" aria-hidden="true"></i></button>
      <h3 class="mb-2">Small Drawer</h3>
    </div>
    <div class="drawer__content">
      <button class="button 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.5.1 #Components.Drawer.Left
Drawer Left

This Drawer slides in from the left.

Example:

Drawer Left

Markup:

<button class="button button--post button--lg drawer__open" data-drawer="left">Toggle left drawer</button>
<div id="left" class="drawer drawer-left slide-left-enter-active 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 drawer__close" data-drawer="left">Close <i class="pi-times" aria-hidden="true"></i></button>
  </div>
</div>

Source: sass/_drawer.scss, line 73

Section 3.5.2 #Components.Drawer.Right
Drawer Right

This Drawer slides in from the right.

Example:

Drawer Right

Markup:

<button class="button button--post button--lg drawer__open" data-drawer="right">Toggle right drawer</button>
<div id="right" class="drawer drawer-right slide-right-enter-active 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 drawer__close" data-drawer="right">Close <i class="pi-times" aria-hidden="true"></i></button>
  </div>
</div>

Source: sass/_drawer.scss, line 53

Section 3.6 #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.7 #Components.ImageRound
Image Round

Circular pills can also have images.

Example:

Markup:

<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.8 #Components.info
Info Box

Click the button to toggle the info box.

If you need an info box on the left side of the window, you may want to add the modifier class of info-box--left to your info-box, to ensure that the content doesn't open outside of the viewport.

Example:

Text Link - Left info box

Markup:

<div class="block-container blocks tablet-up-6">
<div class="block">
<div class="info-box" style="width: 32px">
  <button class="button button--secondary toggle-hidden" role="button" aria-label="Toggle">
    <i class="pi-filter" aria-hidden="hidden"></i>
  </button>
  <div class="info-box__content hidden">
    <button class="button info-box__close">
      Close <i class="pi-times" aria-hidden="hidden"></i>
    </button>
    <form action="" class="block-container block-mb-4 form">
      <label for="dob" class="block 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 form__field">
        <legend>Please Choose</legend>
        <div class="toggle">
          <div class="toggle__content">
            <input class="toggle__input" id="smoking" type="radio" checked name="rate">
            <label for="smoking">This one</label>
          </div>
          <div class="toggle__content">
            <input class="toggle__input" id="non-smoking" type="radio" name="rate">
            <label for="non-smoking">That one</label>
          </div>
        </div>
      </fieldset>
      <fieldset class="block form__field">
        <legend>Also Choose</legend>
        <div class="toggle">
          <div class="toggle__content">
            <input class="toggle__input" id="Single" type="radio" checked name="household">
            <label for="Single">Red Fish</label>
          </div>
          <div class="toggle__content">
            <input class="toggle__input" id="household" type="radio" name="household">
            <label for="household">Blue Fish</label>
          </div>
        </div>
      </fieldset>
      <fieldset class="block 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="form__field form__button-group">
        <button class="button button--post button--lg">Submit</button>
      </div>
    </form>
  </div>
</div>
</div>
<div class="block">
<div class="info-box info-box--left">
  <a href="#" class="toggle-hidden" aria-label="Toggle">Text Link - Left info box</a>
  <div class="info-box__content hidden">
    <button class="button info-box__close">
      Close <i class="pi-times" aria-hidden="hidden"></i>
    </button>
    <form action="" class="block-container block-mb-4 form">
      <label for="dob" class="block 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 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="form__field form__button-group">
        <button class="button button--post button--lg">Submit</button>
      </div>
    </form>
  </div>
</div>
</div>
</div>

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

Section 3.9 #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.

Example:

Dogs
Cats
Birds

First
Second
Third

Markup:

<ul>
  <li>Dogs</li>
  <li>Cats</li>
  <li>Birds</li>
</ul>
<div class="my-3"></div>
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

Source: sass/_lists.scss, line 6

Section 3.9.1 #Components.Lists.RimList
List

Our list is simplified and strips the list-style-type, margin, and padding from the user agent stylesheet.

Example:

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

Markup:

<ul class="list">
  <li>This is a list item.</li>
  <li>This is a list item.</li>
  <li>This is a list item.</li>
</ul>

Source: sass/_lists.scss, line 25

Section 3.9.2 #Components.Lists.Post
Post Lists

NOTE: This list style is deprecated as of v1.1.15. To see how to recreate this look using utility classes, see our example above.

A post-list is a pretty basic list. The margin and padding is removed from the list itself. The post-items which should be added to the lis in the list, have a padding-bottom: 1rem and margin-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.

Source: sass/_lists.scss, line 154

Section 3.9.3 #Components.Lists.ListInline
List - Inline

You can create an inline list by adding the list--inline modifier to list. This adds display: flex to the list rather than adding display: inline to each li inside the list.

Example:

Inline list item.
Inline list item.
Inline list item.

Markup:

<ul class="list list--inline">
  <li>Inline list item.</li>
  <li>Inline list item.</li>
  <li>Inline list item.</li>
</ul>

Source: sass/_lists.scss, line 39

Section 3.9.4 #Components.Lists.ListBordered
List - Bordered

You can have a bordered list by adding the list--bordered modifier. Be sure to add the class list__item to the li. This adds a border-bottom to each li except the last. A padding-bottom: .5rem is added to each li to match the margin-bottom in order to create a cleaner separation from the bottom border.

Example:

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

Markup:

<ul class="list list--bordered">
  <li class="list__item">This is a list item.</li>
  <li class="list__item">This is a list item.</li>
  <li class="list__item">This is a list item.</li>
</ul>

Source: sass/_lists.scss, line 56

Section 3.9.5 #Components.Lists.Breadcrumbs
List - Breadcrumbs

You can use our list classes as well as some other utilities to build yourself a simple breadcrumb trail. In the example below we're using list list--inline to change the direction of the flow for the list items. This removes any user agent styles for margin and padding as well as the list style type. Adding list--inline also gives a margin-right to each li in the list. This can be changed with our spacing utilities. From there, we added an angle right icon to show direction of the breadcrumbs. You can switch this out for any icon you'd like.

Adding aria-label="breadcrumbs" to a nav wrapping the list as well as adding aria-current="page" to the current page will help with accessibility. In an example like breadcrumbs, we thhink it is important to use a list element and to wrap it in a nav. The nav will help direct screen readers. As far as the list, since there is an order to the breadcrumbs you can use an ol but using a ul is just fine too.

Example:

Home /
Blog /
Blog Category /
Blog Post

Markup:

<nav aria-label="breadcrumbs">
  <ol class="list list--inline">
    <li class="flex flex--align-center">
      <a href="#">Home</a> <i class="pi-angle-right ml-2"></i>
    </li>
    <li class="flex flex--align-center">
      <a href="#">Blog</a> <i class="pi-angle-right ml-2"></i>
    </li>
    <li class="flex flex--align-center">
      <a href="#">Blog Category</a> <i class="pi-angle-right ml-2"></i>
    </li>
    <li class="flex flex--align-center">
      <span aria-current="page">Blog Post</span>
    </li>
  </ol>
</nav>
<div class="my-3"></div
<nav aria-label="breadcrumbs">
  <ol class="list list--inline">
    <li class="flex flex--align-center">
      <a href="#">Home</a> <span class="ml-2">/</span>
    </li>
    <li class="flex flex--align-center">
      <a href="#">Blog</a> <span class="ml-2">/</span>
    </li>
    <li class="flex flex--align-center">
      <a href="#">Blog Category</a> <span class="ml-2">/</span>
    </li>
    <li class="flex flex--align-center">
      <span aria-current="page">Blog Post</span>
    </li>
  </ol>
</nav>

Source: sass/_lists.scss, line 74

Section 3.9.6 #Components.Lists.Other
List - Other Examples

Using our utilities, icons, and modifiers, you can create some pretty fancy lists. We think so anyway. Substitute a font-icon for list-style-type.

Example:

Old Post List Example

Checkout Our Blogs

How To
People to meet
Places to go
Things to do

Markup:

<p>Old Post List Example</p>
<p>Checkout Our Blogs<p>
<ul class="list">
  <li class="flex">
    <i class="pi-arrow-solid-right text-salmon mr-3"></i> <p class="border-b border--color-lighter pb-2 mb-0 flex--grow">How To</p>
  </li>
  <li class="flex">
    <i class="pi-arrow-solid-right text-salmon mr-3"></i> <p class="border-b border--color-lighter pb-2 mb-0 flex--grow">People to meet</p>
  </li>
  <li class="flex">
    <i class="pi-arrow-solid-right text-salmon mr-3"></i> <p class="border-b border--color-lighter pb-2 mb-0 flex--grow">Places to go</p>
  </li>
  <li class="flex">
    <i class="pi-arrow-solid-right text-salmon mr-3"></i> <p class="mb-0 flex--grow">Things to do</p>
  </li>
</ul>

Source: sass/_lists.scss, line 127

Section 3.10 #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="message message--error">
  <p>This is an example of a message that fires after an error has occured. </p>
</div>
<div class="message 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="message message--warning">
  <p>This is an example of a message that displays a warning but not necessarily an error.</p>
</div>
<div class="message message--info">
  <p>This is an example of a message that displays some simple information.</p>
</div>
<div class="message 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="message 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="message 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="message 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.11 #Components.modal
Modal

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

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

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

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

You can center a modal in the middle of the window with the modifier 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:

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="modal modal--closed" tabindex="-1">
  <div class="modal__inner animated slideInUp faster">
    <div class="modal__header">
      <button class="button modal__close" data-modal="default-modal">Close <i class="pi-times"></i></button>
      Standard Modal
    </div>
    <div class="modal__content">
      <h3>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="modal modal--small modal--closed" tabindex="-1">
  <div class="modal__inner animated slideInUp faster">
    <div class="modal__header">
      <button class="button modal__close" data-modal="small-modal">Close <i class="pi-times"></i></button>
      Modal
    </div>
    <div class="modal__content">
      <p>Modal Content</p>
    </div>
  </div>
</div>
<div id="centered-modal" class="modal modal--centered modal--closed" tabindex="-1">
  <div class="modal__inner animated slideInUp faster">
    <div class="modal__header">
      <button class="button modal__close" data-modal="centered-modal">Close <i class="pi-times"></i></button>
      Modal
    </div>
    <div class="modal__content">
      <p>Modal Content</p>
    </div>
  </div>
</div>
<div id="large-modal" class="modal modal--large modal--closed" tabindex="-1">
  <div class="modal__inner animated slideInUp faster">
    <div class="modal__header">
      <button class="button modal__close" data-modal="large-modal">Close <i class="pi-times"></i></button>
      Modal
    </div>
    <div class="modal__content">
      <p>Modal Content</p>
    </div>
  </div>
</div>
<div id="full-modal" class="modal modal--full modal--closed" tabindex="-1">
  <div class="modal__inner animated slideInUp faster">
    <div class="modal__header">
      <button class="button modal__close" data-modal="full-modal">Close <i class="pi-times"></i></button>
      Modal
    </div>
    <div class="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 modal__open" data-modal="default-modal">Trigger Modal</button>
    </div>
    <div class="block">
        <button class="button button--post button--lg modal__open" data-modal="small-modal">Small Modal</button>
    </div>
    <div class="block">
        <button class="button button--post button--lg modal__open" data-modal="centered-modal">Centered Modal</button>
    </div>
    <div class="block">
        <button class="button button--post button--lg modal__open" data-modal="large-modal">Large Modal</button>
    </div>
    <div class="block">
        <button class="button button--post button--lg modal__open" data-modal="full-modal">Full Screen Modal</button>
    </div>
</div>

Source: sass/_modal.scss, line 6

Section 3.12 #Components.modaldialog
Dialog Modal

To make a dialog box using the modal, remove modal__header from the modal. The header is typically reserved for a modal title as well as a close button. In the case of most dialogs, the options you choose will close the modal so the header can seem unecessarry. See the code example below.

Example:

Markup:

<div id="dialog" class="modal modal--small modal--centered modal--closed" tabindex="-1">
  <div class="modal__inner animated slideInUp faster">
    <div class="modal__content">
      <p class="text--size-lg text--center">Are you sure you want to select these options?</p>
      <div class="block-container blocks p-3">
        <div class="block flex flex--justify-center">
          <button class="button mx-2 modal__close" data-modal="dialog">
            No
          </button>
          <button aria-label="" class="button button--post mx-2 modal__close" data-modal="dialog">
            Yes
          </button>
        </div>
      </div>
    </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 modal__open" data-modal="dialog">Fire Dialog</button>
    </div>
</div>

Source: sass/_modal.scss, line 108

Section 3.13 #Components.modalmessage
Message Modal

If you would like to add a message to a modal, you can add it after modal__content. If the message is a sibling of modal__content, the message will be the full width of the modal as seen in the example. You can simply use use the message inside modal__content if you would like the message to have the same padding as the rest of of the modal content. If you want the message to be aligned to the bottom of the modal you'll need to remove the margin of the message with a spacer modifier class (my-0, m-0). See the example below.

Note: This look may not be best for the larger modals. It may be better to include the message inside the modal__content container.

Example:

Markup:

<div id="message-modal" class="modal modal--centered modal--closed" tabindex="-1">
  <div class="modal__inner animated slideInUp faster">
    <div class="modal__content">
      <button class="button modal__close pos-abs pin-right pin-top mr-3 mt-3" data-modal="message-modal">Close <i class="pi-times"></i></button>
      <p class="text--size-lg text--center mt-4">Are you sure you want to select these options?</p>
    </div>
    <div class="message message--warning m-0">
      <p>This is an example of a message that displays a warning but not necessarily an error.</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 modal__open" data-modal="message-modal">Fire Message Modal</button>
    </div>
</div>

Source: sass/_modal.scss, line 140

Section 3.14 #Components.Pez
Pez

NOTE: The Pez component is depricated as of Version `1.1.22`

To see how to create Pez in later versions of Platform UI, checkout the examples in the Pills Component section.

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

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.

Look at pills a similar style and inspiration.

Example:

Default Display

Other Examples:

Choose your toppings:

Meat

Pepperoni

Sausage

Ham

Buffalo Chicken

Veggies and Fruit

Onions

Mushrooms

Anchovies

Black Olives

Tomatoes

Peppers

Sun-dried Tomatoes

Tags:

Healthcare

Personal Health

Exercise

Weight Loss

Diet

Healthy Eating

Markup:

<div class="mb-4">
  <p class="mb-1 text--bold">Default Display</p>
  <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>
</div>
<h4 class="text--bold mb-3">Other Examples:</h4>
<div class="block-container blocks cards mb-4 p-2">
  <p class="block block-12 mb-1 mx-2 text-white background-navy text--bold">Choose your toppings:</p>
  <div class="block tablet-up-6">
    <div class="card">
      <p class="mb-1">Meat</p>
      <div class="pez m-1" aria-label="Pepperoni">Pepperoni</div>
      <div class="pez m-1" aria-label="Sausage">Sausage</div>
      <div class="pez m-1 background-olive text-dark border--color-olive" aria-label="Ham">Ham</div>
      <div class="pez m-1" aria-label="Buffalo Chicken">Buffalo Chicken</div>
    </div>
  </div>
  <div class="block tablet-up-6">
    <div class="card">
      <p class="mb-1">Veggies and Fruit</p>
      <div class="pez m-1 background-olive text-dark border--color-olive" aria-label="Onions">Onions</div>
      <div class="pez m-1" aria-label="Mushrooms">Mushrooms</div>
      <div class="pez disabled m-2" aria-label="Anchovies">Anchovies</div>
      <div class="pez m-1 background-olive text-dark border--color-olive" aria-label="Black Olives">Black Olives</div>
      <div class="pez m-1 background-olive text-dark border--color-olive" aria-label="Tomatoes">Tomatoes</div>
      <div class="pez m-1" aria-label="Peppers">Peppers</div>
      <div class="pez m-1" aria-label="Sun-dried Tomatoes">Sun-dried Tomatoes</div>
    </div>
  </div>
</div>
<div class="block-container blocks p-2">
  <div class="block tablet-up-4">
    <p class="text-bold text-navy mb-1 border-b">Tags:</p>
    <div class="pez background-lightblue text-navy px-1 py-1" aria-label="Healthcare">Healthcare</div>
    <div class="pez background-lightblue text-navy px-1 py-1" aria-label="Personal Health">Personal Health</div>
    <div class="pez background-lightblue text-navy px-1 py-1" aria-label="Exercise">Exercise</div>
    <div class="pez background-lightblue text-navy px-1 py-1" aria-label="Weight Loss">Weight Loss</div>
    <div class="pez background-lightblue text-navy px-1 py-1" aria-label="Diet">Diet</div>
    <div class="pez background-lightblue text-navy px-1 py-1" aria-label="Healthy Eating">Healthy Eating</div>
  </div>
</div>

Source: sass/_pez.scss, line 7

Section 3.15 #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.15.1 #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.15.2 #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-positive">Middle</div>
  <div class="pill__content background-skyblue">Right</div>
</div>

Source: sass/_pills.scss, line 40

Section 3.15.3 #Components.Pill.Close
Close

Example:

Active

Markup:

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

Source: sass/_pills.scss, line 61

Section 3.15.4 #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 72

Section 3.15.5 #Components.Pill.Examples
Pill Examples

You can create the depricated Pez example using pills and other utilities.

Example:

Default Display

Other Examples:

Choose your toppings:

Meat

Pepperoni

Sausage

Ham

Buffalo Chicken

Veggies and Fruit

Onions

Mushrooms

Anchovies

Black Olives

Tomatoes

Peppers

Sun-dried Tomatoes

Tags:

Healthcare

Personal Health

Exercise

Weight Loss

Diet

Healthy Eating

Markup:

<div class="mb-4">
  <p class="mb-1 text--bold">Default Display</p>
  <div class="pill m-1 background-light-mid border border--color-light p-2 rounded-1 pointer" aria-label="Alaska">AK</div>
  <div class="pill m-1 background-lighter border border--color-light text-light p-2 rounded-1" aria-label="Washington DC">DC</div>
  <div class="pill m-1 background-skyblue border border--color-med-blue text-navy p-2 rounded-1 pointer" aria-label="Georgia">GA</div>
</div>
<h4 class="text--bold mb-3">Other Examples:</h4>
<div class="block-container blocks cards mb-4 p-2">
  <p class="block block-12 mb-1 mx-2 text-white background-navy text--bold">Choose your toppings:</p>
  <div class="block tablet-up-6">
    <div class="card">
      <p class="mb-1">Meat</p>
      <div class="pill m-1 background-light-mid border border--color-light p-2 rounded-1 pointer" aria-label="Pepperoni">Pepperoni</div>
      <div class="pill m-1 background-light-mid border border--color-light p-2 rounded-1 pointer" aria-label="Sausage">Sausage</div>
      <div class="pill m-1 background-light-mid border border--color-light p-2 rounded-1 pointer background-positive text-dark border--color-positive" aria-label="Ham">Ham</div>
      <div class="pill m-1 background-light-mid border border--color-light p-2 rounded-1 pointer" aria-label="Buffalo Chicken">Buffalo Chicken</div>
    </div>
  </div>
  <div class="block tablet-up-6">
    <div class="card">
      <p class="mb-1">Veggies and Fruit</p>
      <div class="pill m-1 background-light-mid border border--color-light p-2 rounded-1 pointer background-positive text-dark border--color-positive" aria-label="Onions">Onions</div>
      <div class="pill m-1 background-light-mid border border--color-light p-2 rounded-1 pointer" aria-label="Mushrooms">Mushrooms</div>
      <div class="pill m-1 background-lighter border border--color-light text-light p-2 rounded-1" aria-label="Anchovies">Anchovies</div>
      <div class="pill m-1 background-light-mid border border--color-light p-2 rounded-1 pointer background-positive text-dark border--color-positive" aria-label="Black Olives">Black Olives</div>
      <div class="pill m-1 background-light-mid border border--color-light p-2 rounded-1 pointer background-positive text-dark border--color-positive" aria-label="Tomatoes">Tomatoes</div>
      <div class="pill m-1 background-light-mid border border--color-light p-2 rounded-1 pointer" aria-label="Peppers">Peppers</div>
      <div class="pill m-1 background-light-mid border border--color-light p-2 rounded-1 pointer" aria-label="Sun-dried Tomatoes">Sun-dried Tomatoes</div>
    </div>
  </div>
</div>
<div class="block-container blocks p-2">
  <div class="block tablet-up-4">
    <p class="text-bold text-navy mb-1 border-b">Tags:</p>
    <div class="pill m-1 rounded-1 pointer background-lightblue text-navy px-1 py-1" aria-label="Healthcare">Healthcare</div>
    <div class="pill m-1 rounded-1 pointer background-lightblue text-navy px-1 py-1" aria-label="Personal Health">Personal Health</div>
    <div class="pill m-1 rounded-1 pointer background-lightblue text-navy px-1 py-1" aria-label="Exercise">Exercise</div>
    <div class="pill m-1 rounded-1 pointer background-lightblue text-navy px-1 py-1" aria-label="Weight Loss">Weight Loss</div>
    <div class="pill m-1 rounded-1 pointer background-lightblue text-navy px-1 py-1" aria-label="Diet">Diet</div>
    <div class="pill m-1 rounded-1 pointer background-lightblue text-navy px-1 py-1" aria-label="Healthy Eating">Healthy Eating</div>
  </div>
</div>

Source: sass/_pills.scss, line 104

Section 3.16 #Components.Stats
Stats

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

Example:

Monthly Statistics

4374

Monthly Statistics

New Stats

474

Markup:

<div class="card">
 <div class="card__header">
    <div class="card__group">
     <i class="pi-calendar card__title-icon--large"></i>
     <h2 class="card__title">Stats</h2>
    </div>
    <div class="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="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="stat stat--lg text-salmon" data-stat-label="Total Stats" aria-label="Total Stats">
                 <span class="stat__number">4374</span>
             </div>
         </div>
         <div class="block">
             <div class="stat stat--lg text-navy" data-stat-label="New Stats" aria-label="New Stats">
                 <span class="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="stat stat--md text-salmon" data-stat-label="New Stats" aria-label="New Stats">
                 <span class="stat__number">10</span>
             </div>
         </div>
         <div class="block">
             <div class="stat stat--md text-salmon" data-stat-label="New Stats" aria-label="New Stats">
                 <span class="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="stat stat--sm text-salmon" data-stat-label="Submitted Stats" aria-label="Submitted Stats">
                 <span class="stat__number">474</span>
             </div>
         </div>
         <div class="block">
             <div class="stat stat--sm text-salmon" data-stat-label="New Stats" aria-label="New Stats">
                 <span class="stat__number">4</span>
             </div>
         </div>
     </div>
   </div>
</div>

Source: sass/_stats.scss, line 5

Section 3.17 #Components.Tabs
Tabs

Requires JS

The content for a tabbed section needs to live inside the .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 tab.

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

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

Work in progress. At a mobile resolution (below 768px) an active tab will collapse when clicked.

Example:

Tab 1

Tab 2

Tab 3

Markup:

<div class="tabs">
  <input type="radio" id="tab-input-a" name="tabs" checked>
  <label for="tab-input-a" class="tab">
    <i class="pi-folder-open" focusable="false" aria-hidden="hidden"></i> Tab 1
  </label>
  <div class="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="tab">
    <i class="pi-folder" focusable="false" aria-hidden="hidden"></i> Tab 2
  </label>
  <div class="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="tab">
    <i class="pi-users" focusable="false" aria-hidden="hidden"></i> Tab 3
  </label>
  <div class="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.17.1 #Components.Tabs.Flat
Tabs Flat

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

Example:

Tab 1

Tab 2

Tab 3

Markup:

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

Source: sass/_tabs.scss, line 53

Section 3.17.2 #Components.Tabs.FlatResponsive
Tabs Flat Unresponsive

If you want the tabs to keep the flat look at every screen size add the class unresponsive to tabs tabs--flat.

Example:

Tab 1

Tab 2

Tab 3

Markup:

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

Source: sass/_tabs.scss, line 85

Section 3.18 #Components.Tooltip
Tooltip

Add your tooltip text to a data-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-tooltip="This is a right facing tooltip.">right</div>
  <div class="tooltip-bottom" data-tooltip="This is a bottom facing tooltip.">bottom</div>
  <div class="tooltip-top" data-tooltip="This is a top facing tooltip.">top</div>
  <div class="tooltip-left" data-tooltip="This is a left facing tooltip.">left</div>
</div>
<div class="block-container pb-3">
  <p>Lorem ipsum dolor sit amet, <span data-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-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-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-tooltip="This is what our tooltips look like.">Tooltip</div>

Source: sass/_tooltip.scss, line 5