# Typography

# h1. Bootstrap 3

## h2. Heading 2

### h3. Heading 3

#### h4. Heading 4

##### h5. Heading 5

###### h6. Heading 6

### Bootstrap Framework

Aenean ut tristique risus, vitae suscipit erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.

Vivamus mauris risus, laoreet et ligula sed, efficitur eleifend tellus. In commodo, augue sit amet congue sagittis, urna risus vestibulum ex, eu suscipit arcu purus ac purus.

> Sed non dolor hendrerit, bibendum lacus nec, sodales tellus. Proin at finibus nibh. Sed vulputate posuere nisi a lacinia. Quisque imperdiet velit eget rutrum varius.

> Lorem ipsum dolor sit amet

# Icons (OVH UI Kit)

# Grid

col-lg-12

col-lg-4

col-lg-4

col-lg-4

col-lg-6

col-lg-6

col-lg-9 / col-sm-6
col-lg-3 / col-sm-6

# Buttons (Bootstrap)

Default Primary Success Info Warning Danger Link

Default
Primary
Success
Info
Warning

Large button Default button Small button Mini button

Block level button

Block level button

Left Middle Right
1 2 3 4
5 6 7
8
Dropdown
Button Button Button Button

# Buttons (OVH UI Kit)

## Normal

## Disabled

## Full width

## Large height

## Small width

## Button Group

# Dropdowns

Deprecated example (for compatibility purpose)

# Forms

## Form Vertical

Email address
Password

Example block-level help text here.

Remember me

## Form Horizontal

Email
Password

Example block-level help text here.

Remember me

## Form Inline

Name
Email
Email address
Password
Remember me
Amount (in dollars)
$
.00

# Form Controls

Default input
Input warning
Input error
Input success
Disabled input
Read-only input
Default select
Select warning
Select error
Select success
Disabled select
Multiple select

## Selectors (OVH UI Kit)

## Textarea

Default textarea Default textarea
Disabled textarea Disabled textarea
Read-only textarea Read-only textarea
Textarea warning Textarea warning
Textarea error Textarea error
Textarea success Textarea success

## Checkboxes / Radios (Bootstrap)

Default checkbox Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Disabled checkbox Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Checkbox with success Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Checkbox with warning Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Checkbox with error Lorem ipsum dolor sit amet, consectetur adipisicing elit.
1 2 3
Default radio Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Disabled radio Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Radio with success Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Radio with warning Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Radio with error Lorem ipsum dolor sit amet, consectetur adipisicing elit.
1 2 3
Checkboxes
Option 1
Option 2
Option 3
Radios
Option 1
Option 2
Option 3

## Checkboxes / Radios (OVH UI Kit)

Checkbox checked
Default checkbox Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Checkbox disabled Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Checkbox M Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Checkbox M disabled Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Radio checked
Default radio Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Radio disabled Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Radio M Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Radio M disabled Lorem ipsum dolor sit amet, consectetur adipisicing elit.

## Help Blocks / Feedbacks

Default input A block of help text that breaks onto a new line and may extend beyond one line.
Input with success A block of help text that breaks onto a new line and may extend beyond one line.
Input with warning A block of help text that breaks onto a new line and may extend beyond one line.
Input with error A block of help text that breaks onto a new line and may extend beyond one line.
Default input (default)
Input with success (success)
Input with warning (warning)
Input with error (error)
Input group with success
@
(success)

## Control Sizing

Input sizing
Select sizing
Large label
Default label
Small label

# Input Groups

@
@example.com
$ .00
https://example.com/users/
@
@
@
@
@
@
@

# Tables

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
Mark | Otto | @TwBootstrap
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

# | Column heading | Column heading | Column heading
--- | --- | --- | ---
1 | Column content | Column content | Column content
2 | Column content | Column content | Column content
3 | Column content | Column content | Column content
4 | Column content | Column content | Column content
5 | Column content | Column content | Column content
6 | Column content | Column content | Column content
7 | Column content | Column content | Column content

Filename | Id | Size | Creation | Actions
--- | --- | --- | --- | ---
abc | 1 | 123 KB | Sun Mar 19 19:53:24 2017 |
abc | 2 | 123 KB | Sun Mar 19 19:53:24 2017 |
abc | 3 | 123 KB | Sun Mar 19 19:53:24 2017 |
abc | 4 | 123 KB | Sun Mar 19 19:53:24 2017 |
abc | 5 | 123 KB | Sun Mar 19 19:53:24 2017 |
abc | 6 | 123 KB | Sun Mar 19 19:53:24 2017 |

# Page Header (+ Tabs)

# Lorem ipsum dolor sit amet

## Section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo assumenda non aspernatur qui ipsa nam facere corrupti vel! Impedit ratione natus eligendi facere eaque illo tempore, voluptatum voluptas, voluptatibus doloremque!

Beatae adipisci eum illo saepe ab ipsa dicta, aspernatur deleniti nulla iste debitis sint nisi reiciendis consectetur libero officia quae eveniet. Commodi quo a repellat atque rerum. Harum rem, impedit.

