doc-fui-ds
Version:
Doc
502 lines (456 loc) • 38.8 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>Test</title>
<!-- Description -->
<meta name="description" content="test"/>
<meta name="author" content="Mohammad Azad">
<!-- Favicon -->
<link rel="shortcut icon" href="assets/img/icon.svg">
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap.css">
<!-- Bootstrap icons -->
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap-icons.css">
<!-- Augmented ui -->
<!-- <link rel="stylesheet" href="/node_modules/augmented-ui/augmented-ui.min.css"> -->
<!-- FUI -->
<link rel="stylesheet" href="assets/css/fui.css">
</head>
<body class="fui-bg-gradient-grid-dark fui-bg-attachment-fixed overflow-x-hidden">
<!-- Clip Center with Inlay & Border start -->
<div class="container py-5">
<h2 class="fs-1">Clip Center with Inlay & Border</h2>
<h2 class="fs-4">Initialize Center, Inlay & Border with attribute (<code>fui-clip-both</code>)</h2>
<h2 class="fs-4 mt-4">Add Clip Center (<code>.fui-t-clip-x | .fui-r-clip-y | .fui-b-clip-x | .fui-l-clip-y | fui-all-clip</code>)</h2>
<div class="row mt-0 g-4">
<div class="col-lg-3">
<div class="fui-t-clip-x bg-primary" fui-clip-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-both] .fui-t-clip-x</span></div>
</div>
<div class="col-lg-3">
<div class="fui-r-clip-y bg-primary" fui-clip-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-both] .fui-r-clip-y</span></div>
</div>
<div class="col-lg-3">
<div class="fui-b-clip-x bg-primary" fui-clip-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-both] .fui-b-clip-x</span></div>
</div>
<div class="col-lg-3">
<div class="fui-l-clip-y bg-primary" fui-clip-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-both] .fui-l-clip-y</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-clip bg-primary" fui-clip-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-both] .fui-all-clip</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-clip fui-all-corner bg-primary" fui-clip-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-clip-both] .fui-all-clip .fui-all-corner</span></div>
</div>
</div>
<h2 class="fs-4 mt-5">Sizing center extend (<code>.fui-t-extend-* | .fui-r-extend-* | .fui-b-extend-* | .fui-l-extend-* | fui-extend-x-* | fui-extend-y-* | fui-all-extend-*</code>)</h2>
<h2 class="fs-4 mt-2">Sizing center depth (<code>.fui-t-* | .fui-r-* | .fui-b-* | .fui-l-* | fui-x-* | fui-y-* | fui-all-*</code>)</h2>
<div class="row mt-0 g-4">
<div class="col-lg-3">
<div class="fui-t-clip-x fui-t-extend-25 fui-inlay-5 bg-primary" fui-clip-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-both] .fui-t-clip-x .fui-t-extend-25</span></div>
</div>
<div class="col-lg-3">
<div class="fui-t-clip-x fui-t-25 fui-inlay-5 bg-primary" fui-clip-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-both] .fui-t-clip-x .fui-t-25</span></div>
</div>
<div class="col-lg-3">
<div class="fui-t-clip-x fui-t-extend-75 fui-t-40 fui-inlay-5 bg-primary" fui-clip-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-both] .fui-t-clip-x .fui-t-extend-75 .fui-t-40</span></div>
</div>
</div>
</div>
<!-- Clip center with Inlay & Border end -->
<!-- Clip Center with Border start -->
<div class="container py-5">
<h2 class="fs-1">Clip Center with Border</h2>
<h2 class="fs-4">Initialize Center & Border with attribute (<code>fui-clip-border</code>)</h2>
<h2 class="fs-4 mt-4">Add Clip Center (<code>.fui-t-clip-x | .fui-r-clip-y | .fui-b-clip-x | .fui-l-clip-y | fui-all-clip</code>)</h2>
<div class="row mt-0 g-4">
<div class="col-lg-3">
<div class="fui-t-clip-x fui-inlay-5 bg-primary" fui-clip-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-border] .fui-t-clip-x</span></div>
</div>
<div class="col-lg-3">
<div class="fui-r-clip-y fui-inlay-5 bg-primary" fui-clip-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-border] .fui-r-clip-y</span></div>
</div>
<div class="col-lg-3">
<div class="fui-b-clip-x fui-inlay-5 bg-primary" fui-clip-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-border] .fui-b-clip-x</span></div>
</div>
<div class="col-lg-3">
<div class="fui-l-clip-y fui-inlay-5 bg-primary" fui-clip-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-border] .fui-l-clip-y</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-clip fui-inlay-5 bg-primary" fui-clip-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-border] .fui-all-clip</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-clip fui-all-corner fui-inlay-5 bg-primary" fui-clip-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-clip-border] .fui-all-clip .fui-all-corner</span></div>
</div>
</div>
<h2 class="fs-4 mt-5">Sizing center extend (<code>.fui-t-extend-* | .fui-r-extend-* | .fui-b-extend-* | .fui-l-extend-* | fui-extend-x-* | fui-extend-y-* | fui-all-extend-*</code>)</h2>
<h2 class="fs-4 mt-2">Sizing center depth (<code>.fui-t-* | .fui-r-* | .fui-b-* | .fui-l-* | fui-x-* | fui-y-* | fui-all-*</code>)</h2>
<div class="row mt-0 g-4">
<div class="col-lg-3">
<div class="fui-t-clip-x fui-t-extend-25 fui-inlay-5 bg-primary" fui-clip-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-border] .fui-t-clip-x .fui-t-extend-25</span></div>
</div>
<div class="col-lg-3">
<div class="fui-t-clip-x fui-t-25 fui-inlay-5 bg-primary" fui-clip-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-border] .fui-t-clip-x .fui-t-25</span></div>
</div>
<div class="col-lg-3">
<div class="fui-t-clip-x fui-t-extend-75 fui-t-40 fui-inlay-5 bg-primary" fui-clip-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-border] .fui-t-clip-x .fui-t-extend-75 .fui-t-40</span></div>
</div>
</div>
</div>
<!-- Clip center with Border end -->
<!-- Clip Center with Inlay start -->
<div class="container py-5">
<h2 class="fs-1">Clip Center with Inlay</h2>
<h2 class="fs-4">Initialize Center & Inlay with attribute (<code>fui-clip-inlay</code>)</h2>
<h2 class="fs-4 mt-4">Add Clip Center (<code>.fui-t-clip-x | .fui-r-clip-y | .fui-b-clip-x | .fui-l-clip-y | fui-all-clip</code>)</h2>
<div class="row mt-0 g-4">
<div class="col-lg-3">
<div class="fui-t-clip-x bg-primary" fui-clip-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-inlay] .fui-t-clip-x</span></div>
</div>
<div class="col-lg-3">
<div class="fui-r-clip-y bg-primary" fui-clip-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-inlay] .fui-r-clip-y</span></div>
</div>
<div class="col-lg-3">
<div class="fui-b-clip-x bg-primary" fui-clip-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-inlay] .fui-b-clip-x</span></div>
</div>
<div class="col-lg-3">
<div class="fui-l-clip-y bg-primary" fui-clip-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-inlay] .fui-l-clip-y</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-clip bg-primary" fui-clip-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-inlay] .fui-all-clip</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-clip fui-all-corner bg-primary" fui-clip-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-clip-inlay] .fui-all-clip .fui-all-corner</span></div>
</div>
</div>
<h2 class="fs-4 mt-5">Sizing center extend (<code>.fui-t-extend-* | .fui-r-extend-* | .fui-b-extend-* | .fui-l-extend-* | fui-extend-x-* | fui-extend-y-* | fui-all-extend-*</code>)</h2>
<h2 class="fs-4 mt-2">Sizing center depth (<code>.fui-t-* | .fui-r-* | .fui-b-* | .fui-l-* | fui-x-* | fui-y-* | fui-all-*</code>)</h2>
<div class="row mt-0 g-4">
<div class="col-lg-3">
<div class="fui-t-clip-x fui-t-extend-25 bg-primary" fui-clip-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-inlay] .fui-t-clip-x .fui-t-extend-25</span></div>
</div>
<div class="col-lg-3">
<div class="fui-t-clip-x fui-t-25 bg-primary" fui-clip-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-inlay] .fui-t-clip-x .fui-t-25</span></div>
</div>
<div class="col-lg-3">
<div class="fui-t-clip-x fui-t-extend-75 fui-t-40 bg-primary" fui-clip-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip-inlay] .fui-t-clip-x .fui-t-extend-75 .fui-t-40</span></div>
</div>
</div>
</div>
<!-- Clip center with Inlay end -->
<!-- Clip with Center start -->
<div class="container py-5">
<h2 class="fs-1">Clip Center</h2>
<h2 class="fs-4">Initialize Center with attribute (<code>fui-center</code>)</h2>
<h2 class="fs-4 mt-4">Add Clip Center (<code>.fui-t-clip-x | .fui-r-clip-y | .fui-b-clip-x | .fui-l-clip-y | fui-all-clip</code>)</h2>
<div class="row mt-0 g-4">
<div class="col-lg-3">
<div class="fui-t-clip-x bg-primary" fui-clip style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip] .fui-t-clip-x</span></div>
</div>
<div class="col-lg-3">
<div class="fui-r-clip-y bg-primary" fui-clip style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip] .fui-r-clip-y</span></div>
</div>
<div class="col-lg-3">
<div class="fui-b-clip-x bg-primary" fui-clip style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip] .fui-b-clip-x</span></div>
</div>
<div class="col-lg-3">
<div class="fui-l-clip-y bg-primary" fui-clip style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip] .fui-l-clip-y</span></div>
</div>
</div>
<h2 class="fs-4 mt-5">Sizing center extend (<code>.fui-t-extend-* | .fui-r-extend-* | .fui-b-extend-* | .fui-l-extend-* | fui-extend-x-* | fui-extend-y-* | fui-all-extend-*</code>)</h2>
<h2 class="fs-4 mt-2">Sizing center depth (<code>.fui-t-* | .fui-r-* | .fui-b-* | .fui-l-* | fui-x-* | fui-y-* | fui-all-*</code>)</h2>
<div class="row mt-0 g-4">
<div class="col-lg-3">
<div class="fui-t-clip-x fui-t-extend-25 bg-primary" fui-clip style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip] .fui-t-clip-x .fui-t-extend-25</span></div>
</div>
<div class="col-lg-3">
<div class="fui-t-clip-x fui-t-25 bg-primary" fui-clip style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip] .fui-t-clip-x .fui-t-25</span></div>
</div>
<div class="col-lg-3">
<div class="fui-t-clip-x fui-t-extend-75 fui-t-40 bg-primary" fui-clip style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip] .fui-t-clip-x .fui-t-extend-75 .fui-t-40</span></div>
</div>
</div>
<h2 class="fs-4 mt-5">All (<code>fui-all-clip fui-all-corner</code>)</h2>
<div class="row mt-0 g-4">
<div class="col-lg-3">
<div class="fui-all-clip bg-primary" fui-clip style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-clip] .fui-all-clip</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-clip fui-all-corner bg-primary" fui-clip style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-clip] .fui-all-clip .fui-all-corner</span></div>
</div>
</div>
</div>
<!-- Clip with Center end -->
<!-- Clip Corner with Border and inlay start -->
<div class="container py-5">
<h2 class="fs-1">Clip Corner with Border & Inlay</h2>
<h2 class="fs-4">Initialize Corner, Border, & Inlay with attribute (<code>fui-corner & fui-both</code>)</h2>
<h2 class="fs-4">Add Inlay Size (<code>.fui-inlay-*</code>)</h2>
<h2 class="fs-4">Add Clip Corner (<code>.fui-tl | .fui-tr | .fui-br | .fui-bl | .fui-all-corner</code>)</h2>
<div class="row mt-4">
<div class="col-lg-3">
<div class="fui-tl bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-both] .fui-tl</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tl fui-tr bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-both] .fui-tl .fui-tr</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tr fui-br fui-bl bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-both] .fui-tr .fui-br .fui-bl</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-both] .fui-all-corner</span></div>
</div>
</div>
<h2 class="fs-4 mt-5">Border Sizing (<code>.fui-all-corner-* | .fui-inlay-* | .fui-border-*</code>)</h2>
<div class="row mt-4">
<div class="col-lg-3">
<div class="fui-all-corner-30 bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-both] .fui-all-corner-30</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-10 bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-both] .fui-all-corner .fui-inlay-10</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-border-10 bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-both] .fui-all-corner .fui-border-10</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner-30 fui-inlay-10 fui-border-10 bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-both] .fui-all-corner-30 .fui-inlay-10 .fui-border-10</span></div>
</div>
</div>
<h2 class="fs-4 mt-5">Border Color (<code>.fui-inlay-bg-* | .fui-border-*</code>)</h2>
<div class="row g-4 mt-0">
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-primary fui-border-primary bg-info" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center text-dark">[fui-corner] [fui-both] .fui-all-corner .fui-inlay-bg-primary .fui-border-primary</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-secondary fui-border-secondary bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-both] .fui-all-corner .fui-inlay-bg-secondary .fui-border-secondary</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-warning fui-border-warning bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center text-dark">[fui-corner] [fui-both] .fui-all-corner .fui-inlay-bg-warning .fui-border-warning</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-success fui-border-success bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-both] .fui-all-corner .fui-inlay-bg-success .fui-border-success</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-danger fui-border-danger bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-both] .fui-all-corner .fui-inlay-bg-danger .fui-border-danger</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-black fui-border-black bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-both] .fui-all-corner .fui-inlay-bg-black .fui-border-black</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-white fui-border-white bg-primary" fui-corner fui-both style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center text-dark">[fui-corner] [fui-both] .fui-all-corner .fui-inlay-bg-white .fui-border-white</span></div>
</div>
</div>
</div>
<!-- Clip Corner with Border and inlay end -->
<!-- Clip Corner with Border start -->
<div class="container py-5">
<h2 class="fs-1">Clip Corner with Border</h2>
<h2 class="fs-4">Initialize Corner & Border with attribute (<code>fui-corner & fui-border</code>)</h2>
<h2 class="fs-4">Add Clip Corner (<code>.fui-tl | .fui-tr | .fui-br | .fui-bl | .fui-all-corner</code>)</h2>
<div class="row g-4 mt-0">
<div class="col-lg-3">
<div class="fui-tl bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-tl</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tl fui-tr bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-tl .fui-tr</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tr fui-br fui-bl bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-tr .fui-br .fui-bl</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-all-corner</span></div>
</div>
</div>
<h2 class="fs-4 mt-5">Border Sizing (<code>.fui-border-*</code>)</h2>
<div class="row g-4 mt-0">
<div class="col-lg-3">
<div class="fui-border-1 fui-tl bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-all-corner .fui-border-1</span></div>
</div>
<div class="col-lg-3">
<div class="fui-border-2 fui-tl fui-tr bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-all-corner .fui-border-2</span></div>
</div>
<div class="col-lg-3">
<div class="fui-border-3 fui-tr fui-br fui-bl bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-all-corner .fui-border-3</span></div>
</div>
<div class="col-lg-3">
<div class="fui-border-10 fui-all-corner bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-all-corner .fui-border-10</span></div>
</div>
</div>
<h2 class="fs-4 mt-5">Border Color (<code>.fui-border-*</code>)</h2>
<div class="row g-4 mt-0">
<div class="col-lg-3">
<div class="fui-all-corner fui-border-primary bg-info" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center text-dark">[fui-corner] [fui-border] .fui-all-corner .fui-border-primary</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-border-secondary bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-all-corner .fui-border-secondary</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-border-warning bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-all-corner .fui-border-warning</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-border-success bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-all-corner .fui-border-success</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-border-danger bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-all-corner .fui-border-danger</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-border-black bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-all-corner .fui-border-black</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-border-white bg-primary" fui-corner fui-border style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-border] .fui-all-corner .fui-border-white</span></div>
</div>
</div>
</div>
<!-- Clip Corner with Border end -->
<!-- Clip Corner with Inlay start -->
<div class="container py-5">
<h2 class="fs-1">Clip Corner with Inlay</h2>
<h2 class="fs-4">Initialize Corner & Inlay with attribute (<code>fui-corner & fui-inlay</code>)</h2>
<h2 class="fs-4">Add Inlay Size (<code>.fui-inlay-*</code>)</h2>
<h2 class="fs-4">Add Clip Corner (<code>.fui-tl | .fui-tr | .fui-br | .fui-bl | .fui-all-corner</code>)</h2>
<div class="row g-4 mt-0">
<div class="col-lg-3">
<div class="fui-tl bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] [fui-inlay] .fui-tl</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tl fui-tr bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] [fui-inlay] .fui-tl .fui-tr</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tr fui-br fui-bl bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-inlay] .fui-tr .fui-br .fui-bl</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] [fui-inlay] .fui-all-corner</span></div>
</div>
</div>
<h2 class="fs-4 mt-5">Inlay Sizing (<code>.fui-inlay-*</code>)</h2>
<div class="row g-4 mt-0 justify-content-center">
<div class="col-lg-3">
<div class="fui-inlay-1 fui-all-corner bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-inlay] .fui-inlay-1 .fui-all-corner</span></div>
</div>
<div class="col-lg-3">
<div class="fui-inlay-2 fui-all-corner bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-inlay] .fui-inlay-2 .fui-all-corner</span></div>
</div>
<div class="col-lg-3">
<div class="fui-inlay-3 fui-all-corner bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-inlay] .fui-inlay-3 .fui-all-corner</span></div>
</div>
<div class="col-lg-3">
<div class="fui-inlay-10 fui-all-corner bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-inlay] .fui-inlay-10 .fui-all-corner</span></div>
</div>
</div>
<h2 class="fs-4 mt-5">Inlay Color (<code>.fui-inlay-bg-*</code>)</h2>
<div class="row g-4 mt-0">
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-primary bg-info" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-inlay] .fui-all-corner .fui-inlay-bg-primary</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-secondary bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-inlay] .fui-all-corner .fui-inlay-bg-secondary</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-warning bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center text-dark">[fui-corner] [fui-inlay] .fui-all-corner .fui-inlay-bg-warning</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-success bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-inlay] .fui-all-corner .fui-inlay-bg-success</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-danger bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-inlay] .fui-all-corner .fui-inlay-bg-danger</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-black bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center">[fui-corner] [fui-inlay] .fui-all-corner .fui-inlay-bg-black</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner fui-inlay-bg-white bg-primary" fui-corner fui-inlay style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-4 text-center text-dark">[fui-corner] [fui-inlay] .fui-all-corner .fui-inlay-bg-white</span></div>
</div>
</div>
</div>
<!-- Clip Corner with Inlay end -->
<!-- Clip Corner start -->
<div class="container py-5">
<h2 class="fs-1">Clip Corner</h2>
<h2 class="fs-4">Initialize Corner with attribute (<code>fui-corner</code>)</h2>
<h2 class="fs-4">Add Clip Corner (<code>.fui-tl | .fui-tr | .fui-br | .fui-bl | .fui-all-corner</code>)</h2>
<div class="row g-4 mt-0">
<div class="col-lg-3">
<div class="fui-tl bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-tl</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tr bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-tr</span></div>
</div>
<div class="col-lg-3">
<div class="fui-br bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-br</span></div>
</div>
<div class="col-lg-3">
<div class="fui-bl bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-bl</span></div>
</div>
</div>
<div class="row g-4 mt-0">
<div class="col-lg-3">
<div class="fui-br fui-bl bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-br .fui-bl</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tl fui-tr bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-tl .fui-tr</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tr fui-br bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-tr .fui-br</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tl fui-bl bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-tl .fui-bl</span></div>
</div>
</div>
<div class="row g-4 mt-0">
<div class="col-lg-3">
<div class="fui-tr fui-br fui-bl bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-tr .fui-br .fui-bl</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tl fui-br fui-bl bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-tl .fui-br .fui-bl</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tl fui-tr fui-bl bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-tl .fui-tr .fui-bl</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tl fui-tr fui-br bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-tl .fui-tr .fui-br</span></div>
</div>
</div>
<div class="row g-4 mt-0 justify-content-center">
<div class="col-lg-3">
<div class="fui-tr fui-bl bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-tr .fui-bl</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tl fui-br bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-tl .fui-br</span></div>
</div>
<div class="col-lg-3">
<div class="fui-all-corner bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-all-corner</span></div>
</div>
</div>
<h2 class="fs-4 mt-5">Corner Sizing (<code>.fui-tl-* | .fui-tr-* | .fui-br-* | .fui-bl-* | .fui-all-corner-*</code>)</h2>
<div class="row g-4 mt-0">
<div class="col-lg-3">
<div class="fui-tl-50 bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-tl-50</span></div>
</div>
<div class="col-lg-3">
<div class="fui-tr-50 bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-tr-50</span></div>
</div>
<div class="col-lg-3">
<div class="fui-br-50 bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-br-50</span></div>
</div>
<div class="col-lg-3">
<div class="fui-bl-50 bg-primary" fui-corner style="height:200px"><span class="d-flex align-items-center justify-content-center h-100 p-3 text-center">[fui-corner] .fui-bl-50</span></div>
</div>
</div>
</div>
<!-- Clip Corner end -->
<!--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>
<!-- particles js -->
<script src="assets/plugins/particles/particles.js"></script>
<script src="assets/plugins/particles/app.js"></script>
</body>
</html>