# Matrix Admin

# Interface elements

##### Labels and badges

Labels | Markup
--- | ---
Default | `<span class="label">`
Success | `<span class="label label-success">`
Warning | `<span class="label label-warning">`
Important | `<span class="label label-important">`
Info | `<span class="label label-info">`
Inverse | `<span class="label label-inverse">`

Name | Example | Markup
--- | --- | ---
Default | 1 | `<span class="badge">`
Success | 2 | `<span class="badge badge-success">`
Warning | 4 | `<span class="badge badge-warning">`
Important | 6 | `<span class="badge badge-important">`
Info | 8 | `<span class="badge badge-info">`
Inverse | 10 | `<span class="badge badge-inverse">`

##### Different notifications

- Standard notification
- Sticky notification
- Notification with image

##### Icon With box

- icon-book
- icon-cabinet
- icon-calendar
- icon-client
- icon-database
- icon-download
- icon-graph
- icon-home
- icon-lock
- icon-mail
- icon-Dashboard
- icon-facetime-video
- icon-external-link
- icon-folder-open

    <ul class="quick-actions">
                  <li a href="#"> <i class="icon-book"></i> icon-book </a> </li>
    </ul>

##### Different Bars

    <div class="progress"> <div class="bar" style="width: difine%;"></div></div>

    <div class="progress progress-striped"> <div class="bar" style="width: 60%;"></div></div>

    <div class="progress progress-striped active"> <div class="bar" style="width: 60%;"></div></div>

    <div class="progress"> <div class="bar bar-success" style="width: 35%;"></div> <div class="bar bar-warning" style="width: 20%;"></div> <div class="bar bar-danger" style="width: 10%;"></div></div>

##### Pop-up dialogs

View Popup Alert image Popup

### Pop up Header

Here is the text coming you can put also image if you want…

### Alert modal

Lorem ipsum dolor sit amet...

##### Tooltip directions

Four directions of the tooltips, just add a class: 'tip-top', 'tip-bottom', 'tip-left' or 'tip-right' without quotes to the element you want to have tooltip.

##### Pagination

### Default pagination

- Prev
- 1
- 2
- 3
- 4
- Next

### Alternate pagination

`<div class="pagination alternate">`

- Prev
- 1
- 2
- 3
- 4
- Next

##### Typography

# h1. Heading 1

## h2. Heading 2

### h3. Heading 3

#### h4. Heading 4

##### h5. Heading 5

###### h6. Heading 6

##### Popover Option

- Popover on top
- Popover on right
- Popover on bottom
- Popover on left

##### Notifications

×

#### Warning!

You're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
×

#### Success!

Tou're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
×

#### Info!

Tou're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
×

#### Error!

You're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Warning! Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Success! Libero, a pharetra augue. Praesent commodo
Info! you're not looking too good.
Error! Nulla vitae elit libero, a pharetra augue. Praesent commodo