Modal & Notification page header description goes here...
Admetro build in app notification comes with default (white) or inverse (black) styling.
<a href="#" class="btn btn-primary btn-sm" data-toggle="notification"
data-title="Reminder"
data-content="Meeting with Terry"
data-icon="fa fa-clock text-white"
data-icon-class="bg-gradient-indigo"
data-btn="true"
data-btn-text="Details"
data-btn-attr="data-click='trigger-details'">Demo</a>
| 1. Default Notification | Demo | 4. Inverse Style Notification | Demo |
| 2. Notification with Image | Demo | 5. Without Icon | Demo |
| 3. Custom Button url | Demo | 6. Single Button | Demo |
| Available Options | |||
|---|---|---|---|
| 1 | data-title="Calendar" | 8 | data-content="Tom's Birthday" |
| 2 | data-icon="ti-alarm-clock" | 9 | data-icon-class="bg-grey" |
| 3 | data-img="assets/img/user.jpg" | 10 | data-img-class="bg-inverse" |
| 4 | data-btn="true" | 11 | data-btn-text="Details" |
| 5 | data-btn-url="http://www.google.com" | 12 | data-btn-url="data-click='trigger-button'" |
| 6 | data-close-btn="disabled" | 13 | data-close-text="Close" |
| 7 | data-autoclose="true" | 14 | data-autoclose-time="5000" |
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
|
Default Modal
Normal modal component like modal header, body and footer. |
Demo |
|
Inverse Modal
Place a |
Demo |
|
Full Cover Modal
Place a |
Demo |
|
Inverse Full Cover Modal
Place an additional |
Demo |
|
Full Width Modal
Place a |
Demo |
|
Large Modal
Place a |
Demo |
|
Small Modal
Place a |
Demo |