Header
Stories fixed
Reduced on scroll
mobile breakpoint lg
Autocomplete
Use the UP / DOWN arrows to navigate within the suggestion list. Press Enter to select an option. On touch devices, use swipe to navigate and double tap to select an option
Avatar
Nicolas Jobs
Stories
Small avatar
Medium avatar
Large avatar
Extra-large avatar
Link
Clickble
Notification
Nicolas John Doe
Nicolas John Doe
25 notifications
Nicolas John Doe
25 notifications
Nicolas John Doe
25 notifications
Status
Bagde
Bold
7
75
75+
Subtle
7
75
75+
Minimal
7
75
75+
Bold color variants
Information, in progress
Danger
Warning
Success
Information
Discovery
Subtle color variants
Information, in progress
Danger
Warning
Success
Information
Discovery
Minimal color variants
Information, in progress
Danger
Warning
Success
Information
Discovery
Stories
7
75
75+
Information, in progress
Danger
Warning
Success
Information
Discovery
Emphasis variant: Subtle
Information, in progress
Danger
Warning
Success
Information
Discovery
Emphasis variant: Minimal
Information, in progress
Danger
Warning
Success
Information
Discovery
Breadcrumb
Buttons
Primary icon
Secondary icon
Destructive icon
Inverse icon
Cards
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Indicator
7,234,000
positive evolution 1,6%
Stories
Category Date Author
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Updated 24/01/2017
Card title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque autem, consequuntur dolorum eius, expedita illo minus molestias natus pariatur perferendis, sed tenetur! Cumque magnam qui quis, sequi similique suscipit voluptas.
#p
#p
#p
Horizontal with image
tag
tag
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
15/04/2020
Cover
Card decks
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
Card columns
1 - Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
2 - Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
3 - Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
5 - Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
5 Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
6 - Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
8 - Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
9 - Card title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur dolorum earum harum, hic illum ipsa molestias nam odit quis quo quos repellat, repudiandae similique soluta veniam veritatis vero voluptatum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur dolorum earum harum, hic illum ipsa molestias nam odit quis quo quos repellat, repudiandae similique soluta veniam veritatis vero voluptatum!
Other example
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- 20 users included
- 10 of storage
- Priority email support
- Help center access
Checkbox
Stories
HTML5 Native Form validation is taken into account with required attribute. Fields with * are mandatory.Forced errors with .has-danger class
Fab
Stories
Disabled state
Speed dial mode
Footer
Stories List of links
Inline Message
Stories No Status Indicator
Closable
Link
Here is a text linkHere is a text link
Here is a text link
Here is a text link
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, incidunt
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, incidunt
Stories Bold
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, incidunt
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, incidunt
Here is a text link
Here is a text link
Here is a text link
Here is a text link
Small
Here is a text linkHere is a text link
Here is a text link
Here is a text link
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, incidunt
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, incidunt
Contextual
Here is a text linkHere is a text link
Here is a text link
Here is a text link
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, incidunt
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, incidunt
Grayed
Here is a text linkHere is a text link
Here is a text link
Here is a text link
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, incidunt
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, incidunt
High contrast
Inverse
External link
External link (open in new tab)List
- Icon text alternative Default item with icon and right content Icon text alternative
- Icon text alternative Active item with icon and right content Icon text alternative
-
Icon text alternative
Default item with icon and badge as right content
7
- Icon text alternative Active item with icon and right content, border on the right Icon text alternative
Stories Basic
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
Dense
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
Active items
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
With active border on the right
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
Disabled items
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
Borderless item
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
Links and buttons
With icons
- Icon text alternative Lorem ipsum dolor sit amet
- Icon text alternative Lorem ipsum dolor sit amet
- Icon text alternative Lorem ipsum dolor sit amet
With content on the right
-
List item with a badge on the right
14
- List item with an icon on the right Icon text alternative
-
List item with a tag on the right
Small tag
With some gap between items (mainly used with no-border and dense)
Modal
Confirm these settings?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Delete the file?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Confirm these settings?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Stories Confirmation/Vertically centered
Confirm these settings?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Delete the file?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Confirmation/WithCheckbox
Confirm these settings?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Delete the file?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Confirmation/WithIcon
Confirm these settings?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Delete the file?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Confirmation/Sizes
Small modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Default modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Information/Success
Success modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet
Information/Error
Failure modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet
Information/Warning
Warning modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet
Information/Info
Warning modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet
Information/Waiting
Waiting modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet
Navbar
Stories CollapseSearchBar
Transparent version
Size variation
Container
No responsive example with no toggler
Pagination
Progress
Stories With label
Radio
Stories Inline
Error
HTML5 Native Form validation is taken into account with required attributeForced errors with .has-danger class
Segmented Control
Stories Sizes
SM:
MD (Default):
LG:
Icon Only
Select
Hint
Error
Stories Select custom
Utiliser les flèches HAUT / BAS pour naviguer au sein de la liste de suggestion. Appuyer sur Entrée pour sélectionner une option. Sur des terminaux tactiles, utiliser le balayage pour naviguer et double tap pour sélectionner une option
- France
- Italy
- Belgium
- United Kingdom
- Spain
Utiliser les flèches HAUT / BAS pour naviguer au sein de la liste de suggestion. Appuyer sur Entrée pour sélectionner une option. Sur des terminaux tactiles, utiliser le balayage pour naviguer et double tap pour sélectionner une option
- France
- Italy
- Belgium
- United Kingdom
- Spain
- France
- Italy
- Belgium
- United Kingdom
- Spain
- France
- Italy
- Belgium
- United Kingdom
- Spain
- France
- Italy
- Belgium
- United Kingdom
- Spain
Utiliser les flèches HAUT / BAS pour naviguer au sein de la liste de suggestion. Appuyer sur Entrée pour sélectionner une option. Sur des terminaux tactiles, utiliser le balayage pour naviguer et double tap pour sélectionner une option
- France
- Italy
- Belgium
- United Kingdom
- Spain
Utiliser les flèches HAUT / BAS pour naviguer au sein de la liste de suggestion. Appuyer sur Entrée pour sélectionner une option. Sur des terminaux tactiles, utiliser le balayage pour naviguer et double tap pour sélectionner une option
- France
- Italy
- Belgium
- United Kingdom
- Spain
Utiliser les flèches HAUT / BAS pour naviguer au sein de la liste de suggestion. Appuyer sur Entrée pour sélectionner une option. Sur des terminaux tactiles, utiliser le balayage pour naviguer et double tap pour sélectionner une option
- France
- Italy
- Belgium
- United Kingdom
- Spain
- France
- Italy
- Belgium
- United Kingdom
- Spain
- France
- Italy
- Belgium
- United Kingdom
- Spain
- France
- Italy
- Belgium
- United Kingdom
- Spain
Utiliser les flèches HAUT / BAS pour naviguer au sein de la liste de suggestion. Appuyer sur Entrée pour sélectionner une option. Sur des terminaux tactiles, utiliser le balayage pour naviguer et double tap pour sélectionner une option
- France
- Italy
- Belgium
- United Kingdom
- Spain
- France
- Italy
- Belgium
- United Kingdom
- Spain
- France
- Italy
- Belgium
- United Kingdom
- Spain
- France
- Italy
- Belgium
- United Kingdom
- Spain
Sidebar
Stories Folded version
No push sidebar version
No motion sidebar version
Slider
Stories Value display
Spinner
Loading...
Loading...
Loading...
Loading...
Loading...
Stories Color variation
Loading...
Loading...
Inside a button
Stamp
Stories White version
Shadow
Status Indicator
Offline
Online
Away
Do not disturb
Busy
Unknown
Error
Success
Warning
In progress
Info
Stories Size variants
Online
Online
Online
Without label
Tabs
My Item 1 content
My Item 2 content
My Item 3 content
My Item 4 content
My Item 5 content
My Item 6 content
Stories Compact
My Item 1 content
My Item 2 content
My Item 3 content
My Item 4 content
My Item 5 content
My Item 6 content
Spacious
My Item 1 content
My Item 2 content
My Item 3 content
My Item 4 content
My Item 5 content
My Item 6 content
Stretched
My Item 1 content
My Item 2 content
My Item 3 content
My Item 4 content
My Item 5 content
My Item 6 content
Table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| TOTAL | 3 | 3 | 3 |
Stories Striped rows
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Hoverable rows
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Tag
Stories Sizes
Color variation
Toast Container
3 notifications
Rows successfully inserted
Rows successfully inserted
Rows successfully inserted
Stories Full Width
3 notifications
Rows successfully inserted
Rows successfully inserted
Rows successfully inserted
Toast
Rows successfully inserted
Rows successfully inserted
Your table has been updated !
Rows successfully inserted
Your table has been updated !
Rows successfully inserted
Stories Inverse toast
Inverse toasts should be used on a darker surface
Rows successfully inserted
Rows successfully inserted
Your table has been updated !
Rows successfully inserted
Your table has been updated !
Rows successfully inserted
Toggle
Stories Sizes
Disabled
Dark Mode
Icons Or Text
Tooltip
Stories Inverse