Rubick Bootstrap HTML Admin Template
Rubick Tailwind HTML Admin Template Rubick
Application Dashboard
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Rubick Tailwind HTML Admin Template
Bruce Willis
brucewillis@left4code.com
Rubick Tailwind HTML Admin Template
Sylvester Stallone
sylvesterstallone@left4code.com
Rubick Tailwind HTML Admin Template
Leonardo DiCaprio
leonardodicaprio@left4code.com
Rubick Tailwind HTML Admin Template
Johnny Depp
johnnydepp@left4code.com
Products
Rubick Tailwind HTML Admin Template
Samsung Galaxy S20 Ultra
Smartphone & Tablet
Rubick Tailwind HTML Admin Template
Apple MacBook Pro 13
PC & Laptop
Rubick Tailwind HTML Admin Template
Apple MacBook Pro 13
PC & Laptop
Rubick Tailwind HTML Admin Template
Sony Master Series A9G
Electronic
Notifications
Rubick Bootstrap HTML Admin Template
Bruce Willis
06:05 AM
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 20
Rubick Bootstrap HTML Admin Template
Sylvester Stallone
06:05 AM
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 20
Rubick Bootstrap HTML Admin Template
Leonardo DiCaprio
05:09 AM
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 20
Rubick Bootstrap HTML Admin Template
Johnny Depp
05:09 AM
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
Rubick Bootstrap HTML Admin Template
Russell Crowe
03:20 PM
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 20

Notification

Basic Notification

Yay! Updates Published!
Review Changes 
  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="basic-non-sticky-notification-content" class="toastify-content d-none d-flex flex-column flex-sm-row"HTMLCloseTag HTMLOpenTagdiv class="fw-medium"HTMLCloseTagYay! Updates Published!HTMLOpenTag/divHTMLCloseTag HTMLOpenTaga class="fw-medium text-theme-1 dark-text-gray-500 mt-1 mt-sm-0 ms-sm-40" href=""HTMLCloseTagReview ChangesHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Notification Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag HTMLOpenTagbutton id="basic-non-sticky-notification-toggle" class="btn btn-primary me-1"HTMLCloseTagShow Non Sticky NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton id="basic-sticky-notification-toggle" class="btn btn-primary mt-2 mt-sm-0"HTMLCloseTagShow Sticky NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag  
  // Basic non sticky notification cash("#basic-non-sticky-notification-toggle").on("click", function () { Toastify({ node: cash("#basic-non-sticky-notification-content") .clone() .removeClass("d-none")[0], duration: 3000, newWindow: true, close: true, gravity: "top", position: "right", backgroundColor: "white", stopOnFocus: true, }).showToast(); }); // Basic sticky notification cash("#basic-sticky-notification-toggle").on("click", function () { Toastify({ node: cash("#basic-non-sticky-notification-content") .clone() .removeClass("d-none")[0], duration: -1, newWindow: true, close: true, gravity: "top", position: "right", backgroundColor: "white", stopOnFocus: true, }).showToast(); });

Success Notification

Message Saved!
The message will be sent in 5 minutes.
  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="success-notification-content" class="toastify-content d-none d-flex"HTMLCloseTag HTMLOpenTagi class="text-theme-9" data-feather="check-circle"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="ms-4 me-4"HTMLCloseTag HTMLOpenTagdiv class="fw-medium"HTMLCloseTagMessage Saved!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-1"HTMLCloseTagThe message will be sent in 5 minutes.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Notification Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag HTMLOpenTagbutton id="success-notification-toggle" class="btn btn-primary"HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag  
  // Success notification cash("#success-notification-toggle").on("click", function () { Toastify({ node: cash("#success-notification-content") .clone() .removeClass("d-none")[0], duration: -1, newWindow: true, close: true, gravity: "top", position: "right", stopOnFocus: true, }).showToast(); });

Notification With Actions

Storage Removed!
The server will restart in 30 seconds, don't make
changes during the update process!
Restart Now Cancel 
  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="notification-with-actions-content" class="toastify-content d-none d-flex"HTMLCloseTag HTMLOpenTagi data-feather="hard-drive"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="me-4 ms-4"HTMLCloseTag HTMLOpenTagdiv class="fw-medium"HTMLCloseTagStorage Removed!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-1"HTMLCloseTagThe server will restart in 30 seconds, don't makeHTMLOpenTagbrHTMLCloseTag changes during the update process!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="fw-medium d-flex mt-1.5"HTMLCloseTag HTMLOpenTaga class="text-theme-1 dark-text-gray-500" href=""HTMLCloseTagRestart NowHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga class="text-gray-600 ms-3" href=""HTMLCloseTagCancelHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Notification Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag HTMLOpenTagbutton id="notification-with-actions-toggle" class="btn btn-primary"HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag  
  // Notification with actions cash("#notification-with-actions-toggle").on("click", function () { Toastify({ node: cash("#notification-with-actions-content") .clone() .removeClass("d-none")[0], duration: -1, newWindow: true, close: true, gravity: "top", position: "right", stopOnFocus: true, }).showToast(); });

