3 UI Components
Buttons, sliders, tabs, etc.
3.1 Buttons link
b-button provides a very clean looking standard button class.
The buttons support automagic styling of icons from the Material Icons Library.
Usage
<!-- #fullwidth -->
<div class="b-page-section">
<div class="row">
<a href="#" class="b-button">Text</a>
<a href="#" class="b-button m-purple">Text <i class="material-icons">arrow_forward</i></a>
<a href="#" class="b-button m-teal">Learn More<i class="material-icons">add</i></a>
<a href="#" class="b-button m-orange">Send<i class="material-icons">send</i></a>
<a href="#" class="b-button m-blue">Confirm<i class="material-icons">check</i></a>
<a href="#" class="b-button m-black">Delete<i class="material-icons">close</i></a>
<a href="#" class="b-button m-icon-only m-black"><i class="material-icons">close</i></a>
</div>
</div>
<div class="b-page-section m-black">
<div class="row">
<a href="#" class="b-button">Text</a>
<a href="#" class="b-button m-purple">Text <i class="material-icons">arrow_forward</i></a>
<a href="#" class="b-button m-teal">Learn More<i class="material-icons">add</i></a>
<a href="#" class="b-button m-orange">Send<i class="material-icons">send</i></a>
<a href="#" class="b-button m-blue">Confirm<i class="material-icons">check</i></a>
<a href="#" class="b-button m-black">Delete<i class="material-icons">close</i></a>
<a href="#" class="b-button m-icon-only m-black"><i class="material-icons">close</i></a>
</div>
</div>
<div class="b-divider m-purple">
<div class="row">
<a href="#" class="b-button m-naked">Naked button <i class="material-icons">arrow_forward</i></a>
</div>
</div>
Show All Modifiers
.m-purple
—
Uses $purple background
.m-teal
—
Uses $teal background
.m-orange
—
Uses $orange background
.m-blue
—
Uses $blue background
.m-black
—
Uses $black background
.m-icon-only
—
For buttons without any text, can be used with any color modifier
.m-naked
—
Transparent style, will blend in with background of parent element
.m-disabled
—
Will disable button so there is no click action
3.2 Modal link
A modal can be used to provide a temporary alert or warn the user about performing a certain action. The modal has two parts, a button open the modal, and the modal itself. The modal makes use of an overlay element to allow it to be dismissed by clicking outside the modal.
Usage
Open Modal
Title for modal
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo ratione, reprehenderit veniam veritatis voluptatem perferendis nulla? Sint eveniet necessitatibus vel saepe, consequuntur veritatis laborum perspiciatis, reprehenderit, esse rem aut omnis.
Title for modal
Sint eveniet necessitatibus vel saepe, consequuntur veritatis laborum perspiciatis, reprehenderit, esse rem aut omnis.
Title for modal
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo ratione, reprehenderit veniam veritatis voluptatem perferendis nulla?
<!-- button -->
<a class="b-button js-open-modal" href="#">Open Modal</a>
<!-- modal window -->
<div class="b-modal">
<div class="e-content">
<h2>Title for modal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo ratione, reprehenderit veniam veritatis voluptatem perferendis nulla? Sint eveniet necessitatibus vel saepe, consequuntur veritatis laborum perspiciatis, reprehenderit, esse rem aut omnis.</p>
<h3>Title for modal</h3>
<p>Sint eveniet necessitatibus vel saepe, consequuntur veritatis laborum perspiciatis, reprehenderit, esse rem aut omnis.</p>
<h4>Title for modal</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo ratione, reprehenderit veniam veritatis voluptatem perferendis nulla?</p>
<p><a class="b-button js-close-modal" href="#">OK</a></p>
</div>
</div>
Show All Modifiers
.js-open-modal
—
Add this class to the trigger element to open the modal
.js-close-modal
—
Add this class to the trigger element to close the modal
3.3 Search link
Search component. Has js associated with it that allow it to search a site, or WP for example. Also makes use of the overlay element.
Usage
<form class="b-search" action="">
<input class="js-search-value" type="text">
<input class="js-search-submit js-search-trigger e-search-trigger material-icons" type="submit" value="search">
</form>
Show All Modifiers
.m-negative
—
negative color scheme for dark backgrounds
.m-fixed
—
fixed position
3.4 Divider link
Dividers can be used to separate page sections and other page-level content. Supports multiple colors.
Usage
Section of the page with info about cool things.
This is a divider with a big text
Smaller title with more characteres and working as a tagline
This is the base divider, with h1 and h2 together, and center aligned.
This is a divider with a big text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt itaque dolor ratione aspernatur nulla nemo, minima sit debitis at vel tenetur qui quod, aliquid suscipit atque, odit ipsam, commodi error!
This is a demonstration of the modifiers for background-color. You should use the .m-blue class to get this effect
<!-- #fullwidth -->
<div class="b-page-section">
<div class="row">
<div class="column small-12">
<p>Section of the page with info about cool things.</p>
</div>
</div>
</div>
<div class="b-divider">
<h1>This is a divider with a big text</h1>
<h2>Smaller title with more characteres and working as a tagline</h2>
</div>
<div class="b-page-section">
<div class="row">
<div class="column small-12">
<p>This is the base divider, with <code>h1</code> and <code>h2</code> together, and center aligned.</p>
</div>
</div>
</div>
<div class="b-divider">
<div class="row">
<div class="column small-12">
<h2>This is a divider with a big text</h2>
</div>
</div>
</div>
<div class="b-page-section">
<div class="row">
<div class="column small-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt itaque dolor ratione aspernatur nulla nemo, minima sit debitis at vel tenetur qui quod, aliquid suscipit atque, odit ipsam, commodi error!</p>
</div>
</div>
</div>
<div class="b-divider m-blue">
<div class="row">
<div class="column small-12">
<p>This is a demonstration of the modifiers for background-color. You should use the <strong>.m-blue</strong> class to get this effect</p>
</div>
</div>
</div>
Show All Modifiers
.m-blue
—
$blue background
.m-purple
—
$purple background
.m-teal
—
$teal background
.m-orange
—
$orange background
.m-purple-40k
—
$purple-40k background
.m-blue-20k
—
$blue-20k background
.m-gray-20
—
$gray-20 background
.m-gray-30
—
$gray-30 background
.m-gray-40
—
$gray-40 background
.m-gray-50
—
$gray-50 background
.m-gray-60
—
$gray-60 background
.m-gray-70
—
$gray-70 background
.m-gray-80
—
$gray-80 background
.m-gray-90
—
$gray-90 background
.m-black
—
$black background
.m-purple-20k
—
$purple-20k background
.m-orange-20k
—
$orange-20k background
.m-teal-20k
—
$teal-20k background
.m-blue-20k
—
$blue-20k background
.m-red
—
$red background
.m-green
—
$green background
3.5 Slide link
Slides can be used to display information about a specific topic; for example, a project or article.
Usage
<!-- #fullwidth -->
<section id="slide-id" class="b-slide">
<header>
<h4>Featured Project</h4>
</header>
<div class="row e-content">
<div class="medium-6 column">
<h2 class="e-project-name">Project Title</h2>
<h3 class="e-question">Lorem ipsum dolor sit amet, consectetur adipisicing elit, enim adipisci dicta.</h3>
</div>
<div class="medium-6 column">
<p>Project description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
<p>Project description Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
</div>
</div>
<div class="row e-content">
<div class="medium-6 column">
<div class="e-action">
<a class="b-button m-naked" href="./projects.html">All Projects<i class="material-icons">arrow_forward</i></a>
</div>
</div>
<div class="medium-6 column">
<div class="e-action">
<a class="b-button m-naked" href="#">Find out more<i class="material-icons">arrow_forward</i></a>
</div>
</div>
</div>
</section>
Show All Modifiers
.m-purple
—
$purple background
.m-blue
—
$blue background
.m-orange
—
$orange background
.m-teal
—
$teal background
3.6 Slider link
Multiple Sildes can be linked together using a Silder. We use Slick behind the scenes to make the slider work. Below is the configuration we use. Also check out the Slick Docs
$('.b-slider').slick({
arrows: true,
draggable: false,
swipeToSlide: true,
autoplay: true,
autoplaySpeed: 3000,
responsive: [
{
breakpoint: 800,
settings: {
draggable: true,
}
}
]
});
Usage
<!-- #fullwidth -->
<div class="b-slider slick">
<section id="slide-id" class="b-slide m-purple">
<header>
<h4>Featured Project</h4>
</header>
<div class="row e-content">
<div class="column medium-6">
<h2 class="e-project-name">Project Title</h2>
<h3 class="e-question">Lorem ipsum dolor sit amet, consectetur adipisicing elit, enim adipisci dicta.</h3>
</div>
<div class="column medium-6">
<p>Project description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
<p>Project description Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
</div>
</div>
<div class="row e-content">
<div class="column medium-6">
<div class="e-action">
<a class="b-button m-naked" href="./projects.html">All Projects<i class="material-icons">arrow_forward</i></a>
</div>
</div>
<div class="column medium-6">
<div class="e-action">
<a class="b-button m-naked" href="#">Find out more<i class="material-icons">arrow_forward</i></a>
</div>
</div>
</div>
</section>
<section id="slide-id" class="b-slide">
<header>
<h4>Featured Project</h4>
</header>
<div class="row e-content">
<div class="column medium-6">
<h2 class="e-project-name">Project Title</h2>
<h3 class="e-question">Lorem ipsum dolor sit amet, consectetur adipisicing elit, enim adipisci dicta.</h3>
</div>
<div class="column medium-6">
<p>Project description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
<p>Project description Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
</div>
</div>
<div class="row e-content">
<div class="column medium-6">
<div class="e-action">
<a class="b-button m-naked" href="./projects.html">All Projects<i class="material-icons">arrow_forward</i></a>
</div>
</div>
<div class="column medium-6">
<div class="e-action">
<a class="b-button m-naked" href="#">Find out more<i class="material-icons">arrow_forward</i></a>
</div>
</div>
</div>
</section>
<section id="slide-id" class="b-slide m-teal">
<header>
<h4>From Our Blog</h4>
</header>
<div class="row e-content">
<div class="column medium-6">
<h2>Bloc title Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<h3><strong>By: </strong>Claudio Mendonca</h3>
</div>
<div class="column medium-6">
<p>Project description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
<p>Project description Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
</div>
</div>
<div class="row e-content">
<div class="column medium-6">
<div class="e-action">
<a class="b-button m-naked" href="./projects.html">All Projects<i class="material-icons">arrow_forward</i></a>
</div>
</div>
<div class="column medium-6">
<div class="e-action">
<a class="b-button m-naked" href="#">Find out more<i class="material-icons">arrow_forward</i></a>
</div>
</div>
</div>
</section>
<section id="slide-id" class="b-slide m-orange">
<header>
<h4>Featured Project</h4>
</header>
<div class="row e-content">
<div class="column medium-6">
<h2 class="e-project-name">Project Title</h2>
<h3 class="e-question">Lorem ipsum dolor sit amet, consectetur adipisicing elit, enim adipisci dicta.</h3>
</div>
<div class="column medium-6">
<p>Project description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
<p>Project description Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
</div>
</div>
<div class="row e-content">
<div class="column medium-6">
<div class="e-action">
<a class="b-button m-naked" href="./projects.html">All Projects<i class="material-icons">arrow_forward</i></a>
</div>
</div>
<div class="column medium-6">
<div class="e-action">
<a class="b-button m-naked" href="#">Find out more<i class="material-icons">arrow_forward</i></a>
</div>
</div>
</div>
</section>
<section id="slide-id" class="b-slide m-blue">
<header>
<h4>Featured Project</h4>
</header>
<div class="row e-content">
<div class="column medium-6">
<h2 class="e-project-name">Project Title</h2>
<h3 class="e-question">Lorem ipsum dolor sit amet, consectetur adipisicing elit, enim adipisci dicta.</h3>
</div>
<div class="column medium-6">
<p>Project description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
<p>Project description Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
</div>
</div>
<div class="row e-content">
<div class="column medium-6">
<div class="e-action">
<a class="b-button m-naked" href="./projects.html">All Projects<i class="material-icons">arrow_forward</i></a>
</div>
</div>
<div class="column medium-6">
<div class="e-action">
<a class="b-button m-naked" href="#">Find out more<i class="material-icons">arrow_forward</i></a>
</div>
</div>
</div>
</section>
</div>
Show All Modifiers
.m-purple
—
$purple background
.m-blue
—
$blue background
.m-orange
—
$orange background
.m-teal
—
$teal background
.m-gray-25
—
$gray-25 background
.m-gray-10
—
$gray-10 background
.m-gray-15
—
$gray-15 background
.m-gray-20
—
$gray-20 background
.m-gray-30
—
$gray-30 background
.m-gray-40
—
$gray-40 background
.m-gray-50
—
$gray-50 background
.m-gray-60
—
$gray-60 background
.m-gray-70
—
$gray-70 background
.m-gray-80
—
$gray-80 background
.m-gray-90
—
$gray-90 background
.m-black
—
$black background
.m-purple-20k
—
$purple-20k background
.m-purple-40k
—
$purple-40k background
.m-orange-20k
—
$orange-20k background
.m-teal-20k
—
$teal-20k background
.m-blue-20k
—
$blue-20k background
.m-red
—
$red background
.m-green
—
$green background
3.7 Cards link
Card component for organizing data. Works well with articles / documents, etc.
Usage
Unreleased Project
Project Description
<div class="b-page-section">
<div class="row">
<div class="e-card m-blue">
<a href="#">
<div class="e-card-inner">
<!-- uncomment to add a background image to the card -->
<!-- <div class="e-card-image" style="background-image: url('')"></div> -->
<p class="e-card-name">Project Name</p>
<p class="e-card-description">Project Description</p>
</div>
</a>
</div>
<div class="e-card m-orange">
<a href="#">
<div class="e-card-inner">
<p class="e-card-name">Project Name</p>
<p class="e-card-description">Project Description</p>
</div>
</a>
</div>
<div class="e-card m-unreleased">
<div class="e-card-inner">
<p class="e-card-name">Unreleased Project</p>
<p class="e-card-description">Project Description</p>
</div>
</div>
</div>
</div>