doc-fui-ds
Version:
Doc
684 lines (669 loc) • 115 kB
HTML
<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">
<!-- Logo start -->
<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">DOCUMENT_</h1> -->
<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-3">
<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>
<!-- Search box start -->
<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>
<!-- Search box end -->
</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>
<!-- Logo end -->
<!-- Side Nav start -->
<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>
<!-- Side Nav content start -->
<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="index.html" class="text-decoration-none fui-nav-link">
<h2 class="mb-0 fui-fs-16 fw-bold d-flex align-items-center gap-1">
<i class="bi bi-chevron-right fui-fs-12 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 collapsed 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">
<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="internal.html"
class="text-white fui-fs-14 text-decoration-none d-flex align-items-center justify-content-between p-2 bg-primary bg-opacity-10 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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 fui-nav-link">
<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>
<d