Placeat molestias perspiciatis officiis obcaecati minima, accusantium officia, asperiores maxime pariatur, earum unde omnis. Sed adipisci harum ipsam velit aut commodi ab nemo voluptatibus, porro dicta quidem nostrum aliquid dolor?

Natus atque delectus temporibus animi quasi laborum incidunt asperiores inventore dolores? Deleniti architecto tempora asperiores vero quibusdam. Fugiat enim excepturi minima animi. Dicta pariatur adipisci voluptate impedit tempore perferendis reiciendis.

Quod officiis recusandae reiciendis ipsam repellendus doloribus quibusdam voluptas repudiandae odit consectetur architecto autem, impedit natus laboriosam aliquam quaerat sunt ut qui iusto animi iure. Esse voluptates a eaque nemo.

## Section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nesciunt voluptatem reprehenderit nulla magnam autem, deleniti veritatis illum nihil ipsum qui explicabo in rerum officiis, perferendis. Cum tenetur blanditiis sint.

Illo totam pariatur aperiam fuga! Enim architecto repudiandae, nisi voluptates est officia, recusandae obcaecati beatae doloribus vel delectus omnis expedita nemo debitis suscipit natus assumenda! Voluptate eligendi deleniti aliquid esse?

Suscipit, nemo, sapiente. At corporis molestias, fugit pariatur quas, iste numquam quod maxime sed doloribus minima suscipit. Repellat, reiciendis eum vitae mollitia dignissimos in. Aspernatur corporis ratione, fugiat quis ab.

Quibusdam illo officia debitis obcaecati porro exercitationem quasi illum sed nisi. Aut nesciunt perspiciatis ab, voluptatem vitae, facere. Voluptatum nisi suscipit, modi quae eius omnis sequi in iure id! Eum?

Adipisci rem a in odit ipsa? Unde atque harum molestias corrupti quidem, et beatae velit excepturi temporibus amet dolorum placeat suscipit quas. At in dolorem sint assumenda eveniet optio eos.

## Section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium asperiores quasi ipsum veniam cum velit impedit ipsam officia obcaecati, accusamus modi, vitae fugiat, voluptates. Fugiat cum, omnis aliquid temporibus sed!

Saepe qui adipisci fugiat recusandae omnis deleniti sunt optio libero, magnam dicta, consequuntur itaque quod ipsa quibusdam officia suscipit ratione autem illum nam perferendis laborum veniam similique! Omnis, quibusdam, possimus.

Praesentium similique delectus nihil soluta ea, nulla veniam, animi iure accusamus dolor cum necessitatibus. Similique possimus ut veniam nulla alias? Saepe eveniet, facilis vitae ex necessitatibus aperiam. Tempora, debitis consectetur.

Corrupti provident enim repellat officia voluptates sed consectetur debitis molestiae neque, voluptatibus, blanditiis aut. Perferendis id aperiam culpa, eius hic ratione reiciendis nesciunt dicta, necessitatibus impedit natus, vero sint possimus?

Libero vitae officiis expedita nemo neque accusamus, adipisci enim cupiditate quia esse itaque atque voluptates culpa. Aliquam ea dolores voluptatem reiciendis officia autem tempora, corporis possimus ad id voluptas facilis.

## Section 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, inventore velit doloremque soluta quisquam, laboriosam incidunt quis eum mollitia, ipsum iure pariatur natus, deleniti? Quod perferendis ratione voluptas minus esse.

Quaerat, veniam accusamus aperiam ea facilis obcaecati minus natus, animi delectus, veritatis iste velit commodi blanditiis assumenda illo. Nihil quam numquam, minus aspernatur perferendis explicabo quod amet quae fugit repellat.

Laudantium quaerat rerum perferendis porro eum modi, dolores totam esse excepturi est aspernatur veritatis accusamus! Nobis debitis, quaerat totam quibusdam? Recusandae culpa quia libero obcaecati. Rem hic, nisi voluptates dolor!

Laborum id molestias, eum exercitationem quasi dignissimos consequuntur accusamus perferendis. Voluptates hic ab quam, sint possimus odit sapiente, officia accusantium adipisci asperiores numquam sunt. Dolor debitis aperiam voluptatum minus iusto.

Accusamus praesentium ea eius voluptate repudiandae, in, cumque beatae facere totam aliquid impedit laboriosam, deserunt nihil aperiam. Odio similique pariatur mollitia in placeat error! Obcaecati fugiat perferendis cum perspiciatis a!

# Navigation

## Breadcrumbs

## Pagination

- «
- 1
- 2
- 3
- 4
- 5
- »

## Pagers

- Previous
- Next

- ← Older
- Newer →

## Nav Tabs

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

## Nav Pills

## Nav Stacked

## Labels

Default Primary Success Warning Danger Info

Default Primary Success Warning Danger Info

## Badges

Default

## Progress Bars

60%
20%
40%
60%
80%
30%
15%
Indeterminate
Indeterminate
40%
60%

## Tooltips

Tooltip on the left
Tooltip on the top
Tooltip on the bottom
Tooltip on the right

## Popovers

### Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

# Navbar (Bootstrap)

