doc-fui-ds
Version:
Doc
523 lines (488 loc) • 41.1 kB
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 -->
<title>FUI Design System - Futuristic User Interface / UI</title>
<!-- Description -->
<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">
<!-- Favicon -->
<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" />
<!-- Bootstrap -->
<link rel="stylesheet" href="/assets/css/bootstrap/bootstrap.css">
<!-- Bootstrap icons -->
<link rel="stylesheet" href="/assets/css/bootstrap/bootstrap-icons.css">
<!-- Code color highliter -->
<link rel="stylesheet" href="/assets/css/atom-one-dark.css">
<!-- FUI -->
<link rel="stylesheet" href="/assets/css/fui.css">
</head>
<body class="fui-bg-gradient-grid-dark fui-bg-attachment-fixed overflow-hidden">
<section id="header"></section>
<main class="position-xl-fixed fui-top-0 fui-bottom-0 fui-end-0 p-3 pt-0 pt-xl-3 pe-xl-3 ps-xl-0 fui-main">
<div class="row gx-0 gy-3 h-100">
<div class="col-xl-9 col-xxl-10">
<!-- Main content start-->
<div class="position-relative h-100 border border-primary border-opacity-50 p-4 pe-2 pe-md-4">
<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>
<div class="fui-main-content overflow-y-auto scroll-smooth pe-3 ps-md-3 pt-md-2 pb-md-3">
<section class="position-relative mb-5" id="cards">
<!-- Heading start-->
<div class="position-relative mb-3">
<h2 class="fs-2">Cards</h2>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
</div>
<!-- Heading end-->
<p class="fui-fs-15 fw-light mb-2">
Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
</p>
<p class="fui-fs-15 fw-light mb-2">
<a href="#!" class="text-white">Bootstrap Cards documentation <i class="bi bi-box-arrow-up-right text-warning"></i></a>
</p>
</section>
<section class="position-relative mb-5" id="about">
<!-- Heading start-->
<div class="position-relative mb-3">
<h2 class="fs-4">About</h2>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
</div>
<!-- Heading end-->
<p class="fui-fs-15 fw-light mb-2">
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
</p>
</section>
<section class="position-relative mb-5" id="example">
<!-- Heading start-->
<div class="position-relative mb-3">
<h2 class="fs-4">Example</h2>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
</div>
<!-- Heading end-->
<p class="fui-fs-15 fw-light mb-3">
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed.
</p>
<p class="fui-fs-15 fw-light mb-3">
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.
</p>
<!-- Code & Preview section start -->
<section class="pt-1">
<div class="fui-coding position-relative mt-3">
<div class="fui-coding-nav bg-primary bg-opacity-10 fui-all-corner-28 fui-border-1 fui-border-primary-25 p-2 ms-5" fui-corner fui-border>
<ul class="nav nav-pills mx-1" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link fui-all-corner-20 px-4 text-nowrap active" id="pills-preview-tab" data-bs-toggle="pill" data-bs-target="#pills-preview" fui-corner>
<span>
<img src="/assets/img/icon-white-eye.svg" alt="eye icon " />
</span>
<span>Preview</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fui-all-corner-20 px-4 text-nowrap" id="pills-FUI-tab" data-bs-toggle="pill" data-bs-target="#pills-FUI" fui-corner>
<span>
<img src="/assets/img/icon-white-fui.svg" alt="FUI white logo icon " />
</span>
<span>FUI</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fui-all-corner-20 px-4 text-nowrap" id="pills-bootstrap-tab" data-bs-toggle="pill" data-bs-target="#pills-bootstrap" fui-corner>
<span>
<img src="/assets/img/icon-white-bootstrap.svg" alt="Bootstrap white logo icon " />
</span>
<span>Bootstrap</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fui-all-corner-20 px-4 text-nowrap" id="pills-tailwind-tab" data-bs-toggle="pill" data-bs-target="#pills-tailwind" fui-corner>
<span>
<img src="/assets/img/icon-white-tailwind.svg" alt="taileind white logo icon " />
</span>
<span>Tailwind</span>
</button>
</li>
</ul>
</div>
<div class="tab-content fui-coding-body p-4 pt-5 fui-tr-12 fui-br-12 fui-bl-12 fui-t-34 fui-border-1 fui-border-primary-25 bg-secondary bg-opacity-75 " id="pills-tabContent" fui-clip-border>
<!-- Preview start -->
<div class="tab-pane fade pt-2 show active" id="pills-preview" role="tabpanel" aria-labelledby="pills-preview-tab" tabindex="0">
<!--Preview code start-->
<div class="position-relative d-inline-block">
<span class="position-absolute z-1 top-0 start-0 fui-size-8 border border-2 border-white border-opacity-75 border-end-0 border-bottom-0 pe-none"></span>
<span class="position-absolute z-1 top-0 end-0 fui-size-8 border border-2 border-white border-opacity-75 border-start-0 border-bottom-0 pe-none"></span>
<button type="button" class="btn bg-primary bg-opacity-50 fui-hover-bg-primary-75 border-0 rounded-0 fui-all-corner-0 fui-border-1 fui-border-white-50 fui-b-clip-x fui-b-extend-35 fui-b-7 text-white fw-bold fui-t-0 px-4" fui-clip-border>
<span class="d-inline-flex pb-2">Primary</span>
</button>
<span class="fui-shap-trapezoid-t-4 fui-trapezoid-w-64px text-white position-absolute bottom-0 start-50 translate-middle-x"></span>
<span class="position-absolute z-1 bottom-0 start-0 fui-size-8 border border-2 border-white border-opacity-75 border-end-0 border-top-0 pe-none"></span>
<span class="position-absolute z-1 bottom-0 end-0 fui-size-8 border border-2 border-white border-opacity-75 border-start-0 border-top-0 pe-none"></span>
</div>
<!--Preview code end-->
</div>
<!-- Preview end -->
<!-- FUI code start -->
<div class="tab-pane fade" id="pills-FUI" role="tabpanel" aria-labelledby="pills-FUI-tab" tabindex="0">
<!-- Copy code button start-->
<span onclick="copyCode('fui-btn-1', this)" class="position-absolute top-0 end-0 mx-4 my-3 fui-fs-14">
<span class="fui-cursor-pointer"><i class="bi bi-clipboard"></i> Copy</span>
</span>
<!-- Copy code button end-->
<pre class="mb-0 fui-fs-14"><code id="fui-btn-1" class="bg-transparent text-white"></code></pre>
<template id="html-fui-btn-1">
<div class="position-relative d-inline-block">
<span class="position-absolute z-1 top-0 start-0 fui-size-8 border border-2 border-white border-opacity-75 border-end-0 border-bottom-0 pe-none"></span>
<span class="position-absolute z-1 top-0 end-0 fui-size-8 border border-2 border-white border-opacity-75 border-start-0 border-bottom-0 pe-none"></span>
<button type="button" class="btn bg-primary bg-opacity-50 fui-hover-bg-primary-75 border-0 rounded-0 fui-all-corner-0 fui-border-1 fui-border-white-50 fui-b-clip-x fui-b-extend-35 fui-b-7 text-white fw-bold fui-t-0 px-4" fui-clip-border>
<span class="d-inline-flex pb-2">FUI Button</span>
</button>
<span class="fui-shap-trapezoid-t-4 fui-trapezoid-w-64px text-white position-absolute bottom-0 start-50 translate-middle-x"></span>
<span class="position-absolute z-1 bottom-0 start-0 fui-size-8 border border-2 border-white border-opacity-75 border-end-0 border-top-0 pe-none"></span>
<span class="position-absolute z-1 bottom-0 end-0 fui-size-8 border border-2 border-white border-opacity-75 border-start-0 border-top-0 pe-none"></span>
</div>
</template>
</div>
<!-- FUI code end -->
<!-- Bootsrtap code start -->
<div class="tab-pane fade" id="pills-bootstrap" role="tabpanel" aria-labelledby="pills-bootstrap-tab" tabindex="0">
<!-- Copy code button start-->
<span onclick="copyCode('fui-bootstrap-btn-1', this)" class="position-absolute top-0 end-0 mx-4 my-3 fui-fs-14">
<span class="fui-cursor-pointer"><i class="bi bi-clipboard"></i> Copy</span>
</span>
<!-- Copy code button end-->
<pre class="mb-0 fui-fs-14"><code id="fui-bootstrap-btn-1" class="bg-transparent text-white"></code></pre>
<template id="html-fui-bootstrap-btn-1">
<div class="position-relative d-inline-block">
<span class="position-absolute z-1 top-0 start-0 fui-size-8 border border-2 border-white border-opacity-75 border-end-0 border-bottom-0 pe-none"></span>
<span class="position-absolute z-1 top-0 end-0 fui-size-8 border border-2 border-white border-opacity-75 border-start-0 border-bottom-0 pe-none"></span>
<button type="button" class="btn bg-primary bg-opacity-50 fui-hover-bg-primary-75 border-0 rounded-0 fui-all-corner-0 fui-border-1 fui-border-white-50 fui-b-clip-x fui-b-extend-35 fui-b-7 text-white fw-bold fui-t-0 px-4" fui-clip-border>
<span class="d-inline-flex pb-2">FUI Bootstrap Button</span>
</button>
<span class="fui-shap-trapezoid-t-4 fui-trapezoid-w-64px text-white position-absolute bottom-0 start-50 translate-middle-x"></span>
<span class="position-absolute z-1 bottom-0 start-0 fui-size-8 border border-2 border-white border-opacity-75 border-end-0 border-top-0 pe-none"></span>
<span class="position-absolute z-1 bottom-0 end-0 fui-size-8 border border-2 border-white border-opacity-75 border-start-0 border-top-0 pe-none"></span>
</div>
</template>
</div>
<!-- Bootsrtap code end -->
<!-- tailwindcss code start -->
<div class="tab-pane fade" id="pills-tailwind" role="tabpanel" aria-labelledby="pills-tailwind-tab" tabindex="0">
<!-- Copy code button start-->
<span onclick="copyCode('fui-tailwind-btn-1', this)" class="position-absolute top-0 end-0 mx-4 my-3 fui-fs-14" >
<span class="fui-cursor-pointer"><i class="bi bi-clipboard"></i> Copy</span>
</span>
<!-- Copy code button end-->
<pre class="mb-0 fui-fs-14"><code id="fui-tailwind-btn-1" class="bg-transparent text-white"></code></pre>
<template id="html-fui-tailwind-btn-1">
<div class="position-relative d-inline-block">
<span class="position-absolute z-1 top-0 start-0 fui-size-8 border border-2 border-white border-opacity-75 border-end-0 border-bottom-0 pe-none"></span>
<span class="position-absolute z-1 top-0 end-0 fui-size-8 border border-2 border-white border-opacity-75 border-start-0 border-bottom-0 pe-none"></span>
<button type="button" class="btn bg-primary bg-opacity-50 fui-hover-bg-primary-75 border-0 rounded-0 fui-all-corner-0 fui-border-1 fui-border-white-50 fui-b-clip-x fui-b-extend-35 fui-b-7 text-white fw-bold fui-t-0 px-4" fui-clip-border>
<span class="d-inline-flex pb-2">FUI Tailwind Button</span>
</button>
<span class="fui-shap-trapezoid-t-4 fui-trapezoid-w-64px text-white position-absolute bottom-0 start-50 translate-middle-x"></span>
<span class="position-absolute z-1 bottom-0 start-0 fui-size-8 border border-2 border-white border-opacity-75 border-end-0 border-top-0 pe-none"></span>
<span class="position-absolute z-1 bottom-0 end-0 fui-size-8 border border-2 border-white border-opacity-75 border-start-0 border-top-0 pe-none"></span>
</div>
</template>
</div>
<!-- tailwindcss code end -->
</div>
</div>
</section>
<!-- Code & Preview section end -->
</section>
<section class="position-relative mb-2" id="contentTypes">
<!-- Heading start-->
<div class="position-relative mb-3">
<h2 class="fs-4">Content types</h2>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
</div>
<!-- Heading end-->
<p class="fui-fs-15 fw-light mb-2">
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported.
</p>
</section>
</div>
</div>
<!-- Main content end-->
</div>
<div class="col-xl-3 col-xxl-2">
<!-- On this page start-->
<div class="fui-main-page-content position-relative border border-primary border-opacity-50 border-start-0 d-none d-xl-block py-3 ps-3 pe-1">
<span class="position-absolute fui-top-n-1 fui-start-0 fui-size-8 border-top border-warning border-opacity-75 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>
<span class="position-absolute fui-bottom-n-9 fui-start-n-1 fui-size-8 border-start border-warning border-opacity-75 pe-none"></span>
<div class="fui-title fui-title-shape fui-title-shape--end fui-title-shape--primary-50 pe-2">
<h2 class="mb-0 fui-fs-18">
On this page
</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>
<!-- On this page content start-->
<div class="fui-main-page-content-nav py-3 pe-2 overflow-x-hidden overflow-y-auto">
<div class="row gy-3">
<div class="col-12">
<div class="position-relative">
<a href="#about" class="text-white text-decoration-none fui-sub-nav-link">
<h3 class="fui-fs-16 fw-bold">About</h3>
</a>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
</div>
</div>
<div class="col-12">
<div class="position-relative">
<a href="#example" class="text-white text-decoration-none fui-sub-nav-link">
<h3 class="fui-fs-16 fw-bold">Example</h3>
</a>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
</div>
</div>
<div class="col-12">
<div class="position-relative">
<a href="#contentTypes" class="text-white text-decoration-none fui-sub-nav-link">
<h3 class="fui-fs-16 fw-bold">Content types</h3>
</a>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
<ul class="fui-list-style-none ps-3 mt-2">
<li class="position-relative ps-3">
<span class="position-absolute start-0 top-0 mt-2 fui-size-8 fui-rotate-1 bg-primary bg-opacity-75"></span>
<a href="#!" class="text-info text-decoration-none fui-fs-14 fui-hover-text-primary fui-sub-nav-link">
Titles, text, and links
</a>
</li>
<li class="position-relative ps-3">
<span class="position-absolute start-0 top-0 mt-2 fui-size-8 fui-rotate-1 bg-primary bg-opacity-75"></span>
<a href="#!" class="text-info text-decoration-none fui-fs-14 fui-hover-text-primary fui-sub-nav-link">
Images
</a>
</li>
<li class="position-relative ps-3">
<span class="position-absolute start-0 top-0 mt-2 fui-size-8 fui-rotate-1 bg-primary bg-opacity-75"></span>
<a href="#!" class="text-info text-decoration-none fui-fs-14 fui-hover-text-primary fui-sub-nav-link">
List groups
</a>
</li>
<li class="position-relative ps-3">
<span class="position-absolute start-0 top-0 mt-2 fui-size-8 fui-rotate-1 bg-primary bg-opacity-75"></span>
<a href="#!" class="text-info text-decoration-none fui-fs-14 fui-hover-text-primary fui-sub-nav-link">
Kitchen sink
</a>
</li>
<li class="position-relative ps-3">
<span class="position-absolute start-0 top-0 mt-2 fui-size-8 fui-rotate-1 bg-primary bg-opacity-75"></span>
<a href="#!" class="text-info text-decoration-none fui-fs-14 fui-hover-text-primary fui-sub-nav-link">
Header and footer
</a>
</li>
</ul>
</div>
</div>
<div class="col-12">
<div class="position-relative">
<a href="#!" class="text-white text-decoration-none fui-sub-nav-link">
<h3 class="fui-fs-16 fw-bold">Sizing</h3>
</a>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
<ul class="fui-list-style-none ps-3 mt-2">
<li class="position-relative ps-3">
<span class="position-absolute start-0 top-0 mt-2 fui-size-8 fui-rotate-1 bg-primary bg-opacity-75"></span>
<a href="#!" class="text-info text-decoration-none fui-fs-14 fui-hover-text-primary fui-sub-nav-link">
Using grid markup
</a>
</li>
<li class="position-relative ps-3">
<span class="position-absolute start-0 top-0 mt-2 fui-size-8 fui-rotate-1 bg-primary bg-opacity-75"></span>
<a href="#!" class="text-info text-decoration-none fui-fs-14 fui-hover-text-primary fui-sub-nav-link">
Using utilities
</a>
</li>
<li class="position-relative ps-3">
<span class="position-absolute start-0 top-0 mt-2 fui-size-8 fui-rotate-1 bg-primary bg-opacity-75"></span>
<a href="#!" class="text-info text-decoration-none fui-fs-14 fui-hover-text-primary fui-sub-nav-link">
Using custom CSS
</a>
</li>
</ul>
</div>
</div>
<div class="col-12">
<div class="position-relative">
<a href="#!" class="text-white text-decoration-none fui-sub-nav-link">
<h3 class="fui-fs-16 fw-bold">Text alignment</h3>
</a>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
</div>
</div>
<div class="col-12">
<div class="position-relative">
<a href="#!" class="text-white text-decoration-none fui-sub-nav-link">
<h3 class="fui-fs-16 fw-bold">Images</h3>
</a>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
<ul class="fui-list-style-none ps-3 mt-2">
<li class="position-relative ps-3">
<span class="position-absolute start-0 top-0 mt-2 fui-size-8 fui-rotate-1 bg-primary bg-opacity-75"></span>
<a href="#!" class="text-info text-decoration-none fui-fs-14 fui-hover-text-primary fui-sub-nav-link">
Image caps
</a>
</li>
<li class="position-relative ps-3">
<span class="position-absolute start-0 top-0 mt-2 fui-size-8 fui-rotate-1 bg-primary bg-opacity-75"></span>
<a href="#!" class="text-info text-decoration-none fui-fs-14 fui-hover-text-primary fui-sub-nav-link">
Image overlays
</a>
</li>
</ul>
</div>
</div>
<div class="col-12">
<div class="position-relative">
<a href="#!" class="text-white text-decoration-none fui-sub-nav-link">
<h3 class="fui-fs-16 fw-bold">Horizontal</h3>
</a>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
</div>
</div>
<div class="col-12">
<div class="position-relative">
<a href="#!" class="text-white text-decoration-none fui-sub-nav-link">
<h3 class="fui-fs-16 fw-bold">Card styles</h3>
</a>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
</div>
</div>
<div class="col-12">
<div class="position-relative">
<a href="#!" class="text-white text-decoration-none fui-sub-nav-link">
<h3 class="fui-fs-16 fw-bold">Card layout</h3>
</a>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
</div>
</div>
<div class="col-12">
<div class="position-relative">
<a href="#!" class="text-white text-decoration-none fui-sub-nav-link">
<h3 class="fui-fs-16 fw-bold">Sass variables</h3>
</a>
<div class="fui-w-70 border-bottom border-white border-opacity-25 d-flex justify-content-between">
<span class="d-inline-flex fui-w-16 fui-h-2 bg-warning position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
</div>
</div>
</div>
</div>
<!-- On this page content end-->
</div>
<!-- On this page end-->
<!-- Next/Pre button start-->
<div class="fui- pt-xl-2 ps-xl-2">
<div class="ms-xl-1 mt-xl-1">
<div class="row g-2">
<div class="col">
<div class="position-relative">
<span class="position-absolute z-1 top-0 start-0 fui-size-8 border border-2 border-white border-opacity-25 border-end-0 border-bottom-0 pe-none"></span>
<span class="position-absolute z-1 top-0 end-0 fui-size-8 border border-2 border-white border-opacity-25 border-start-0 border-bottom-0 pe-none"></span>
<button type="button" class="btn bg-transparent fui-hover-bg-primary-75 w-100 border-0 rounded-0 fui-all-corner-0 fui-border-1 fui-border-white-50 fui-b-clip-x fui-b-extend-35 fui-b-7 text-white fw-bold" fui-clip-border>
<i class="bi bi-chevron-left fui-fs-13"></i>
<span class="d-inline-flex pb-2 fui-fs-13">Buttons</span>
</button>
<span class="fui-shap-trapezoid-t-4 fui-trapezoid-w-64px text-white position-absolute bottom-0 start-50 translate-middle-x"></span>
<span class="position-absolute z-1 bottom-0 start-0 fui-size-8 border border-2 border-white border-opacity-25 border-end-0 border-top-0 pe-none"></span>
<span class="position-absolute z-1 bottom-0 end-0 fui-size-8 border border-2 border-white border-opacity-25 border-start-0 border-top-0 pe-none"></span>
</div>
</div>
<div class="col">
<div class="position-relative">
<span class="position-absolute z-1 top-0 start-0 fui-size-8 border border-2 border-white border-opacity-75 border-end-0 border-bottom-0 pe-none"></span>
<span class="position-absolute z-1 top-0 end-0 fui-size-8 border border-2 border-white border-opacity-75 border-start-0 border-bottom-0 pe-none"></span>
<button type="button" class="btn bg-primary bg-opacity-50 fui-hover-bg-primary-75 w-100 border-0 rounded-0 fui-all-corner-0 fui-border-1 fui-border-white-50 fui-b-clip-x fui-b-extend-35 fui-b-7 text-white fw-bold" fui-clip-border>
<span class="d-inline-flex pb-2 fui-fs-13">Cards</span>
<i class="bi bi-chevron-right fui-fs-13"></i>
</button>
<span class="fui-shap-trapezoid-t-4 fui-trapezoid-w-64px text-white position-absolute bottom-0 start-50 translate-middle-x"></span>
<span class="position-absolute z-1 bottom-0 start-0 fui-size-8 border border-2 border-white border-opacity-75 border-end-0 border-top-0 pe-none"></span>
<span class="position-absolute z-1 bottom-0 end-0 fui-size-8 border border-2 border-white border-opacity-75 border-start-0 border-top-0 pe-none"></span>
</div>
</div>
</div>
</div>
</div>
<!-- Next/Pre button end-->
</div>
</div>
</main>
<!--JSS & CSS library-->
<!-- Bootstrap bundel -->
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<!-- Bootstrap tooltips -->
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
<!-- Code highlighter -->
<script src="/assets/js/code-highlight.js"></script>
<!-- Code editor -->
<script src="/assets/js/fui/code-editior.js"></script>
<!-- include js -->
<script src="/assets/js/fui/include.js"></script>
<script>
includeHTML('header', '/header.html'); // Loads 'header.html' into #header
</script>
</body>
</html>