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 an accordion header.
This is the accordion content.
This is an accordion header.
This is the accordion content.
Markup:
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>
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 an accordion header.
This is the accordion content.
Markup:
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>
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 an accordion header.
This is the accordion content.
This is a nested accordion header.
This is the nested accordion content.
Markup:
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>
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.
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.
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.
Markup:
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>
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:
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.
Beauty lies in the eyes of the beholder.
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.
Tell me and I forget. Teach me and I remember. Involve me and I learn.
Markup:
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>
sass/_blockquote.scss
, line 35
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:
Markup
<div class="block-container">
<div class="block block-4">
<div class="card">
<p>This is a card.</p>
</div>
</div>
</div>
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:
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>
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:
Card Title
Donec malesuada semper risus vitae placerat. Morbi tristique, odio vel hendrerit sollicitudin, massa orci blandit felis, ac vehicula nulla mauris vitae arcu.
Card Title
Donec malesuada semper risus vitae placerat. Morbi tristique, odio vel hendrerit sollicitudin, massa orci blandit felis, ac vehicula nulla mauris vitae arcu.

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

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:
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>
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:
Markup:
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>
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:
Markup:
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>
sass/_drawer.scss
, line 7
Section 3.5.1
#Components.Drawer.Left
Drawer Left
This Drawer slides in from the left.
Example:
Markup:
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>
sass/_drawer.scss
, line 73
Section 3.5.2
#Components.Drawer.Right
Drawer Right
This Drawer slides in from the right.
Example:
Markup:
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>
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:
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>
sass/_figure.scss
, line 1
Section 3.7
#Components.ImageRound
Image Round
Circular pills can also have images.
Example:
Markup:
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>
sass/_images.scss
, line 6
Section 3.8
#Components.info
Info Box
Click the button to toggle the info box.
Example:
Markup:
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>
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 li
s in those lists have margin-bottom: .5rem
.
Example:
- Dogs
- Cats
- Birds
- First
- Second
- Third
Markup:
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>
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:
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>
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-item
s which should be added to the li
s
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
.
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:
Markup
<ul class="list list--inline">
<li>Inline list item.</li>
<li>Inline list item.</li>
<li>Inline list item.</li>
</ul>
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:
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>
sass/_lists.scss
, line 56
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:
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>
sass/_lists.scss
, line 127
Section 3.10
#Components.Messages
Messages
These are examples of global messages or alerts
Example:
Markup:
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>
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:
Markup:
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>
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:
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>
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:
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>
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.
Example:
Default Display
Other Examples:
Choose your toppings:
Meat
Veggies and Fruit
Tags:
Markup:
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>
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.
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:
Markup:
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>
sass/_pills.scss
, line 17
Section 3.15.2
#Components.Pill.Split
Split
Example:
Markup:
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>
sass/_pills.scss
, line 40
Section 3.15.3
#Components.Pill.Close
Close
Example:
Markup:
Markup
<div class="pill">
Active <i class="pi-times-solid text-salmon ml-1 pointer"></i>
</div>
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:
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>
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
Veggies and Fruit
Tags:
Markup:
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>
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:
Stats
Markup:
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>
sass/_stats.scss
, line 5
Section 3.17
#Components.Tabs
Tabs
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:
Markup:
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>
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:
Markup:
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>
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:
Markup:
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>
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:
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>
sass/_tooltip.scss
, line 5