# Navbar (OVH UI Kit)

# Alerts (Bootstrap)

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.

# Messages (OVH UI Kit)

Default message with close button

Info message with close button and no icon

Success message with close button and no icon

Warning message with close button and no icon

Error message with close button and no icon

Info message with close button

Success message with close button

Warning message with close button

Error message with close button

## Medium Icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra in est sed mollis. Phasellus eu fringilla sem. Nunc molestie tellus et odio dictum condimentum. Vivamus eleifend mauris eget sem cursus, et commodo ipsum ultrices. Praesent mollis lacus quis imperdiet laoreet. In quis ornare turpis. Aliquam sit amet tempus urna. Praesent posuere nisl ut nibh consectetur sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra in est sed mollis. Phasellus eu fringilla sem. Nunc molestie tellus et odio dictum condimentum. Vivamus eleifend mauris eget sem cursus, et commodo ipsum ultrices. Praesent mollis lacus quis imperdiet laoreet. In quis ornare turpis. Aliquam sit amet tempus urna. Praesent posuere nisl ut nibh consectetur sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra in est sed mollis. Phasellus eu fringilla sem. Nunc molestie tellus et odio dictum condimentum. Vivamus eleifend mauris eget sem cursus, et commodo ipsum ultrices. Praesent mollis lacus quis imperdiet laoreet. In quis ornare turpis. Aliquam sit amet tempus urna. Praesent posuere nisl ut nibh consectetur sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra in est sed mollis. Phasellus eu fringilla sem. Nunc molestie tellus et odio dictum condimentum. Vivamus eleifend mauris eget sem cursus, et commodo ipsum ultrices. Praesent mollis lacus quis imperdiet laoreet. In quis ornare turpis. Aliquam sit amet tempus urna. Praesent posuere nisl ut nibh consectetur sagittis.

## No Border

Info message no border

Info message no border

Success message no border

Success message no border

Warning message no border

Warning message no border

Error message no border

Error message no border

## Large Messages

# We are sorry, a problem occurred during the loading of the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis a nisl eget pretium. Phasellus.

# We are sorry, a problem occurred during the loading of the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis a nisl eget pretium. Phasellus.

# Panels

Panel heading
Hello. This is the Panel content.
Panel primary
Panels are new in BS3.
Panel success
You can use contextual classes.
Panel info
You can use contextual classes.
Panel warning
You can use contextual classes.
Panel danger
You can use contextual classes.
Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

# List Groups

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

Cras justo odio Dapibus ac facilisis in Morbi leo risus

- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

#### List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

#### List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

#### List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

# Wells (Bootstrap)

### An awesome title for an awesome box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus sapien erat, et molestie magna tristique non. Sed tincidunt eu augue tempor consectetur. Nullam iaculis, nibh mollis vulputate elementum, neque est iaculis nisi, et gravida turpis erat non dui. Nunc eget tortor et enim interdum euismod sed eget purus. Integer in metus ultrices, ultricies lacus in, fermentum nisi. Cras sed neque id dui fermentum faucibus. Mauris mollis arcu justo, eget convallis massa volutpat ac.

# Boxes (OVH UI Kit)

### An awesome title for an awesome box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus sapien erat, et molestie magna tristique non. Sed tincidunt eu augue tempor consectetur. Nullam iaculis, nibh mollis vulputate elementum, neque est iaculis nisi, et gravida turpis erat non dui. Nunc eget tortor et enim interdum euismod sed eget purus. Integer in metus ultrices, ultricies lacus in, fermentum nisi. Cras sed neque id dui fermentum faucibus. Mauris mollis arcu justo, eget convallis massa volutpat ac.

### An awesome title for an awesome box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus sapien erat, et molestie magna tristique non. Sed tincidunt eu augue tempor consectetur. Nullam iaculis, nibh mollis vulputate elementum, neque est iaculis nisi, et gravida turpis erat non dui. Nunc eget tortor et enim interdum euismod sed eget purus. Integer in metus ultrices, ultricies lacus in, fermentum nisi. Cras sed neque id dui fermentum faucibus. Mauris mollis arcu justo, eget convallis massa volutpat ac.

# Modals (Bootstrap)

## Lorem ipsum dolor sit amet

Consectetur adipisicing elit. Vitae ipsum reiciendis omnis, harum dolorum eveniet ea odio voluptas animi voluptates mollitia est iste temporibus laudantium suscipit blanditiis facilis eos nemo!

## Lorem ipsum dolor sit amet

Consectetur adipisicing elit. Vitae ipsum reiciendis omnis, harum dolorum eveniet ea odio voluptas animi voluptates mollitia est iste temporibus laudantium suscipit blanditiis facilis eos nemo!

### Tests

# Modals (OVH UI Kit)

## Warning

The current order is not finished.

Are you sure you want to continue and return to the home page?

## Storage creation

A new storage will be added to your account.

# Spinners (OVH UI Kit)

## Small Spinner

## Medium Spinner

## Large Spinner

# Tiles (OVH UI Kit)

#### Buttons

#### List definition

Foo
  bar

Baz
  qux (quux)