Notification With Avatar

Rubick Bootstrap HTML Admin Template
Denzel Washington
See you later! 😃😃😃
Reply 
  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="notification-with-avatar-content" class="toastify-content d-none d-flex"HTMLCloseTag HTMLOpenTagdiv class="w-10 h-10 flex-none image-fit rounded-circle overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Rubick Bootstrap HTML Admin Template" src="dist/images/profile-7.jpg"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="ms-4 me-sm-28"HTMLCloseTag HTMLOpenTagdiv class="fw-medium"HTMLCloseTagDenzel WashingtonHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-1"HTMLCloseTagSee you later! 😃😃😃HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTaga data-dismiss="notification" class="position-absolute top-0 bottom-0 end-0 d-flex align-items-center px-6 border-start border-gray-200 dark-border-dark-5 fw-medium text-theme-1 dark-text-gray-500" href="javascript:;"HTMLCloseTagReplyHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Notification Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag HTMLOpenTagbutton id="notification-with-avatar-toggle" class="btn btn-primary"HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag  
  // Notification with avatar cash("#notification-with-avatar-toggle").on("click", function () { // Init toastify let avatarNotification = Toastify({ node: cash("#notification-with-avatar-content") .clone() .removeClass("d-none")[0], duration: -1, newWindow: true, close: false, gravity: "top", position: "right", stopOnFocus: true, }).showToast(); // Close notification event cash(avatarNotification.toastElement) .find('[data-dismiss="notification"]') .on("click", function () { avatarNotification.hideToast(); }); });

Notification With Split Buttons

Introducing new theme
Release version 2.3.3
View Details Dismiss 
  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="notification-with-split-buttons-content" class="toastify-content d-none d-flex"HTMLCloseTag HTMLOpenTagdiv class="me-sm-40"HTMLCloseTag HTMLOpenTagdiv class="fw-medium"HTMLCloseTagIntroducing new themeHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-1"HTMLCloseTagRelease version 2.3.3HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="position-absolute top-0 bottom-0 end-0 d-flex flex-column border-start border-gray-200 dark-border-dark-5"HTMLCloseTag HTMLOpenTaga class="flex-1 d-flex align-items-center justify-content-center px-6 fw-medium text-theme-1 dark-text-gray-500 border-bottom border-gray-200 dark-border-dark-5" href="javascript:;"HTMLCloseTagView DetailsHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga data-dismiss="notification" class="flex-1 d-flex align-items-center justify-content-center px-6 fw-medium text-gray-600" href="javascript:;"HTMLCloseTagDismissHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Notification Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag HTMLOpenTagbutton id="notification-with-split-buttons-toggle" class="btn btn-primary"HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag  
  // Notification with split buttons cash("#notification-with-split-buttons-toggle").on("click", function () { // Init toastify let splitButtonsNotification = Toastify({ node: cash("#notification-with-split-buttons-content") .clone() .removeClass("d-none")[0], duration: -1, newWindow: true, close: false, gravity: "top", position: "right", stopOnFocus: true, }).showToast(); // Close notification event cash(splitButtonsNotification.toastElement) .find('[data-dismiss="notification"]') .on("click", function () { splitButtonsNotification.hideToast(); }); });

Notification With Buttons Below

Denzel Washington
Sent you new documents.
Preview Download 
  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="notification-with-buttons-below-content" class="toastify-content d-none d-flex"HTMLCloseTag HTMLOpenTagi data-feather="file-text"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="ms-4 me-5 me-sm-20"HTMLCloseTag HTMLOpenTagdiv class="fw-medium"HTMLCloseTagDenzel WashingtonHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-1"HTMLCloseTagSent you new documents.HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-2.5"HTMLCloseTag HTMLOpenTaga class="btn btn-primary py-1 px-2 me-2" href=""HTMLCloseTagPreviewHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga class="btn btn-outline-secondary py-1 px-2" href=""HTMLCloseTagDownloadHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Notification Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag HTMLOpenTagbutton id="notification-with-buttons-below-toggle" class="btn btn-primary"HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag  
  // Notification with buttons below cash("#notification-with-buttons-below-toggle").on("click", function () { // Init toastify Toastify({ node: cash("#notification-with-buttons-below-content") .clone() .removeClass("d-none")[0], duration: -1, newWindow: true, close: true, gravity: "top", position: "right", stopOnFocus: true, }).showToast(); });
Dark Mode