Rubick Bootstrap HTML Admin Template
Application Dashboard
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Rubick Tailwind HTML Admin Template
Brad Pitt
bradpitt@left4code.com
Rubick Tailwind HTML Admin Template
Al Pacino
alpacino@left4code.com
Rubick Tailwind HTML Admin Template
Nicolas Cage
nicolascage@left4code.com
Rubick Tailwind HTML Admin Template
Tom Hanks
tomhanks@left4code.com
Products
Rubick Tailwind HTML Admin Template
Oppo Find X2 Pro
Smartphone & Tablet
Rubick Tailwind HTML Admin Template
Dell XPS 13
PC & Laptop
Rubick Tailwind HTML Admin Template
Nike Tanjun
Sport & Outdoor
Rubick Tailwind HTML Admin Template
Nikon Z6
Photography
Notifications
Rubick Bootstrap HTML Admin Template
Brad Pitt
01:10 PM
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomi
Rubick Bootstrap HTML Admin Template
Al Pacino
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
Nicolas Cage
01:10 PM
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomi
Rubick Bootstrap HTML Admin Template
Tom Hanks
01:10 PM
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
Nicolas Cage
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
Nicolas Cage
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-5.jpg"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="ms-4 me-sm-28"HTMLCloseTag HTMLOpenTagdiv class="fw-medium"HTMLCloseTagNicolas CageHTMLOpenTag/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

Nicolas Cage
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"HTMLCloseTagNicolas CageHTMLOpenTag/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