doc-fui-ds

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>FUI Design System - Futuristic User Interface / UI</title>  <meta name="description" content="Explore the FUI Design System to create stunning futuristic user interfaces with innovative UI components, combining the power of Bootstrap or Tailwind CSS."/> <meta name="author" content="Mohammad Azad">  <link rel="shortcut icon" href="assets/img/fui-design-system-logo-icon-16.png"> <link rel="apple-touch-icon" sizes="120x120" href="fui-design-system-logo-icon-120x120.png" /> <link rel="apple-touch-icon" sizes="152x152" href="fui-design-system-logo-icon-152x152.png" />  <link rel="stylesheet" href="assets/css/bootstrap/bootstrap.css">  <link rel="stylesheet" href="assets/css/bootstrap/bootstrap-icons.css">  <link rel="stylesheet" href="assets/css/atom-one-dark.css">  <link rel="stylesheet" href="assets/css/fui.css"> </head> <body class="fui-bg-gradient-grid-dark fui-bg-attachment-fixed overflow-hidden"> <div class="position-xl-fixed fui-top-0 fui-bottom-0 fui-start-0 p-3 py-3 ps-xl-3 pe-xl-0 fui-sidebar z-1">  <header> <div class="fui-logo position-relative"> <span class="position-absolute top-0 top-start fui-size-8 border border-white border-opacity-75 border-end-0 border-bottom-0 pe-none"></span> <span class="position-absolute bottom-0 end-0 fui-size-8 border border-white border-opacity-75 border-start-0 border-top-0 pe-none"></span> <div class="px-3 py-2 fui-h-70 fui-tr fui-bl fui-tr-16 fui-bl-16 fui-border-1 fui-border-primary-25 bg-primary bg-opacity-10" fui-corner fui-border> <div class="d-flex align-items-center justify-content-between gap-2 h-100"> <div class="d-flex align-items-center gap-2"> <a href="index.html"> <img src="assets/img/fui-design-system-logo-icon.svg" alt="FUI Design System Logo" alt="" /> </a> <div>  <h1 class="fui-fs-16 mb-0">FUI DESIGN SYSTEM_</h1> <span class="fui-fs-14 text-warning text-opacity-75 d-block">Doc v1.0</span> </div> </div> <div class="d-inline-flex align-items-center gap-2"> <span class="fui-cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapseSearch" aria-expanded="false" aria-controls="collapseSearch"> <i class="bi bi-search"></i> </span> <span class="text-white opacity-25 d-inline-block d-xl-none">|</span> <span class="fui-cursor-pointer d-inline-block d-xl-none" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMobileMenu" aria-controls="offcanvasMobileMenu"> <i class="bi bi-three-dots-vertical"></i> </span> </div> </div>  <div class="position-absolute top-0 fui-top-5 fui-start-5 fui-end-5 fui-bottom-5 bg-primary bg-opacity-50 fui-blur-16 collapse collapse-horizontal fui-tr-13 fui-bl-13" fui-corner id="collapseSearch"> <input type="text" placeholder="Search" class="h-100 w-100 py-2 ps-3 pe-5 bg-transparent border-0 text-white fw-light fui-no-focus fui-placeholder-white-50" /> <span class="fui-cursor-pointer position-absolute top-50 end-0 me-3 translate-middle-y" data-bs-toggle="collapse" data-bs-target="#collapseSearch" aria-expanded="false" aria-controls="collapseSearch"> <i class="bi bi-x fs-4 lh-0"></i> </span> </div>  </div> <span class="fui-triangle-bl-12 text-warning text-opacity-75 position-absolute bottom-0 start-0 pe-none"></span> <span class="fui-triangle-tr-12 text-warning text-opacity-75 position-absolute top-0 end-0 pe-none"></span> </div> </header>   <div class="fui-sidebar-nav position-relative border border-primary border-opacity-50 mt-3 pt-3 px-2 d-none d-xl-block"> <span class="position-absolute fui-top-n-1 fui-start-n-1 fui-size-10 border border-warning border-opacity-75 border-end-0 border-bottom-0 pe-none"></span> <span class="position-absolute fui-top-n-1 fui-end-n-1 fui-size-10 border border-warning border-opacity-75 border-start-0 border-bottom-0 pe-none"></span> <span class="position-absolute fui-bottom-n-1 fui-start-n-1 fui-size-10 border border-warning border-opacity-75 border-end-0 border-top-0 pe-none"></span> <span class="position-absolute fui-bottom-n-1 fui-end-n-1 fui-size-10 border border-warning border-opacity-75 border-start-0 border-top-0 pe-none"></span>  <nav> <div class="fui-sidebar-nav-content px-2 pt-0 pb-2 overflow-x-hidden overflow-y-auto"> <div class="fui-title fui-title-shape fui-title-shape--end fui-title-shape--primary-50 mb-3"> <a href="#!" class="text-decoration-none"> <h2 class="mb-0 fui-fs-16 fw-bold d-flex align-items-center gap-1 text-primary"> <i class="bi bi-chevron-right lh-0"></i> <span>Introduction</span> </h2> </a> <div class="position-relative pe-3 pe-none"> <div class="fui-line-shape bg-primary bg-opacity-50"></div> <div class="position-absolute end-0 me-1 bottom-0 fui-skew-x-n-1 d-flex gap-1"> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> </div> </div> </div> <div class="accordion fui-accordion"> <div class="accordion-item mb-4"> <div class="accordion-header"> <div class="accordion-button fui-accordion-button d-block fui-cursor-pointer" data-bs-toggle="collapse" data-bs-target="#menu-collapseOne" aria-expanded="true" aria-controls="menu-collapseOne"> <div class="fui-title fui-title-shape fui-title-shape--end fui-title-shape--primary-50"> <h2 class="mb-0 fui-fs-16 fw-bold ps-3"> Getting Started </h2> <div class="position-relative pe-3 pe-none"> <div class="fui-line-shape bg-primary bg-opacity-50"></div> <div class="position-absolute end-0 me-1 bottom-0 fui-skew-x-n-1 d-flex gap-1"> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> </div> </div> </div> </div> </div> <div id="menu-collapseOne" class="accordion-collapse collapse show"> <div class="accordion-body pb-0"> <div class="position-relative"> <span class="fui-triangle-t-8 text-primary text-opacity-75 position-absolute bottom-100 end-0 me-5 pe-none"></span> <div class="p-3 fui-all-corner fui-border-1 fui-border-primary-50" fui-corner fui-border> <ul class="fui-list-style-none p-0 m-0 d-flex flex-column gap-2"> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-50"> <span> Getting Started </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Customization </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Credits </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Changelog </span> <i class="bi bi-chevron-right"></i> </a> </li> </ul> </div> <span class="fui-triangle-tl-12 text-primary text-opacity-25 position-absolute top-0 start-0 pe-none"></span> <span class="fui-triangle-tr-12 text-primary text-opacity-25 position-absolute top-0 end-0 pe-none"></span> <span class="fui-triangle-br-12 text-primary text-opacity-25 position-absolute bottom-0 end-0 pe-none"></span> <span class="fui-triangle-bl-12 text-primary text-opacity-25 position-absolute bottom-0 start-0 pe-none"></span> </div> </div> </div> </div> <div class="accordion-item mb-4"> <div class="accordion-header"> <div class="accordion-button fui-accordion-button collapsed d-block fui-cursor-pointer" data-bs-toggle="collapse" data-bs-target="#menu-collapseTwo" aria-expanded="false" aria-controls="menu-collapseTwo"> <div class="fui-title fui-title-shape fui-title-shape--end fui-title-shape--primary-50"> <h2 class="mb-0 fui-fs-16 fw-bold ps-3"> Ions & Graphics </h2> <div class="position-relative pe-3 pe-none"> <div class="fui-line-shape bg-primary bg-opacity-50"></div> <div class="position-absolute end-0 me-1 bottom-0 fui-skew-x-n-1 d-flex gap-1"> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> </div> </div> </div> </div> </div> <div id="menu-collapseTwo" class="accordion-collapse collapse"> <div class="accordion-body pb-0"> <div class="position-relative"> <span class="fui-triangle-t-8 text-primary text-opacity-75 position-absolute bottom-100 end-0 me-5 pe-none"></span> <div class="p-3 fui-all-corner fui-border-1 fui-border-primary-50" fui-corner fui-border> <ul class="fui-list-style-none p-0 m-0 d-flex flex-column gap-2"> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Getting Started </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Customization </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Credits </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Changelog </span> <i class="bi bi-chevron-right"></i> </a> </li> </ul> </div> <span class="fui-triangle-tl-12 text-primary text-opacity-25 position-absolute top-0 start-0 pe-none"></span> <span class="fui-triangle-tr-12 text-primary text-opacity-25 position-absolute top-0 end-0 pe-none"></span> <span class="fui-triangle-br-12 text-primary text-opacity-25 position-absolute bottom-0 end-0 pe-none"></span> <span class="fui-triangle-bl-12 text-primary text-opacity-25 position-absolute bottom-0 start-0 pe-none"></span> </div> </div> </div> </div> <div class="accordion-item mb-4"> <div class="accordion-header"> <div class="accordion-button fui-accordion-button collapsed d-block fui-cursor-pointer" data-bs-toggle="collapse" data-bs-target="#menu-collapseThree" aria-expanded="false" aria-controls="menu-collapseThree"> <div class="fui-title fui-title-shape fui-title-shape--end fui-title-shape--primary-50"> <h2 class="mb-0 fui-fs-16 fw-bold ps-3"> Components </h2> <div class="position-relative pe-3 pe-none"> <div class="fui-line-shape bg-primary bg-opacity-50"></div> <div class="position-absolute end-0 me-1 bottom-0 fui-skew-x-n-1 d-flex gap-1"> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> </div> </div> </div> </div> </div> <div id="menu-collapseThree" class="accordion-collapse collapse"> <div class="accordion-body pb-0"> <div class="position-relative"> <span class="fui-triangle-t-8 text-primary text-opacity-75 position-absolute bottom-100 end-0 me-5 pe-none"></span> <div class="p-3 fui-all-corner fui-border-1 fui-border-primary-50" fui-corner fui-border> <ul class="fui-list-style-none p-0 m-0 d-flex flex-column gap-2"> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Getting Started </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Customization </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Credits </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Changelog </span> <i class="bi bi-chevron-right"></i> </a> </li> </ul> </div> <span class="fui-triangle-tl-12 text-primary text-opacity-25 position-absolute top-0 start-0 pe-none"></span> <span class="fui-triangle-tr-12 text-primary text-opacity-25 position-absolute top-0 end-0 pe-none"></span> <span class="fui-triangle-br-12 text-primary text-opacity-25 position-absolute bottom-0 end-0 pe-none"></span> <span class="fui-triangle-bl-12 text-primary text-opacity-25 position-absolute bottom-0 start-0 pe-none"></span> </div> </div> </div> </div> <div class="accordion-item mb-4"> <div class="accordion-header"> <div class="accordion-button fui-accordion-button collapsed d-block fui-cursor-pointer" data-bs-toggle="collapse" data-bs-target="#menu-collapseFour" aria-expanded="false" aria-controls="menu-collapseFour"> <div class="fui-title fui-title-shape fui-title-shape--end fui-title-shape--primary-50"> <h2 class="mb-0 fui-fs-16 fw-bold ps-3"> Tables </h2> <div class="position-relative pe-3 pe-none"> <div class="fui-line-shape bg-primary bg-opacity-50"></div> <div class="position-absolute end-0 me-1 bottom-0 fui-skew-x-n-1 d-flex gap-1"> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> </div> </div> </div> </div> </div> <div id="menu-collapseFour" class="accordion-collapse collapse"> <div class="accordion-body pb-0"> <div class="position-relative"> <span class="fui-triangle-t-8 text-primary text-opacity-75 position-absolute bottom-100 end-0 me-5 pe-none"></span> <div class="p-3 fui-all-corner fui-border-1 fui-border-primary-50" fui-corner fui-border> <ul class="fui-list-style-none p-0 m-0 d-flex flex-column gap-2"> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Getting Started </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Customization </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Credits </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Changelog </span> <i class="bi bi-chevron-right"></i> </a> </li> </ul> </div> <span class="fui-triangle-tl-12 text-primary text-opacity-25 position-absolute top-0 start-0 pe-none"></span> <span class="fui-triangle-tr-12 text-primary text-opacity-25 position-absolute top-0 end-0 pe-none"></span> <span class="fui-triangle-br-12 text-primary text-opacity-25 position-absolute bottom-0 end-0 pe-none"></span> <span class="fui-triangle-bl-12 text-primary text-opacity-25 position-absolute bottom-0 start-0 pe-none"></span> </div> </div> </div> </div> <div class="accordion-item mb-4"> <div class="accordion-header"> <div class="accordion-button fui-accordion-button collapsed d-block fui-cursor-pointer" data-bs-toggle="collapse" data-bs-target="#menu-collapseFive" aria-expanded="false" aria-controls="menu-collapseFive"> <div class="fui-title fui-title-shape fui-title-shape--end fui-title-shape--primary-50"> <h2 class="mb-0 fui-fs-16 fw-bold ps-3"> Form </h2> <div class="position-relative pe-3 pe-none"> <div class="fui-line-shape bg-primary bg-opacity-50"></div> <div class="position-absolute end-0 me-1 bottom-0 fui-skew-x-n-1 d-flex gap-1"> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> </div> </div> </div> </div> </div> <div id="menu-collapseFive" class="accordion-collapse collapse"> <div class="accordion-body pb-0"> <div class="position-relative"> <span class="fui-triangle-t-8 text-primary text-opacity-75 position-absolute bottom-100 end-0 me-5 pe-none"></span> <div class="p-3 fui-all-corner fui-border-1 fui-border-primary-50" fui-corner fui-border> <ul class="fui-list-style-none p-0 m-0 d-flex flex-column gap-2"> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Getting Started </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Customization </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Credits </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Changelog </span> <i class="bi bi-chevron-right"></i> </a> </li> </ul> </div> <span class="fui-triangle-tl-12 text-primary text-opacity-25 position-absolute top-0 start-0 pe-none"></span> <span class="fui-triangle-tr-12 text-primary text-opacity-25 position-absolute top-0 end-0 pe-none"></span> <span class="fui-triangle-br-12 text-primary text-opacity-25 position-absolute bottom-0 end-0 pe-none"></span> <span class="fui-triangle-bl-12 text-primary text-opacity-25 position-absolute bottom-0 start-0 pe-none"></span> </div> </div> </div> </div> <div class="accordion-item mb-4"> <div class="accordion-header"> <div class="accordion-button fui-accordion-button collapsed d-block fui-cursor-pointer" data-bs-toggle="collapse" data-bs-target="#menu-collapseFive" aria-expanded="false" aria-controls="menu-collapseFive"> <div class="fui-title fui-title-shape fui-title-shape--end fui-title-shape--primary-50"> <h2 class="mb-0 fui-fs-16 fw-bold ps-3"> Charts </h2> <div class="position-relative pe-3 pe-none"> <div class="fui-line-shape bg-primary bg-opacity-50"></div> <div class="position-absolute end-0 me-1 bottom-0 fui-skew-x-n-1 d-flex gap-1"> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> </div> </div> </div> </div> </div> <div id="menu-collapseFive" class="accordion-collapse collapse"> <div class="accordion-body pb-0"> <div class="position-relative"> <span class="fui-triangle-t-8 text-primary text-opacity-75 position-absolute bottom-100 end-0 me-5 pe-none"></span> <div class="p-3 fui-all-corner fui-border-1 fui-border-primary-50" fui-corner fui-border> <ul class="fui-list-style-none p-0 m-0 d-flex flex-column gap-2"> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Getting Started </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Customization </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Credits </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Changelog </span> <i class="bi bi-chevron-right"></i> </a> </li> </ul> </div> <span class="fui-triangle-tl-12 text-primary text-opacity-25 position-absolute top-0 start-0 pe-none"></span> <span class="fui-triangle-tr-12 text-primary text-opacity-25 position-absolute top-0 end-0 pe-none"></span> <span class="fui-triangle-br-12 text-primary text-opacity-25 position-absolute bottom-0 end-0 pe-none"></span> <span class="fui-triangle-bl-12 text-primary text-opacity-25 position-absolute bottom-0 start-0 pe-none"></span> </div> </div> </div> </div> <div class="accordion-item mb-4"> <div class="accordion-header"> <div class="accordion-button fui-accordion-button collapsed d-block fui-cursor-pointer" data-bs-toggle="collapse" data-bs-target="#menu-collapseSix" aria-expanded="false" aria-controls="menu-collapseSix"> <div class="fui-title fui-title-shape fui-title-shape--end fui-title-shape--primary-50"> <h2 class="mb-0 fui-fs-16 fw-bold ps-3"> Shapes </h2> <div class="position-relative pe-3 pe-none"> <div class="fui-line-shape bg-primary bg-opacity-50"></div> <div class="position-absolute end-0 me-1 bottom-0 fui-skew-x-n-1 d-flex gap-1"> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> </div> </div> </div> </div> </div> <div id="menu-collapseSix" class="accordion-collapse collapse"> <div class="accordion-body pb-0"> <div class="position-relative"> <span class="fui-triangle-t-8 text-primary text-opacity-75 position-absolute bottom-100 end-0 me-5 pe-none"></span> <div class="p-3 fui-all-corner fui-border-1 fui-border-primary-50" fui-corner fui-border> <ul class="fui-list-style-none p-0 m-0 d-flex flex-column gap-2"> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Getting Started </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Customization </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Credits </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Changelog </span> <i class="bi bi-chevron-right"></i> </a> </li> </ul> </div> <span class="fui-triangle-tl-12 text-primary text-opacity-25 position-absolute top-0 start-0 pe-none"></span> <span class="fui-triangle-tr-12 text-primary text-opacity-25 position-absolute top-0 end-0 pe-none"></span> <span class="fui-triangle-br-12 text-primary text-opacity-25 position-absolute bottom-0 end-0 pe-none"></span> <span class="fui-triangle-bl-12 text-primary text-opacity-25 position-absolute bottom-0 start-0 pe-none"></span> </div> </div> </div> </div> <div class="accordion-item mb-4"> <div class="accordion-header"> <div class="accordion-button fui-accordion-button collapsed d-block fui-cursor-pointer" data-bs-toggle="collapse" data-bs-target="#menu-collapseSeven" aria-expanded="false" aria-controls="menu-collapseSeven"> <div class="fui-title fui-title-shape fui-title-shape--end fui-title-shape--primary-50"> <h2 class="mb-0 fui-fs-16 fw-bold ps-3"> Utilities </h2> <div class="position-relative pe-3 pe-none"> <div class="fui-line-shape bg-primary bg-opacity-50"></div> <div class="position-absolute end-0 me-1 bottom-0 fui-skew-x-n-1 d-flex gap-1"> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> <span class="d-inline-block fui-h-8 fui-w-5 bg-warning bg-opacity-75"></span> </div> </div> </div> </div> </div> <div id="menu-collapseSeven" class="accordion-collapse collapse"> <div class="accordion-body pb-0"> <div class="position-relative"> <span class="fui-triangle-t-8 text-primary text-opacity-75 position-absolute bottom-100 end-0 me-5 pe-none"></span> <div class="p-3 fui-all-corner fui-border-1 fui-border-primary-50" fui-corner fui-border> <ul class="fui-list-style-none p-0 m-0 d-flex flex-column gap-2"> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Getting Started </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10"> <span> Customization </span> <i class="bi bi-chevron-right"></i> </a> </li> <li> <a href="#!" class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10">