UI Kit Welcome to Oreo
Typography
Header 1The Life of Now UI Kit
Header 2The Life of Now UI Kit
Header 3The Life of Now UI Kit
Header 4The Life of Now UI Kit
Header 5The Life of Now UI Kit
Header 6The Life of Now UI Kit
Paragraph I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
"I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at."
- Noaa
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
Small Tag
Header with small subtitle
Use "small" tag for the headers
Buttons Colors
We worked over the original Bootstrap classes, choosing a different, slightly intenser color pallete:
<button class="btn btn-default">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-info">Info</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-neutral">Neutral</button>
Buttons Sizes
Buttons come in all needed sizes:
<button class="btn btn-primary btn-lg">Large</button> <button class="btn btn-primary">Normal</button> <button class="btn btn-primary btn-sm">Small</button>
Buttons Styles
We added extra classes that can help you better customise the look. You can use regular buttons, rounded corners buttons or plain simple buttons. Let's see some examples:
<button class="btn btn-primary">Default</button> <button class="btn btn-primary btn-round">Round</button> <button class="btn btn-primary btn-round"> <i class="zmdi zmdi-favorite-outline6"></i> With Icon </button> <button class="btn btn-primary btn-icon btn-icon-mini btn-round"> <i class="zmdi zmdi-favorite-outline"></i> </button> <button class="btn btn-primary btn-simple">Simple</button>
Checkboxes
To use the custom checkboxes, you don't need to import any separate Javascript file, just add the below code:
<div class="checkbox"> <input id="checkbox1" type="checkbox"> <label for="checkbox1"> Unchecked </label> </div> <div class="checkbox"> <input id="checkbox2" type="checkbox" checked=""> <label for="checkbox2"> Checked </label> </div> <div class="checkbox"> <input id="checkbox3" type="checkbox" disabled=""> <label for="checkbox3"> Disabled unchecked </label> </div> <div class="checkbox"> <input id="checkbox4" type="checkbox" checked="" disabled=""> <label for="checkbox4"> Disabled checked </label> </div>
Radio Buttons
To use the custom radio buttons, you don't need to import any separate Javascript file, just add the below code:
<div class="radio"> <input type="radio" name="radio1" id="radio1" value="option1"> <label for="radio1"> Radio is off </label> </div> <div class="radio"> <input type="radio" name="radio1" id="radio2" value="option2" checked=""> <label for="radio2"> Radio is on </label> </div> <div class="radio"> <input type="radio" name="radio3" id="radio3" value="option3" disabled=""> <label for="radio3"> Disabled radio is off </label> </div> <div class="radio"> <input type="radio" name="radio4" id="radio4" value="option4" checked="" disabled=""> <label for="radio4"> Disabled radio is on </label> </div>
Inputs
We restyled the Bootstrap input to give it a more flat, minimal look. You can use them with regular labels, states or input groups.
<div class="col-sm-4"> <div class="form-group"> <input type="text" value="" placeholder="Regular" class="form-control"> </div> </div> <div class="col-sm-4"> <div class="form-group has-success"> <input type="text" value="Success" class="form-control form-control-success"> </div> </div> <div class="col-sm-4"> <div class="form-group has-danger"> <input type="email" value="Error Input" class="form-control form-control-danger"> </div> </div> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon"> <i class="zmdi zmdi-account-circle"></i> </span> <input type="text" class="form-control" placeholder="Left Font Awesome Icon"> </div> </div> <div class="col-sm-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="Right Nucleo Icon"> <span class="input-group-addon"> <i class="zmdi zmdi-account"></i> </span> </div> </div>
Textarea
The textarea has a new style, so it looks similar to all other inputs.
<textarea class="form-control" placeholder="Here can be your nice text" rows="5"></textarea>
Nav Pills
We changed the design for the Bootstrap nav pills into something a bit more fresh. We also added more color classes for customisation like
.nav-pills-primary
,
.nav-pills-info
,
.nav-pills-success
,
.nav-pills-warning
,
.nav-pills-danger
<ul class="nav nav-pills nav-pills-primary" role="tablist"> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#active" role="tablist"> <i class="zmdi zmdi-favorite"></i> </a> </li> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#link" role="tablist"> <i class="zmdi zmdi-library"></i> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#link" role="tablist"> <i class="zmdi zmdi-lamp"></i> </a> </li> <li class="nav-item"> <a class="nav-link disabled" data-toggle="tab" href="#disabled" role="tablist"> <i class="zmdi zmdi-lock"></i> </a> </li> </ul>
Pagination
The Bootstrap pagination elements were customised to fit the overall theme. Besides the classic look, we also added the color classes to offer more customisation like
.pagination-info
,
.pagination-success
,
.pagination-warning
,
.pagination-danger
,
.pagination-primary
.
//Pagination simple <ul class="pagination pagination-primary"> <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">4</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">5</a></li> </ul> //Pagination full-width <div class="justify-content-center"> <ul class="pagination pagination-primary"> <li class="page-item arrow-margin-left"> <a class="page-link" href="javascript:void(0);" aria-label="Previous"> <span aria-hidden="true"><i class="zmdi zmdi-chevron-left" aria-hidden="true"></i></span> </a> </li> <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li> <li class="page-item active"><a class="page-link" href="javascript:void(0);">3</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">4</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">5</a></li> <li class="page-item arrow-margin-right"> <a class="page-link" href="javascript:void(0);" aria-label="Next"> <span aria-hidden="true"><i class="zmdi zmdi-chevron-right" aria-hidden="true"></i></span> </a> </li> </ul> </div>
Progress Bars
The progress bars from Bootstrap hold the same classes and functionality. Adding this kit over your existing project will only make it look more clean. The default line is gray, each bar has a specific color but you can add some colors for the background lines using the next classes
.progress-primary
,
.progress-info
,
.progress-success
,
.progress-warning
,
.progress-danger
,
<div class="progress-container"> <span class="progress-badge">Default</span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"> <span class="progress-value">25%</span> </div> </div> </div> <div class="progress-container progress-primary"> <span class="progress-badge">Primary</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="progress-value">60%</span> </div> </div> </div> <div class="progress-container progress-info"> <span class="progress-badge">Info</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="progress-value">60%</span> </div> </div> </div> <div class="progress-container progress-success"> <span class="progress-badge">Success</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="progress-value">60%</span> </div> </div> </div> <div class="progress-container progress-danger"> <span class="progress-badge">Danger</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="progress-value">60%</span> </div> </div> </div> <div class="progress-container progress-warning"> <span class="progress-badge">Warning</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="progress-value">60%</span> </div> </div> </div>
Labels
We restyled the default options for labels and we added the filled class, that can be used in any combination.
Default Primary Success Info Warning Danger<span class="badge badge-default">Default</span> <span class="badge badge-primary">Primary</span> <span class="badge badge-success">Success</span> <span class="badge badge-info">Info</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-danger">Danger</span>
Notifications
The new notifications are looking fresh and clean. They go great with the navbar. For these notifications examples we used the
.container-fluid
class, so they will be fluid, please use the class
.container
when you use them outside of the
.wrapper
so they will be alignd with the general page container
<div class="alert alert-success" role="alert"> <div class="container"> <div class="alert-icon"> <i class="zmdi zmdi-thumb-up"></i> </div> <strong>Well done!</strong> You successfully read this important alert message. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> <i class="zmdi zmdi-close"></i> </span> </button> </div> </div> <div class="alert alert-info" role="alert"> <div class="container"> <div class="alert-icon"> <i class="zmdi zmdi-alert-circle-o"></i> </div> <strong>Heads up!</strong> This alert needs your attention, but it's not super important. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> <i class="zmdi zmdi-close"></i> </span> </button> </div> </div> <div class="alert alert-warning" role="alert"> <div class="container"> <div class="alert-icon"> <i class="zmdi zmdi-notifications"></i> </div> <strong>Warning!</strong> Better check yourself, you're not looking too good. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> <i class="zmdi zmdi-close"></i> </span> </button> </div> </div> <div class="alert alert-danger" role="alert"> <div class="container"> <div class="alert-icon"> <i class="zmdi zmdi-block"></i> </div> <strong>Oh snap!</strong> Change a few things up and try submitting again. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> <i class="zmdi zmdi-close"></i> </span> </button> </div> </div>
Images
Image
Circle Image
Raised
Circle Raised