ارجو الانتظار

## UI Kit

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

Quote

> "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."
> - ThemeMakker

Muted Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Primary Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Info Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Success Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Warning Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Danger Text

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:

Unchecked
Checked
Disabled unchecked
Disabled checked

    <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:

Radio is off
Radio is on
Disabled radio is off
Disabled radio is on

    <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.

    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
    <input class="form-control" type="text" placeholder="Default input">
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

First name
Looks good!
Last name
Looks good!
Username
@
Please choose a username.
City
Please provide a valid city.
State
Please provide a valid state.
Zip
Please provide a valid zip.

## 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`.

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

We build two classes`.arrow-margin-left` and `.arrow-margin-right`, so once that you will apply these classes pagination will be full-width. To see where to put the mentioned classes please see the example below.

- 1
- 2
- 3
- 4
- 5

    //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`,

Default
25%
Primary
60%
Info
60%
Success
60%
Danger
60%
Warning
60%

    <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

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

    <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