11401 lines
779 KiB
HTML
11401 lines
779 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
|
|
<meta content="IE=edge" http-equiv="X-UA-Compatible">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<meta content="Multipurpose, super flexible, powerful, clean modern responsive bootstrap 5 admin template"
|
|
name="description">
|
|
<meta content="admin template, ki-admin admin template, dashboard template, flat admin template, responsive admin template, web app"
|
|
name="keywords">
|
|
<meta content="la-themes" name="author">
|
|
<link href="../assets/images/logo/favicon.png" rel="icon" type="image/x-icon">
|
|
<link href="../assets/images/logo/favicon.png" rel="shortcut icon" type="image/x-icon">
|
|
|
|
<title>Cheatsheet | ki-admin - Premium Admin Template</title>
|
|
|
|
<!--font-awesome-css-->
|
|
<link href="../assets/vendor/fontawesome/css/all.css" rel="stylesheet">
|
|
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com" rel="preconnect">
|
|
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
|
|
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<!-- tabler icons-->
|
|
<link href="../assets/vendor/tabler-icons/tabler-icons.css" rel="stylesheet" type="text/css">
|
|
|
|
<!--flag Icon css-->
|
|
<link href="../assets/vendor/flag-icons-master/flag-icon.css" rel="stylesheet" type="text/css">
|
|
|
|
<!-- Bootstrap css-->
|
|
<link href="../assets/vendor/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
|
|
|
|
<!-- prism css-->
|
|
<link href="../assets/vendor/prism/prism.min.css" rel="stylesheet" type="text/css">
|
|
|
|
<!-- simplebar css-->
|
|
<link href="../assets/vendor/simplebar/simplebar.css" rel="stylesheet" type="text/css">
|
|
|
|
<!-- toastify css-->
|
|
<link href="../assets/vendor/toastify/toastify.css" rel="stylesheet" type="text/css">
|
|
|
|
<!-- App css-->
|
|
<link href="../assets/css/style.css" rel="stylesheet" type="text/css">
|
|
|
|
<!-- Responsive css-->
|
|
<link href="../assets/css/responsive.css" rel="stylesheet" type="text/css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app-wrapper">
|
|
|
|
<div class="loader-wrapper">
|
|
<div class="loader_24"></div>
|
|
</div>
|
|
|
|
<!-- Menu Navigation starts -->
|
|
<nav>
|
|
<div class="app-logo">
|
|
<a class="logo d-inline-block" href="index.html">
|
|
<img alt="#" src="../assets/images/logo/1.png">
|
|
</a>
|
|
|
|
<span class="bg-light-primary toggle-semi-nav d-flex-center">
|
|
<i class="ti ti-chevron-right"></i>
|
|
</span>
|
|
|
|
<div class="d-flex align-items-center nav-profile p-3">
|
|
<span class="h-45 w-45 d-flex-center b-r-10 position-relative bg-danger m-auto">
|
|
<img alt="avatar" class="img-fluid b-r-10" src="../assets/images/avatar/woman.jpg">
|
|
<span class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
|
|
</span>
|
|
<div class="flex-grow-1 ps-2">
|
|
<h6 class="text-primary mb-0"> Ninfa Monaldo</h6>
|
|
<p class="text-muted f-s-12 mb-0">Web Developer</p>
|
|
</div>
|
|
|
|
|
|
<div class="dropdown profile-menu-dropdown">
|
|
<a aria-expanded="false" data-bs-auto-close="true" data-bs-placement="top" data-bs-toggle="dropdown"
|
|
role="button">
|
|
<i class="ti ti-settings fs-5"></i>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="dropdown-item">
|
|
<a class="f-w-500" href="profile.html" target="_blank">
|
|
<i class="ph-duotone ph-user-circle pe-1 f-s-20"></i> Profile Details
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a class="f-w-500" href="setting.html" target="_blank">
|
|
<i class="ph-duotone ph-gear pe-1 f-s-20"></i> Settings
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div>
|
|
<a class="f-w-500" href="cheatsheet.html#">
|
|
<i class="ph-duotone ph-detective pe-1 f-s-20"></i> Incognito
|
|
</a>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input form-check-primary" id="incognitoSwitch"
|
|
type="checkbox">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a class="mb-0 text-secondary f-w-500" href="sign_up.html" target="_blank">
|
|
<i class="ph-bold ph-plus pe-1 f-s-20"></i> Add account
|
|
</a>
|
|
</li>
|
|
|
|
<li class="app-divider-v dotted py-1"></li>
|
|
|
|
<li class="dropdown-item">
|
|
<a class="mb-0 text-danger" href="sign_in.html" target="_blank">
|
|
<i class="ph-duotone ph-sign-out pe-1 f-s-20"></i> Log Out
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="app-nav" id="app-simple-bar">
|
|
<ul class="main-nav p-0 mt-2">
|
|
<li class="menu-title">
|
|
<span>Dashboard</span>
|
|
</li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#dashboard">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#home"></use>
|
|
</svg>
|
|
dashboard
|
|
<span class="badge bg-danger badge-dashboard badge-notification ms-2">New</span>
|
|
|
|
</a>
|
|
<ul class="collapse" id="dashboard">
|
|
<li><a href="index.html">Ecommerce</a></li>
|
|
<li><a href="project_dashboard.html">Project</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#apps">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#stack"></use>
|
|
</svg>
|
|
Apps
|
|
</a>
|
|
<ul class="collapse" id="apps">
|
|
<li><a href="calendar.html">Calender</a></li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#Profile-page">
|
|
Profile
|
|
</a>
|
|
<ul class="collapse" id="Profile-page">
|
|
<li><a href="profile.html">Profile</a></li>
|
|
<li><a href="setting.html">Setting</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#projects-page">
|
|
Projects Page
|
|
</a>
|
|
<ul class="collapse" id="projects-page">
|
|
<li><a href="project_app.html">projects</a></li>
|
|
<li><a href="project_details.html">projects Details</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="to_do.html">To-Do</a></li>
|
|
<li><a href="team.html">Team</a></li>
|
|
<li><a href="api.html">API</a></li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#ticket-page">
|
|
Ticket
|
|
</a>
|
|
<ul class="collapse" id="ticket-page">
|
|
<li><a href="ticket.html">Ticket</a></li>
|
|
<li><a href="ticket_details.html">Ticket Details</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#email-page">
|
|
Email Page
|
|
</a>
|
|
<ul class="collapse" id="email-page">
|
|
<li><a href="email.html"> Email</a></li>
|
|
<li><a href="read_email.html">Read Email</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#e-shop">
|
|
E-shop
|
|
</a>
|
|
<ul class="collapse" id="e-shop">
|
|
<li><a href="cart.html">Cart</a></li>
|
|
<li><a href="product.html">Product</a></li>
|
|
<li><a href="add_product.html">Add Product</a></li>
|
|
<li><a href="product_details.html">Product-Details</a></li>
|
|
<li><a href="product_list.html">Product list</a></li>
|
|
<li><a href="orders.html">Orders</a></li>
|
|
<li><a href="orders_details.html">Orders Details</a></li>
|
|
<li><a href="orders_list.html">Orders List</a></li>
|
|
<li><a href="checkout.html">Check out</a></li>
|
|
<li><a href="wishlist.html">Wishlist</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="invoice.html">Invoice</a></li>
|
|
<li><a href="chat.html">Chat</a></li>
|
|
<li><a href="file_manager.html">File manager</a></li>
|
|
<li><a href="bookmark.html">Bookmark</a></li>
|
|
<li><a href="kanban_board.html">Kanban board</a></li>
|
|
<li><a href="timeline.html">Timeline</a></li>
|
|
<li><a href="faq.html">FAQS</a></li>
|
|
<li><a href="pricing.html">Pricing</a></li>
|
|
<li><a href="gallery.html">Gallery</a></li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#blog-page">
|
|
Blog Page
|
|
</a>
|
|
<ul class="collapse" id="blog-page">
|
|
<li><a href="blog.html">Blog</a></li>
|
|
<li><a href="blog_read_more.html">Blog Details</a></li>
|
|
<li><a href="add_blog.html">Add Blog</a></li>
|
|
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="no-sub">
|
|
<a href="widget.html">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#squares"></use>
|
|
</svg>
|
|
Widgets
|
|
</a>
|
|
</li>
|
|
|
|
<li class="menu-title"><span>Component</span></li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#ui-kits">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#briefcase"></use>
|
|
</svg>
|
|
UI kits
|
|
</a>
|
|
<ul class="collapse" id="ui-kits">
|
|
<li><a href="cheatsheet.html">Cheatsheet</a></li>
|
|
<li><a href="alert.html">Alert</a></li>
|
|
<li><a href="badges.html">Badges</a></li>
|
|
<li><a href="buttons.html">Buttons</a></li>
|
|
<li><a href="cards.html">Cards</a></li>
|
|
<li><a href="dropdown.html">Dropdown</a></li>
|
|
<li><a href="grid.html">Grid</a></li>
|
|
<li><a href="avatar.html">Avatar</a></li>
|
|
<li><a href="tabs.html">Tabs</a></li>
|
|
<li><a href="accordions.html">Accordions</a></li>
|
|
<li><a href="progress.html">Progress</a></li>
|
|
<li><a href="notifications.html">Notifications</a></li>
|
|
<li><a href="list.html">Lists</a></li>
|
|
<li><a href="helper_classes.html">Helper Classes</a></li>
|
|
<li><a href="background.html">Background</a></li>
|
|
<li><a href="divider.html">Divider</a></li>
|
|
<li><a href="ribbons.html">Ribbons</a></li>
|
|
<li><a href="editor.html">Editor </a></li>
|
|
<li><a href="collapse.html">Collapse</a></li>
|
|
<li><a href="footer-page.html">Footer</a></li>
|
|
<li><a href="shadow.html">Shadow</a></li>
|
|
<li><a href="wrapper.html">Wrapper</a></li>
|
|
<li><a href="bullet.html">Bullet</a></li>
|
|
<li><a href="placeholder.html">Placeholder</a></li>
|
|
<li><a href="alignment.html">Alignment Thing</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#advance-ui">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#briefcase-advance"></use>
|
|
</svg>
|
|
Advance UI
|
|
<span class=" badge rounded-pill bg-warning badge-notification ms-2">
|
|
12+
|
|
<span class="visually-hidden">unread messages</span>
|
|
</span>
|
|
</a>
|
|
<ul class="collapse" id="advance-ui">
|
|
<li><a href="modals.html">Modals</a></li>
|
|
<li><a href="offcanvas.html">Offcanvas Toggle</a></li>
|
|
<li><a href="sweetalert.html">Sweat Alert</a></li>
|
|
<li><a href="scrollbar.html">Scrollbar</a></li>
|
|
<li><a href="spinners.html">Spinners</a></li>
|
|
<li><a href="animation.html">Animation</a></li>
|
|
<li><a href="video_embed.html">Video Embed</a></li>
|
|
<li><a href="tour.html">Tour</a></li>
|
|
<li><a href="slick.html">Slider</a></li>
|
|
<li><a href="bootstrap_slider.html">Bootstrap Slider</a></li>
|
|
<li><a href="scrollpy.html">Scrollpy</a></li>
|
|
<li><a href="tooltips_popovers.html">Tooltip & Popovers</a></li>
|
|
<li><a href="ratings.html">Rating</a></li>
|
|
<li><a href="prismjs.html">Prismjs</a></li>
|
|
<li><a href="count_down.html">Count Down</a></li>
|
|
<li><a href="count_up.html"> Count up </a></li>
|
|
<li><a href="draggable.html">Draggable</a></li>
|
|
<li><a href="tree-view.html">Tree View</a></li>
|
|
<li><a href="block_ui.html">Block Ui </a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#icons">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#gift"></use>
|
|
</svg>
|
|
Icons
|
|
</a>
|
|
<ul class="collapse" id="icons">
|
|
<li><a href="fontawesome.html">Fontawesome</a></li>
|
|
<li><a href="flag_icons.html">Flag</a></li>
|
|
<li><a href="tabler-icons.html">Tabler</a></li>
|
|
<li><a href="weather_icon.html">Weather</a></li>
|
|
<li><a href="animated_icon.html">Animated</a></li>
|
|
<li><a href="iconoir_icon.html">Iconoir</a></li>
|
|
<li><a href="phosphor.html">Phosphor</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="no-sub">
|
|
<a href="misc.html">
|
|
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#rectangle"></use>
|
|
</svg>
|
|
Misc
|
|
</a>
|
|
</li>
|
|
<li class="menu-title"><span>Map & Charts </span></li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#maps">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#location"></use>
|
|
</svg>
|
|
Map
|
|
</a>
|
|
<ul class="collapse" id="maps">
|
|
<li><a href="google-map.html">Google Maps</a></li>
|
|
<li><a href="leaflet-map.html">Leaflet map</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#chart">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#chart"></use>
|
|
</svg>
|
|
Chart
|
|
</a>
|
|
<ul class="collapse" id="chart">
|
|
<li><a href="chart_js.html">Chart js</a></li>
|
|
|
|
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#apexcharts-page">
|
|
Apexcharts
|
|
</a>
|
|
<ul class="collapse" id="apexcharts-page">
|
|
<li><a href="line.html">Line</a></li>
|
|
<li><a href="area_charts.html">Area</a></li>
|
|
<li><a href="column.html">Column</a></li>
|
|
<li><a href="bar.html">Bar</a></li>
|
|
<li><a href="mixed.html">Mixed</a></li>
|
|
<li><a href="timeline_range_charts.html">Timeline & Range-Bars</a></li>
|
|
<li><a href="candlestick_charts.html">Candlestick</a></li>
|
|
<li><a href="boxplot.html">Boxplot</a></li>
|
|
<li><a href="bubble.html">Bubble</a></li>
|
|
<li><a href="scatter.html">Scatter</a></li>
|
|
<li><a href="heatmap.html">Heatmap</a></li>
|
|
<li><a href="treemap.html">Treemap</a></li>
|
|
<li><a href="pie_charts.html">Pie</a></li>
|
|
<li><a href="radial_bar.html">Radial bar</a></li>
|
|
<li><a href="radar_chart.html">Radar</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="menu-title"><span>Table & forms </span></li>
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#table">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#table"></use>
|
|
</svg>
|
|
Table
|
|
</a>
|
|
<ul class="collapse" id="table">
|
|
<li><a href="basic_table.html">BasicTable</a></li>
|
|
<li><a href="data_table.html">Data Table</a></li>
|
|
<li><a href="list_table.html">List Js</a></li>
|
|
<li><a href="advance_table.html">Advance Table</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#forms">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#wallet"></use>
|
|
</svg>
|
|
Forms elements
|
|
</a>
|
|
<ul class="collapse" id="forms">
|
|
<li><a href="form_validation.html">Form Validation</a></li>
|
|
<li><a href="base_inputs.html">Base Input</a></li>
|
|
<li><a href="checkbox_radio.html">Checkbox & Radio</a></li>
|
|
<li><a href="input_groups.html">Input Groups</a></li>
|
|
<li><a href="input_masks.html">Input Masks</a></li>
|
|
<li><a href="floating_labels.html">Floating Labels</a></li>
|
|
<li><a href="date_picker.html">Datetimepicker</a></li>
|
|
<li><a href="touch_spin.html">Touch spin</a></li>
|
|
<li><a href="select.html">Select2</a></li>
|
|
<li><a href="switch.html">Switch</a></li>
|
|
<li><a href="range_slider.html">Range Slider</a></li>
|
|
<li><a href="typeahead.html">Typeahead</a></li>
|
|
<li><a href="textarea.html">Textarea</a></li>
|
|
<li><a href="clipboard.html">Clipboard</a></li>
|
|
<li><a href="file_upload.html">File Upload</a></li>
|
|
<li><a href="dual_list_boxes.html">Dual List Boxes</a></li>
|
|
<li><a href="default_forms.html">Default Forms</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#ready_to_use">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#newspaper"></use>
|
|
</svg>
|
|
Ready to use
|
|
<span class="badge text-bg-success badge-notification ms-2">2</span>
|
|
</a>
|
|
<ul class="collapse" id="ready_to_use">
|
|
<li><a href="form_wizards.html">Form wizards</a></li>
|
|
<li><a href="form_wizard_1.html">Form wizards 1</a></li>
|
|
<li><a href="form_wizard_2.html">Form wizards 2</a></li>
|
|
<li><a href="ready_to_use_form.html">Ready To Use Form</a></li>
|
|
<li><a href="ready_to_use_table.html">Ready To Use Tables</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="menu-title"><span>Pages</span></li>
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#auth_pages">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#window"></use>
|
|
</svg>
|
|
Auth Pages
|
|
</a>
|
|
<ul class="collapse" id="auth_pages">
|
|
<li><a href="sign_in.html">Sign In</a></li>
|
|
<li><a href="sign_in_1.html">Sign In with Bg-image</a></li>
|
|
<li><a href="sign_up.html">Sign Up</a></li>
|
|
<li><a href="sign_up_1.html">Sign Up with Bg-image</a></li>
|
|
<li><a href="password_reset.html">Password Reset</a></li>
|
|
<li><a href="password_reset_1.html">Password Reset with Bg-image</a></li>
|
|
<li><a href="password_create.html">Password Create</a></li>
|
|
<li><a href="password_create_1.html">Password Create with Bg-image</a></li>
|
|
<li><a href="lock_screen.html">Lock Screen</a></li>
|
|
<li><a href="lock_screen_1.html">Lock Screen with Bg-image</a></li>
|
|
<li><a href="two_step_verification.html">Two-Step Verification</a></li>
|
|
<li><a href="two_step_verification_1.html">Two-Step Verification with Bg-image</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#error_pages">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#exclamation-circle"></use>
|
|
</svg>
|
|
Error Pages
|
|
</a>
|
|
<ul class="collapse" id="error_pages">
|
|
<li><a href="error_400.html">Bad Request </a></li>
|
|
<li><a href="error_403.html">Forbidden </a></li>
|
|
<li><a href="error_404.html">Not Found</a></li>
|
|
<li><a href="error_500.html">Internal Server</a></li>
|
|
<li><a href="error_503.html">Service Unavailable</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#other_pages">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#document"></use>
|
|
</svg>
|
|
Other Pages
|
|
</a>
|
|
<ul class="collapse" id="other_pages">
|
|
<li><a href="blank.html">Blank</a></li>
|
|
<li><a href="maintenance.html">Maintenance</a></li>
|
|
<li><a href="landing.html">Landing Page</a></li>
|
|
<li><a href="coming_soon.html">Coming Soon</a></li>
|
|
<li><a href="sitemap.html">Sitemap</a></li>
|
|
<li><a href="privacy_policy.html">Privacy Policy</a></li>
|
|
<li><a href="terms_condition.html">Terms & Condition</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="menu-title"><span>Others</span></li>
|
|
|
|
<li>
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#level">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#arrow-down"></use>
|
|
</svg>
|
|
2 level
|
|
</a>
|
|
<ul class="collapse" id="level">
|
|
<li><a href="cheatsheet.html#">Blank</a></li>
|
|
<li class="another-level">
|
|
<a aria-expanded="false" data-bs-toggle="collapse" href="cheatsheet.html#level2">
|
|
Another level
|
|
</a>
|
|
<ul class="collapse" id="level2">
|
|
<li><a href="blank.html">Blank</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
<li class="no-sub">
|
|
<a href="https://phpstack-1384472-5121645.cloudwaysapps.com/document/html/ki-admin/index.html">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#document-text"></use>
|
|
</svg>
|
|
Document
|
|
</a>
|
|
</li>
|
|
|
|
<li class="no-sub">
|
|
<a href="mailto:teqlathemes@gmail.com">
|
|
<svg stroke="currentColor" stroke-width="1.5">
|
|
<use xlink:href="../assets/svg/_sprite.svg#chat-bubble"></use>
|
|
</svg>
|
|
Support
|
|
</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="menu-navs">
|
|
<span class="menu-previous"><i class="ti ti-chevron-left"></i></span>
|
|
<span class="menu-next"><i class="ti ti-chevron-right"></i></span>
|
|
</div>
|
|
|
|
</nav>
|
|
<!-- Menu Navigation ends -->
|
|
|
|
<div class="app-content">
|
|
<div class="">
|
|
|
|
<!-- Header Section starts -->
|
|
<header class="header-main">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-8 col-sm-6 d-flex align-items-center header-left p-0">
|
|
<span class="header-toggle ">
|
|
<i class="ph ph-squares-four"></i>
|
|
</span>
|
|
|
|
<div class="header-searchbar w-100">
|
|
<form action="cheatsheet.html#" class="mx-sm-3 app-form app-icon-form ">
|
|
<div class="position-relative">
|
|
<input aria-label="Search" class="form-control" placeholder="Search..."
|
|
type="search">
|
|
<i class="ti ti-search text-dark"></i>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-4 col-sm-6 d-flex align-items-center justify-content-end header-right p-0">
|
|
|
|
<ul class="d-flex align-items-center">
|
|
|
|
<li class="header-language">
|
|
<div class="flex-shrink-0 dropdown" id="lang_selector">
|
|
<a aria-expanded="false" class="d-block head-icon ps-0"
|
|
data-bs-toggle="dropdown"
|
|
href="cheatsheet.html#">
|
|
<div class="lang-flag lang-en ">
|
|
<span class="flag rounded-circle overflow-hidden">
|
|
<i class=""></i>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
<ul class="dropdown-menu language-dropdown header-card border-0">
|
|
<li class="lang lang-en selected dropdown-item p-2" data-bs-placement="top"
|
|
data-bs-toggle="tooltip" title="US">
|
|
<span class="d-flex align-items-center">
|
|
<i class="flag-icon flag-icon-usa flag-icon-squared rounded-circle f-s-20"></i>
|
|
<span class="ps-2">US</span>
|
|
</span>
|
|
</li>
|
|
<li class="lang lang-pt dropdown-item p-2" title="FR">
|
|
<span class="d-flex align-items-center">
|
|
<i class="flag-icon flag-icon-fra flag-icon-squared rounded-circle f-s-20"></i>
|
|
<span class="ps-2">France</span>
|
|
</span>
|
|
</li>
|
|
<li class="lang lang-es dropdown-item p-2" title="UK">
|
|
<span class="d-flex align-items-center">
|
|
<i class="flag-icon flag-icon-gbr flag-icon-squared rounded-circle f-s-20"></i>
|
|
<span class="ps-2">UK</span>
|
|
</span>
|
|
</li>
|
|
<li class="lang lang-es dropdown-item p-2" title="IT">
|
|
<span class="d-flex align-items-center">
|
|
<i class="flag-icon flag-icon-ita flag-icon-squared rounded-circle f-s-20"></i>
|
|
<span class="ps-2">Italy</span>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="header-apps">
|
|
<a aria-controls="appscanvasRights"
|
|
class="d-block head-icon bg-light-dark rounded-circle f-s-22 p-2"
|
|
data-bs-target="#appscanvasRights" data-bs-toggle="offcanvas"
|
|
href="cheatsheet.html#" role="button">
|
|
<i class="ph ph-bounding-box"></i>
|
|
|
|
</a>
|
|
|
|
<div aria-labelledby="appscanvasRightsLabel"
|
|
class="offcanvas offcanvas-end header-apps-canvas"
|
|
id="appscanvasRights"
|
|
tabindex="-1">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="appscanvasRightsLabel">Shortcut</h5>
|
|
<div class="app-dropdown flex-shrink-0">
|
|
<a aria-expanded="false" class=" p-1" data-bs-auto-close="outside"
|
|
data-bs-toggle="dropdown"
|
|
href="cheatsheet.html#"
|
|
role="button">
|
|
<i class="ph-bold ph-faders-horizontal f-s-20"></i>
|
|
|
|
|
|
</a>
|
|
<ul class="dropdown-menu mb-3">
|
|
<li class="dropdown-item">
|
|
<a href="setting.html" target="_blank">
|
|
Privacy Settings
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="setting.html" target="_blank">
|
|
Account Settings
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="setting.html" target="_blank">
|
|
Accessibility
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item border-0">
|
|
<a aria-expanded="false" data-bs-toggle="dropdown" href="cheatsheet.html#"
|
|
role="button">
|
|
More Settings
|
|
</a>
|
|
<ul class="dropdown-menu sub-menu">
|
|
<li class="dropdown-item">
|
|
<a href="setting.html" target="_blank">
|
|
Backup and Restore
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="setting.html" target="_blank">
|
|
<span>Data Usage</span>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="setting.html" target="_blank">
|
|
<span>Theme</span>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-item d-flex align-items-center justify-content-between">
|
|
<a href="cheatsheet.html#">
|
|
<p class="mb-0">Notification</p>
|
|
</a>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input form-check-primary"
|
|
id="notificationSwitch"
|
|
type="checkbox">
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="offcanvas-body app-scroll">
|
|
<div class="row row-cols-3 g-2">
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-primary w-100 rounded-3 py-3 px-2 "
|
|
href="product.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-shopping-bag-open f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">E-shop</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-danger w-100 rounded-3 py-3 px-2 "
|
|
href="email.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-envelope f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Email</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-success w-100 rounded-3 py-3 px-2 "
|
|
href="chat.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-chat-circle-text f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Chat</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-warning w-100 rounded-3 py-3 px-2 "
|
|
href="project_app.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-projector-screen-chart f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Project</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-info w-100 rounded-3 py-3 px-2 "
|
|
href="invoice.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-scroll f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Invoice</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-dark w-100 rounded-3 py-3 px-2 "
|
|
href="blog.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-notebook f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Blog</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-danger w-100 rounded-3 py-3 px-2 "
|
|
href="calendar.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-calendar f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Calender</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-warning w-100 rounded-3 py-3 px-2 "
|
|
href="file_manager.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-folder-open f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark txt-ellipsis-1">File
|
|
Manager</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-primary w-100 rounded-3 py-3 px-2 "
|
|
href="gallery.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-google-photos-logo f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Gallery</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-success w-100 rounded-3 py-3 px-2 "
|
|
href="profile.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-users-three f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Profile</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="text-light-secondary w-100 rounded-3 py-3 px-2 "
|
|
href="kanban_board.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-selection-foreground f-s-30"></i>
|
|
</span>
|
|
<p class="mb-0 f-w-500 text-dark">Task Board</p>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex-center text-center">
|
|
<a class="d-flex-center text-light-secondary w-100 h-100 rounded-3 p-2 dashed-1-secondary"
|
|
href="kanban_board.html"
|
|
target="_blank">
|
|
<span>
|
|
<i class="ph-light ph-plus f-s-30"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="header-cart">
|
|
<a aria-controls="cartcanvasRight"
|
|
class="d-block head-icon position-relative bg-light-dark rounded-circle f-s-22 p-2"
|
|
data-bs-target="#cartcanvasRight"
|
|
data-bs-toggle="offcanvas"
|
|
href="cheatsheet.html#" role="button">
|
|
<i class="ph ph-shopping-cart-simple"></i>
|
|
<span
|
|
class="position-absolute translate-middle badge rounded-pill bg-danger badge-notification">4</span>
|
|
</a>
|
|
<div aria-labelledby="cartcanvasRightLabel"
|
|
class="offcanvas offcanvas-end header-cart-canvas"
|
|
id="cartcanvasRight"
|
|
tabindex="-1">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="cartcanvasRightLabel">Cart</h5>
|
|
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
|
|
type="button"></button>
|
|
</div>
|
|
<div class="offcanvas-body app-scroll p-0">
|
|
<div class="head-container">
|
|
<div class="head-box">
|
|
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
|
|
<img alt="cart" class="img-fluid p-1"
|
|
src="../assets/images/header/cart/01.png">
|
|
</span>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
|
|
target="_blank"> Backpacks (3<i
|
|
class="ti ti-star-filled text-warning f-s-12"></i>)
|
|
</a>
|
|
<div>
|
|
<span class="text-dark"><span
|
|
class="text-secondary f-w-400">size</span> : M</span>
|
|
<span class="text-dark ms-2"><span
|
|
class="text-secondary f-w-400">color</span> :Pink</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<p class="text-muted f-w-500 mb-0">$600.50 x 1</p>
|
|
</div>
|
|
</div>
|
|
<div class="head-box">
|
|
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
|
|
<img alt="cart" class="img-fluid p-1"
|
|
src="../assets/images/header/cart/05.png">
|
|
</span>
|
|
<div class="flex-grow-1 ms-2">
|
|
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
|
|
target="_blank"> Women's Watch (4<i
|
|
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
|
|
<div>
|
|
<span class="text-dark"><span
|
|
class="text-secondary f-w-400">size</span> : S</span>
|
|
<span class="text-dark ms-2"><span
|
|
class="text-secondary f-w-400">color</span> :Rose Gold</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<p class="text-muted f-w-500 mb-0">$519.10 x 2</p>
|
|
</div>
|
|
</div>
|
|
<div class="head-box">
|
|
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
|
|
<img alt="cart" class="img-fluid p-1"
|
|
src="../assets/images/header/cart/04.png">
|
|
</span>
|
|
<div class="flex-grow-1 ms-2">
|
|
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
|
|
target="_blank">Sandals (5 <i
|
|
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
|
|
<div>
|
|
<span class="text-dark"><span
|
|
class="text-secondary f-w-400">size</span> : 8</span>
|
|
<span class="text-dark ms-2"><span
|
|
class="text-secondary f-w-400">color</span> :White</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<p class="text-muted f-w-500 mb-0">$390 x 2</p>
|
|
</div>
|
|
</div>
|
|
<div class="head-box ">
|
|
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
|
|
<img alt="cart" class="img-fluid p-1"
|
|
src="../assets/images/header/cart/03.png">
|
|
</span>
|
|
<div class="flex-grow-1 ms-2">
|
|
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
|
|
target="_blank"> Jackets (3<i
|
|
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
|
|
<div>
|
|
<span class="text-dark"><span
|
|
class="text-secondary f-w-400">size</span> : XL</span>
|
|
<span class="text-dark ms-2"><span
|
|
class="text-secondary f-w-400">color</span> :Blue</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<p class="text-muted f-w-500 mb-0">$300.00 x 2</p>
|
|
</div>
|
|
</div>
|
|
<div class="head-box ">
|
|
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
|
|
<img alt="cart" class="img-fluid p-1"
|
|
src="../assets/images/header/cart/02.png">
|
|
</span>
|
|
<div class="flex-grow-1 ms-2">
|
|
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
|
|
target="_blank"> Shoes (3<i
|
|
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
|
|
<div>
|
|
<span class="text-dark"><span
|
|
class="text-secondary f-w-400">size</span> : 9</span>
|
|
<span class="text-dark ms-2"><span
|
|
class="text-secondary f-w-400">color</span> :White</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<p class="text-muted f-w-500 mb-0">$450.00 x 1</p>
|
|
</div>
|
|
</div>
|
|
<div class="hidden-massage py-4 px-3">
|
|
|
|
<div>
|
|
<i class="ph-duotone ph-shopping-bag-open f-s-50 text-primary"></i>
|
|
<h6 class="mb-0">Your Cart is Empty</h6>
|
|
<p class="text-secondary mb-0">Add some items :)</p>
|
|
<a class="btn btn-light-primary btn-xs mt-2"
|
|
href="product_details.html">Shop
|
|
Now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="offcanvas-footer">
|
|
<div class="head-box-footer p-3">
|
|
<div class="mb-4">
|
|
<h6 class="text-muted f-w-600">Total <span
|
|
class="float-end text-primary">$3,468.00</span></h6>
|
|
</div>
|
|
<div class="header-cart-btn">
|
|
<a class="btn btn-primary" href="cart.html" role="button"
|
|
target="_blank">
|
|
<i class="ti ti-eye"></i> View Cart</a>
|
|
<a class="btn btn-success" href="checkout.html" role="button"
|
|
target="_blank">
|
|
Checkout <i class="ti ti-shopping-cart"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="header-dark">
|
|
<div class="sun-logo head-icon bg-light-dark rounded-circle f-s-22 p-2">
|
|
<i class="ph ph-moon-stars"></i>
|
|
</div>
|
|
<div class="moon-logo head-icon bg-light-dark rounded-circle f-s-22 p-2">
|
|
<i class="ph ph-sun-dim"></i>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="header-notification">
|
|
<a aria-controls="notificationcanvasRight"
|
|
class="d-block head-icon position-relative bg-light-dark rounded-circle f-s-22 p-2"
|
|
data-bs-target="#notificationcanvasRight"
|
|
data-bs-toggle="offcanvas"
|
|
href="cheatsheet.html#"
|
|
role="button">
|
|
<i class="ph ph-bell"></i>
|
|
<span
|
|
class="position-absolute translate-middle p-1 bg-primary border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower"></span>
|
|
</a>
|
|
<div aria-labelledby="notificationcanvasRightLabel"
|
|
class="offcanvas offcanvas-end header-notification-canvas"
|
|
id="notificationcanvasRight" tabindex="-1">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="notificationcanvasRightLabel">
|
|
Notification</h5>
|
|
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
|
|
type="button"></button>
|
|
</div>
|
|
<div class="offcanvas-body app-scroll p-0">
|
|
<div class="head-container">
|
|
<div class="notification-message head-box">
|
|
|
|
<div class="message-content-box flex-grow-1 pe-2">
|
|
|
|
<a class="f-s-15 text-dark mb-0"
|
|
href="read_email.html"><span
|
|
class="f-w-500 text-dark">Gene Hart</span> wants to
|
|
edit <span
|
|
class="f-w-500 text-dark">Report.doc</span></a>
|
|
<div>
|
|
<a class="d-inline-block f-w-500 text-success me-1"
|
|
href="cheatsheet.html#">Approve</a>
|
|
<a class="d-inline-block f-w-500 text-danger"
|
|
href="cheatsheet.html#">Deny</a>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<div>
|
|
<span class="badge text-light-primary"> sep 23 </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notification-message head-box">
|
|
|
|
<div class="message-content-box flex-grow-1 pe-2">
|
|
<a class="f-s-15 text-dark mb-0" href="read_email.html">Hey
|
|
<span
|
|
class="f-w-500 text-dark">Emery McKenzie</span>,
|
|
get ready: Your order from <span
|
|
class="f-w-500 text-dark">@Shopper.com</span></a>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<div>
|
|
<span class="badge text-light-primary"> sep 23 </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notification-message head-box">
|
|
<div class="message-content-box flex-grow-1 pe-2">
|
|
<a class="f-s-15 text-dark mb-0"
|
|
href="read_email.html"><span
|
|
class="f-w-500 text-dark">Simon Young</span> shared
|
|
a file called <span
|
|
class="f-w-500 text-dark">Dropdown.pdf</span></a>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<div>
|
|
<span class="badge text-light-primary"> 30 min</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notification-message head-box">
|
|
<div class="message-content-box flex-grow-1 pe-2">
|
|
<a class="f-s-15 text-dark mb-0"
|
|
href="read_email.html"><span
|
|
class="f-w-500 text-dark">Becky G. Hayes</span> has
|
|
added a comment to <span
|
|
class="f-w-500 text-dark">Final_Report.pdf</span></a>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<div>
|
|
<span class="badge text-light-primary"> 45 min</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notification-message head-box">
|
|
<div class="message-content-box flex-grow-1 pe-2">
|
|
<a class="f-s-15 text-dark mb-0 "
|
|
href="read_email.html"><span
|
|
class="f-w-600 text-dark">@Romaine</span>
|
|
invited you to a meeting
|
|
</a>
|
|
<div>
|
|
<a class="d-inline-block f-w-500 text-success me-1"
|
|
href="cheatsheet.html#">Join</a>
|
|
<a class="d-inline-block f-w-500 text-danger" href="cheatsheet.html#">Decline</a>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
|
|
<div>
|
|
<span class="badge text-light-primary"> 1 hour ago </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden-massage py-4 px-3">
|
|
<div>
|
|
<i class="ph-duotone ph-bell-ringing f-s-50 text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0">Notification Not Found</h6>
|
|
<p class="text-dark">When you have any notifications added
|
|
here,will
|
|
appear here.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Header Section ends -->
|
|
|
|
<!-- Body main section starts -->
|
|
<main>
|
|
<div class="container-fluid">
|
|
|
|
<!-- Breadcrumb start -->
|
|
<div class="row m-1">
|
|
<div class="col-12 ">
|
|
<h4 class="main-title">Cheatsheet</h4>
|
|
<ul class="app-line-breadcrumbs mb-3">
|
|
<li class="">
|
|
<a class="f-s-14 f-w-500" href="cheatsheet.html#">
|
|
<span>
|
|
<i class="ph-duotone ph-briefcase f-s-16"></i> Ui kits
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="active">
|
|
<a class="f-s-14 f-w-500" href="cheatsheet.html#">Cheatsheet</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Breadcrumb end -->
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="cheatsheet-header">
|
|
<img alt="" src="../assets/images/logo/3.png">
|
|
<h2>Your Ultimate Cheatsheet</h2>
|
|
|
|
<div class="search-div">
|
|
<div class="input-group b-r-search">
|
|
<span class="input-group-text bg-primary border-0 "><i class="ti ti-search"></i></span>
|
|
<input aria-label="Search" class="form-control cheatsheet-filter"
|
|
placeholder="Search..." type="text">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="cheatsheet-blocks" data-masonry='{"percentPosition": true }'>
|
|
<div class="card cheatsheets-card box-template-list toggle-card">
|
|
<div class="card-header p-0">
|
|
<a aria-controls="badges"
|
|
aria-expanded="false"
|
|
class="btn btn-primary w-100 text-start f-s-18 f-w-500 rounded-bottom-0 py-2 box-template-name"
|
|
data-bs-toggle="collapse"
|
|
href="cheatsheet.html#badges">
|
|
badges
|
|
</a>
|
|
</div>
|
|
<div class="collapse card-body show p-0" id="badges">
|
|
<ul>
|
|
|
|
<li class="list-item-preview d-flex gap-2" data-header="primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> primary </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgePrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgePrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgePrimaryClass">badge
|
|
text-bg-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgePrimaryCode">
|
|
<span class="badge text-bg-primary">Primary</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
|
|
<li class="list-item-preview d-flex gap-2" data-header="secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> secondary</span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgeSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgeSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgeSecondaryClass">badge
|
|
text-bg-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgeSecondaryCode">
|
|
<span class="badge text-bg-secondary">Secondary</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> success</span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgeSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgeSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgeSuccessClass">badge
|
|
text-bg-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgeSuccessCode">
|
|
<span class="badge text-bg-success">Success</span>
|
|
</code>
|
|
</pre>
|
|
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> danger</span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgeDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgeDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgeDangerClass">badge
|
|
text-bg-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgeDangerCode">
|
|
<span class="badge text-bg-danger">Danger</span>
|
|
</code>
|
|
</pre>
|
|
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> warning </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgeWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgeWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgeWarningClass">badge
|
|
text-bg-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgeWarningCode">
|
|
<span class="badge text-bg-warning">Warning</span>
|
|
</code>
|
|
</pre>
|
|
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> info </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgeInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgeInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgeInfoClass">badge text-bg-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgeInfoCode">
|
|
<span class="badge text-bg-info">Info</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> light </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgeLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgeLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgeLightClass">badge
|
|
text-bg-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgeLightCode">
|
|
<span class="badge text-bg-light">Light</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> dark </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgeDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgeDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgeDarkClass">badge text-bg-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgeDarkCode">
|
|
<span class="badge text-bg-dark">Dark</span>
|
|
</code>
|
|
</pre>
|
|
|
|
</li>
|
|
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="badges-outline-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-outline-primary </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('outlinePrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#outlinePrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="outlinePrimaryClass">badge
|
|
text-outline-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="outlinePrimaryCode">
|
|
<span class="badge text-outline-primary">Primary</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="badges-outline-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-outline-secondary </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('outlineSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#outlineSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="outlineSecondaryClass">badge
|
|
text-outline-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="outlineSecondaryCode">
|
|
<span class="badge text-outline-secondary">Secondary</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="badges-outline-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-outline-success </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('outlineSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#outlineSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="outlineSuccessClass">badge
|
|
text-outline-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="outlineSuccessCode">
|
|
<span class="badge text-outline-success">Success</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="badges-outline-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-outline-danger </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('outlineDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#outlineDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="outlineDangerClass">badge
|
|
text-outline-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="outlineDangerCode">
|
|
<span class="badge text-outline-danger">Danger</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="badges-outline-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-outline-warning </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('outlineWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#outlineWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="outlineWarningClass">badge
|
|
text-outline-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="outlineWarningCode">
|
|
<span class="badge text-outline-warning">Warning</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="badges-outline-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-outline-info </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('outlineInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#outlineInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="outlineInfoClass">badge
|
|
text-outline-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="outlineInfoCode">
|
|
<span class="badge text-outline-info">Info</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="badges-outline-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-outline-dark </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('outlineDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#outlineDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="outlineDarkClass">badge
|
|
text-outline-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="outlineDarkCode">
|
|
<span class="badge text-outline-dark">Dark</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="badges-light-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-light-primary </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgesLightPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgesLightPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgesLightPrimaryClass">badge
|
|
text-light-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgesLightPrimaryCode">
|
|
<span class="badge text-light-primary">Primary</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="badges-light-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-light-secondary </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgesLightSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgesLightSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgesLightSecondaryClass">badge
|
|
text-light-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgesLightSecondaryCode">
|
|
<span class="badge text-light-secondary">Secondary</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="badges-light-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-light-success </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgesLightSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgesLightSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgesLightSuccessClass">badge
|
|
text-light-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgesLightSuccessCode">
|
|
<span class="badge text-light-success">Success</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="badges-light-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-light-danger </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgesLightDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgesLightDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgesLightDangerClass">badge
|
|
text-light-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgesLightDangerCode">
|
|
<span class="badge text-light-danger">Danger</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="badges-light-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-light-warning </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgesLighteWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgesLighteWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgesLighteWarningClass">badge
|
|
text-light-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgesLighteWarningCode">
|
|
<span class="badge text-light-warning">Warning</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="badges-light-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-light-info </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgesLightInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgesLightInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgesLightInfoClass">badge
|
|
text-light-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgesLightInfoCode">
|
|
<span class="badge text-light-info">Info</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="badges-light-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-light-light </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgesLightLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgesLightLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgesLightLightClass">badge
|
|
text-light-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgesLightLightCode">
|
|
<span class="badge text-light-light">Info</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="badges-light-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> badge text-light-dark </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('badgesLightDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#badgesLightDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="badgesLightDarkClass">badge
|
|
text-light-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="badgesLightDarkCode">
|
|
<span class="badge text-light-dark">Dark</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card cheatsheets-card box-template-list toggle-card">
|
|
<div class="card-header p-0">
|
|
<a aria-controls="alerts"
|
|
aria-expanded="false"
|
|
class="btn btn-primary w-100 text-start f-s-18 f-w-500 rounded-bottom-0 py-2 box-template-name"
|
|
data-bs-toggle="collapse"
|
|
href="cheatsheet.html#alerts">
|
|
alerts
|
|
</a>
|
|
</div>
|
|
<div class="collapse card-body show p-0" id="alerts">
|
|
<ul>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertPrimaryClass">alert
|
|
alert-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertPrimaryCode">
|
|
<div class="alert alert-primary" role="alert"> Simple primary alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertSecondaryClass">alert
|
|
alert-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertSecondaryCode">
|
|
<div class="alert alert-secondary" role="alert"> Simple secondary alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-success</span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertSuccessClass">alert
|
|
alert-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertSuccessCode">
|
|
<div class="alert alert-success" role="alert"> Simple success alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-danger</span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertDangerClass">alert
|
|
alert-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertDangerCode">
|
|
<div class="alert alert-danger" role="alert"> Simple danger alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-warning </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertWarningClass">alert
|
|
alert-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertWarningCode">
|
|
<div class="alert alert-warning " role="alert"> Simple warning alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-info </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertInfoClass">alert alert-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertInfoCode">
|
|
<div class="alert alert-info " role="alert"> Simple info alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-light </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLightClass">alert alert-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLightCode">
|
|
<div class="alert alert-light " role="alert"> Simple light alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-dark </span>
|
|
</div>
|
|
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertDarkClass">alert alert-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertDarkCode">
|
|
<div class="alert alert-dark " role="alert"> Simple dark alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-outline-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-outline-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertOutlinePrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertOutlinePrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertOutlinePrimaryClass">alert
|
|
alert-outline-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertOutlinePrimaryCode">
|
|
<div class="alert alert-outline-primary" role="alert"> outline primary alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-outline-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-outline-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertOutlineSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertOutlineSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertOutlineSecondaryClass">alert
|
|
alert-outline-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertOutlineSecondaryCode">
|
|
<div class="alert alert-outline-secondary" role="alert"> outline secondary alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-outline-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-outline-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertOutlineSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertOutlineSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertOutlineSuccessClass">alert
|
|
alert-outline-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertOutlineSuccessCode">
|
|
<div class="alert alert-outline-success" role="alert"> outline success alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-outline-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-outline-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertOutlineDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertOutlineDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertOutlineDangerClass">alert
|
|
alert-outline-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertOutlineDangerCode">
|
|
<div class="alert alert-outline-danger" role="alert"> outline danger alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-outline-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-outline-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertOutlineWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertOutlineWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertOutlineWarningClass">alert
|
|
alert-outline-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertOutlineWarningCode">
|
|
<div class="alert alert-outline-warning" role="alert"> outline warning alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-outline-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-outline-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertOutlineInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertOutlineInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertOutlineInfoClass">alert
|
|
alert-outline-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertOutlineInfoCode">
|
|
<div class="alert alert-outline-info" role="alert"> outline info alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-outline-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-outline-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertOutlineLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertOutlineLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertOutlineLightClass">alert
|
|
alert-outline-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertOutlineLightCode">
|
|
<div class="alert alert-outline-light" role="alert"> outline light alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-outline-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-outline-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertOutlineDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertOutlineDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertOutlineDarkClass">alert
|
|
alert-outline-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertOutlineDarkCode">
|
|
<div class="alert alert-outline-dark" role="alert"> outline dark alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-light-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-light-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLightPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLightPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLightPrimaryClass">alert
|
|
alert-light-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLightPrimaryCode">
|
|
<div class="alert alert-light-primary" role="alert"> light primary alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-light-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-light-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLightSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLightSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLightSecondaryClass">alert
|
|
alert-light-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLightSecondaryCode">
|
|
<div class="alert alert-light-secondary" role="alert"> light secondary alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-light-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-light-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLightSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLightSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLightSuccessClass">alert
|
|
alert-light-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLightSuccessCode">
|
|
<div class="alert alert-light-success" role="alert"> light success alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-light-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-light-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLightDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLightDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLightDangerClass">alert
|
|
alert-light-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLightDangerCode">
|
|
<div class="alert alert-light-danger" role="alert"> light danger alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-light-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-light-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLightWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLightWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLightWarningClass">alert
|
|
alert-light-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLightWarningCode">
|
|
<div class="alert alert-light-warning" role="alert"> light warning alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-light-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-light-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLightInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLightInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLightInfoClass">alert
|
|
alert-light-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLightInfoCode">
|
|
<div class="alert alert-light-info" role="alert"> light info alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-light-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-light-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLightLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLightLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLightLightClass">alert
|
|
alert-light-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLightLightCode">
|
|
<div class="alert alert-light-light" role="alert"> light light alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-light-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> alert-light-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLightDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLightDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLightDarkClass">alert
|
|
alert-light-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLightDarkCode">
|
|
<div class="alert alert-light-dark" role="alert"> light dark alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="light-border-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-light-border-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('borderLightPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#borderLightPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="borderLightPrimaryClass">alert
|
|
alert-light-border-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="borderLightPrimaryCode">
|
|
<div class="alert alert-light-border-primary" role="alert"> Light-border-primary alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="light-border-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-light-border-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('borderLightSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#borderLightSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="borderLightSecondaryClass">alert
|
|
alert-light-border-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="borderLightSecondaryCode">
|
|
<div class="alert alert-light-border-secondary" role="alert"> Light-border-secondary alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="light-border-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-light-border-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('borderLightSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#borderLightSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="borderLightSuccessClass">alert
|
|
alert-light-border-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="borderLightSuccessCode">
|
|
<div class="alert alert-light-border-success" role="alert"> Light-border-success alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="light-border-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-light-border-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('borderLightDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#borderLightDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="borderLightDangerClass">alert
|
|
alert-light-border-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="borderLightDangerCode">
|
|
<div class="alert alert-light-border-danger" role="alert"> Light-border-danger alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="light-border-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-light-border-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('borderLightWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#borderLightWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="borderLightWarningClass">alert
|
|
alert-light-border-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="borderLightWarningCode">
|
|
<div class="alert alert-light-border-warning" role="alert"> Light-border-warning alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="light-border-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-light-border-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('borderInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#borderInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="borderInfoClass">alert
|
|
alert-light-border-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="borderInfoCode">
|
|
<div class="alert alert-light-border-info" role="alert"> Light-border-info alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="light-border-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-light-border-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('borderLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#borderLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="borderLightClass">alert
|
|
alert-light-border-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="borderLightCode">
|
|
<div class="alert alert-light-border-light" role="alert"> Light-border-light alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="light-border-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-light-border-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('borderDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#borderDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="borderDarkClass">alert
|
|
alert-light-border-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="borderDarkCode">
|
|
<div class="alert alert-light-border-dark" role="alert"> Light-border-dark alert -check it out </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-border-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-border-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertBorderPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertBorderPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertBorderPrimaryClass">alert
|
|
alert-border-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertBorderPrimaryCode">
|
|
<div class="alert alert-border-primary" role="alert"> Alert with left slide border - check out! </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-border-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-border-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertBorderSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertBorderSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertBorderSecondaryClass">alert
|
|
alert-border-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertBorderSecondaryCode">
|
|
<div class="alert alert-border-secondary" role="alert"> Alert with left slide border - check out! </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-border-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-border-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertBorderSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertBorderSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertBorderSuccessClass">alert
|
|
alert-border-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertBorderSuccessCode">
|
|
<div class="alert alert-border-success" role="alert"> Alert with left slide border - check out! </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-border-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-border-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertBorderDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertBorderDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertBorderDangerClass">alert
|
|
alert-border-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertBorderDangerCode">
|
|
<div class="alert alert-border-danger" role="alert"> Alert with left slide border - check out! </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-border-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-border-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertBorderWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertBorderWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertBorderWarningClass">alert
|
|
alert-border-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertBorderWarningCode">
|
|
<div class="alert alert-border-warning" role="alert"> Alert with left slide border - check out! </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-border-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-border-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertBorderInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertBorderInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertBorderInfoClass">alert
|
|
alert-border-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertBorderInfoCode">
|
|
<div class="alert alert-border-info" role="alert"> Alert with left slide border - check out! </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-border-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-border-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertBorderLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertBorderLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertBorderLightClass">alert
|
|
alert-border-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertBorderLightCode">
|
|
<div class="alert alert-border-light" role="alert"> Alert with left slide border - check out! </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-border-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-border-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertBorderDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertBorderDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertBorderDarkClass">alert
|
|
alert-border-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertBorderDarkCode">
|
|
<div class="alert alert-border-dark" role="alert"> Alert with left slide border - check out! </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-label-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-label alert-label-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLablePrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLablePrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLablePrimaryClass">alert
|
|
alert-label alert-label-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLablePrimaryCode">
|
|
<div class="alert alert-label alert-label-primary" role="alert">
|
|
<p class="mb-0">
|
|
<i class="ti ti-download label-icon label-icon-primary"></i>
|
|
Alert with lable icons - check out!
|
|
</p>
|
|
<div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-label-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-label alert-label-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLableSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLableSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLableSecondaryClass">alert
|
|
alert-label alert-label-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLableSecondaryCode">
|
|
<div class="alert alert-label alert-label-secondary" role="alert">
|
|
<p class="mb-0">
|
|
<i class="ti ti-download label-icon label-icon-secondary"></i>
|
|
Alert with lable icons - check out!
|
|
</p>
|
|
<div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-label-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-label alert-label-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLableSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLableSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLableSuccessClass">alert
|
|
alert-label alert-label-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLableSuccessCode">
|
|
<div class="alert alert-label alert-label-success" role="alert">
|
|
<p class="mb-0">
|
|
<i class="ti ti-download label-icon label-icon-success"></i>
|
|
Alert with lable icons - check out!
|
|
</p>
|
|
<div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-label-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-label alert-label-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLableDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLableDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLableDangerClass">alert
|
|
alert-label alert-label-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLableDangerCode">
|
|
<div class="alert alert-label alert-label-danger" role="alert">
|
|
<p class="mb-0">
|
|
<i class="ti ti-download label-icon label-icon-danger"></i>
|
|
Alert with lable icons - check out!
|
|
</p>
|
|
<div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="alert-label-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-label alert-label-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLableWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLableWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLableWarningClass">alert
|
|
alert-label alert-label-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLableWarningCode">
|
|
<div class="alert alert-label alert-label-warning" role="alert">
|
|
<p class="mb-0">
|
|
<i class="ti ti-download label-icon label-icon-warning"></i>
|
|
Alert with lable icons - check out!
|
|
</p>
|
|
<div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-label-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-label alert-label-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLableInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLableInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLableInfoClass">alert
|
|
alert-label alert-label-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLableInfoCode">
|
|
<div class="alert alert-label alert-label-info" role="alert">
|
|
<p class="mb-0">
|
|
<i class="ti ti-download label-icon label-icon-info"></i>
|
|
Alert with lable icons - check out!
|
|
</p>
|
|
<div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-label-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-label alert-label-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLableLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLableLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLableLightClass">alert
|
|
alert-label alert-label-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLableLightCode">
|
|
<div class="alert alert-label alert-label-light" role="alert">
|
|
<p class="mb-0">
|
|
<i class="ti ti-download label-icon label-icon-light"></i>
|
|
Alert with lable icons - check out!
|
|
</p>
|
|
<div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="alert-label-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">alert alert-label alert-label-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('alertLableDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#alertLableDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="alertLableDarkClass">alert
|
|
alert-label alert-label-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="alertLableDarkCode">
|
|
<div class="alert alert-label alert-label-dark" role="alert">
|
|
<p class="mb-0">
|
|
<i class="ti ti-download label-icon label-icon-dark"></i>
|
|
Alert with lable icons - check out!
|
|
</p>
|
|
<div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card cheatsheets-card box-template-list toggle-card">
|
|
<div class="card-header p-0">
|
|
<a aria-controls="buttons"
|
|
aria-expanded="false"
|
|
class="btn btn-primary w-100 text-start f-s-18 f-w-500 rounded-bottom-0 py-2 box-template-name"
|
|
data-bs-toggle="collapse"
|
|
href="cheatsheet.html#buttons">
|
|
Button
|
|
</a>
|
|
</div>
|
|
<div class="collapse card-body show p-0" id="buttons">
|
|
<ul>
|
|
<li class="list-item-preview d-flex gap-2" data-header="button-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('buttonPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#buttonPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="buttonPrimaryClass">btn-primary</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="buttonPrimaryCode">
|
|
<button type="button" class="btn btn-primary">Primary</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="button-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('buttonSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#buttonSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="buttonSecondaryClass">btn-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="buttonSecondaryCode">
|
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="button-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('buttonSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#buttonSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="buttonSuccessClass">btn-success</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="buttonSuccessCode">
|
|
<button type="button" class="btn btn-success">Success</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="button-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('buttonDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#buttonDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="buttonDangerClass">btn-danger</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="buttonDangerCode">
|
|
<button type="button" class="btn btn-danger">Danger</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="button-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('buttonWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#buttonWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="buttonWarningClass">btn-warning</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="buttonWarningCode">
|
|
<button type="button" class="btn btn-warning">Warning</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="button-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('buttonInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#buttonInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="buttonInfoClass">btn-info</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="buttonInfoCode">
|
|
<button type="button" class="btn btn-info">Info</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="button-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('buttonLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#buttonLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="buttonLightClass">btn-light</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="buttonLightCode">
|
|
<button type="button" class="btn btn-light">Light</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="button-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('buttonDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#buttonDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="buttonDarkClass">btn-dark</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="buttonDarkCode">
|
|
<button type="button" class="btn btn-dark">Dark</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="button-outline-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-outline-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnOutlinePrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnOutlinePrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnOutlinePrimaryClass">
|
|
btn-outline-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnOutlinePrimaryCode">
|
|
<button type="button" class="btn btn-outline-primary">Primary</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="button-outline-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-outline-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnOutlineSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnOutlineSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnOutlineSecondaryClass">
|
|
btn-outline-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnOutlineSecondaryCode">
|
|
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="button-outline-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-outline-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnOutlineSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnOutlineSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnOutlineSuccessClass">
|
|
btn-outline-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnOutlineSuccessCode">
|
|
<button type="button" class="btn btn-outline-success">Success</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="button-outline-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-outline-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnOutlineDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnOutlineDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnOutlineDangerClass">
|
|
btn-outline-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnOutlineDangerCode">
|
|
<button type="button" class="btn btn-outline-danger">Danger</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="button-outline-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-outline-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnOutlineWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnOutlineWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnOutlineWarningClass">
|
|
btn-outline-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnOutlineWarningCode">
|
|
<button type="button" class="btn btn-outline-warning">Warning</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="button-outline-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-outline-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnOutlineInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnOutlineInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnOutlineInfoClass">
|
|
btn-outline-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnOutlineInfoCode">
|
|
<button type="button" class="btn btn-outline-info">Info</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="button-outline-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-outline-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnOutlineLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnOutlineLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnOutlineLightClass">
|
|
btn-outline-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnOutlineLightCode">
|
|
<button type="button" class="btn btn-outline-light">Light</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="button-outline-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-outline-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnOutlineDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnOutlineDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnOutlineDarkClass">
|
|
btn-outline-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnOutlineDarkCode">
|
|
<button type="button" class="btn btn-outline-dark">Dark</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="button-light-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-light-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnLightPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnLightPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnLightPrimaryClass">
|
|
btn-light-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnLightPrimaryCode">
|
|
<button type="button" class="btn btn-light-primary">Primary</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="button-light-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-light-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnLightSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnLightSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnLightSecondaryClass">
|
|
btn-light-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnLightSecondaryCode">
|
|
<button type="button" class="btn btn-light-secondary">Secondary</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="button-light-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-light-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnLightSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnLightSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnLightSuccessClass">
|
|
btn-light-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnLightSuccessCode">
|
|
<button type="button" class="btn btn-light-success">Success</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="button-light-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-light-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnLightDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnLightDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnLightDangerClass">
|
|
btn-light-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnLightDangerCode">
|
|
<button type="button" class="btn btn-light-danger">Danger</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="button-light-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-light-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnLightWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnLightWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnLightWarningClass">
|
|
btn-light-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnLightWarningCode">
|
|
<button type="button" class="btn btn-light-warning">Warning</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="button-light-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-light-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnLightInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnLightInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnLightInfoClass">btn-light-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnLightInfoCode">
|
|
<button type="button" class="btn btn-light-info">Info</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="button-light-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-light-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnLightLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnLightLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnLightLightClass">btn-light-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnLightLightCode">
|
|
<button type="button" class="btn btn-light-light">Light</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="button-light-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-light-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnLightDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnLightDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnLightDarkClass">btn-light-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnLightDarkCode">
|
|
<button type="button" class="btn btn-light-dark">Dark</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-icon">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> icon-btn</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnIconClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnIconCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnIconClass">icon-btn</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnIconCode">
|
|
<button type="button" class="btn btn-primary icon-btn b-r-4"> <i
|
|
class="ti ti-capture"></i></button>
|
|
|
|
<button type="button" class="btn btn-secondary icon-btn b-r-4"><i
|
|
class="ti ti-bell-ringing"></i></button>
|
|
|
|
<button type="button" class="btn btn-outline-primary icon-btn b-r-4"> <i
|
|
class="ti ti-capture"></i></button>
|
|
|
|
<button type="button" class="btn btn-outline-secondary icon-btn b-r-4"><i
|
|
class="ti ti-bell-ringing"></i></button>
|
|
|
|
<button type="button" class="btn btn-light-primary icon-btn b-r-4">
|
|
<i class="ti ti-capture"></i></button>
|
|
|
|
<button type="button" class="btn btn-light-secondary icon-btn b-r-4"><i
|
|
class="ti ti-bell-ringing"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-facebook">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-facebook</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnFacebookClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnFacebookCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnFacebookClass">btn-facebook</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnFacebookCode">
|
|
<button type="button" class="btn btn-facebook icon-btn b-r-22"><i
|
|
class="ti ti-brand-facebook text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-twitter">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-twitter</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnTwitterClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnTwitterCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnTwitterClass">btn-twitter</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnTwitterCode">
|
|
<button type="button" class="btn btn-twitter icon-btn b-r-22"><i
|
|
class="ti ti-brand-twitter text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-pinterest">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-pinterest</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnPinterestClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnPinterestCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnPinterestClass">btn-pinterest
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnPinterestCode">
|
|
<button type="button" class="btn btn-pinterest icon-btn b-r-22"><i
|
|
class="ti ti-brand-pinterest text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-linkedin">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-linkedin</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnLinkedinClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnLinkedinCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnLinkedinClass">btn-linkedin</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnLinkedinCode">
|
|
<button type="button" class="btn btn-linkedin icon-btn b-r-22"><i
|
|
class="ti ti-brand-linkedin text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-reddit">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-reddit</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnRedditClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnRedditCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnRedditClass">btn-reddit</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnRedditCode">
|
|
<button type="button" class="btn btn-reddit icon-btn b-r-22"><i
|
|
class="ti ti-brand-reddit text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-whatsapp">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-whatsapp</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnWhatsappClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnWhatsappCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnWhatsappClass">btn-whatsapp</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnWhatsappCode">
|
|
<button type="button" class="btn btn-whatsapp icon-btn b-r-22"><i
|
|
class="ti ti-brand-whatsapp text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-gmail">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-gmail</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnGmailClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnGmailCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnGmailClass">btn-gmail</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnGmailCode">
|
|
<button type="button" class="btn btn-gmail icon-btn b-r-22"><i
|
|
class="ti ti-brand-gmail text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-telegram">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-telegram</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnTelegramClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnTelegramCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnTelegramClass">btn-telegram</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnTelegramCode">
|
|
<button type="button" class="btn btn-telegram icon-btn b-r-22"><i
|
|
class="ti ti-brand-telegram text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-youtube">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-youtube</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnYoutubeClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnYoutubeCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnYoutubeClass">btn-youtube</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnYoutubeCode">
|
|
<button type="button" class="btn btn-youtube icon-btn b-r-22"><i
|
|
class="ti ti-brand-youtube text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-vimeo">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-vimeo</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnVimeoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnVimeoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnVimeoClass">btn-vimeo</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnVimeoCode">
|
|
<button type="button" class="btn btn-vimeo icon-btn b-r-22"><i
|
|
class="ti ti-brand-vimeo text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-behance">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-behance</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnBehanceClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnBehanceCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnBehanceClass">btn-behance</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnBehanceCode">
|
|
<button type="button" class="btn btn-behance icon-btn b-r-22"><i
|
|
class="ti ti-brand-behance text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-github">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-github</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnGithubClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnGithubCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnGithubClass">btn-github</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnGithubCode">
|
|
<button type="button" class="btn btn-github icon-btn b-r-22"><i
|
|
class="ti ti-brand-github text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-skype">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-skype</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnSkypeClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnSkypeCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnSkypeClass">btn-skype</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnSkypeCode">
|
|
<button type="button" class="btn btn-skype icon-btn b-r-22"><i
|
|
class="ti ti-brand-skype text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="btn-snapchat">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> btn-snapchat</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('btnSnapchatClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#btnSnapchatCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="btnSnapchatClass">btn-snapchat</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="btnSnapchatCode">
|
|
<button type="button" class="btn btn-snapchat icon-btn b-r-22"><i
|
|
class="ti ti-brand-snapchat text-white"></i></button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card cheatsheets-card box-template-list toggle-card">
|
|
<div class="card-header p-0">
|
|
<a aria-controls="cards"
|
|
aria-expanded="false"
|
|
class="btn btn-primary w-100 text-start f-s-18 f-w-500 rounded-bottom-0 py-2 box-template-name"
|
|
data-bs-toggle="collapse"
|
|
href="cheatsheet.html#cards">
|
|
Cards
|
|
</a>
|
|
</div>
|
|
<div class="collapse card-body show p-0" id="cards">
|
|
<ul>
|
|
<li class="list-item-preview d-flex gap-2" data-header="card">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> card</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardClass">card</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardCode">
|
|
<div class="card hover-effect">
|
|
<div class="card-header">
|
|
<h6 class="mb-0 mt-2 f-w-600">My Profile</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>
|
|
....
|
|
</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<i class="ti ti-heart-filled text-danger f-s-16 m-r-5"> </i>
|
|
<span> 60 likes </span>
|
|
</div>
|
|
<div class="col-6">
|
|
<ul class="avatar-group float-end">
|
|
<li class="h-25 w-25 d-flex-center b-r-50 text-bg-danger b-2-light position-relative"
|
|
data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
|
|
<img src="../assets/images/avatar/4.png" alt="" class="img-fluid b-r-50 overflow-hidden">
|
|
</li>
|
|
<li class="h-25 w-25 d-flex-center b-r-50 text-bg-info b-2-light position-relative"
|
|
data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
|
|
<img src="../assets/images/avatar/3.png" alt="" class="img-fluid b-r-50 overflow-hidden">
|
|
</li>
|
|
<li class="text-bg-primary h-25 w-25 d-flex-center b-r-50" data-bs-toggle="tooltip"
|
|
data-bs-title="5 More">
|
|
5+
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="card-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardPrimaryClass">card-primary</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardPrimaryCode">
|
|
<div class="card hover-effect card-primary">
|
|
<div class="card-header">
|
|
<h5>primary card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="card-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardSecondaryClass">card-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardSecondaryCode">
|
|
<div class="card hover-effect card-secondary">
|
|
<div class="card-header">
|
|
<h5>secondary card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="card-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardSuccessClass">card-success</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardSuccessCode">
|
|
<div class="card hover-effect card-success">
|
|
<div class="card-header">
|
|
<h5>success card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="card-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardDangerClass">card-danger</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardDangerCode">
|
|
<div class="card hover-effect card-danger">
|
|
<div class="card-header">
|
|
<h5>danger card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="card-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardWarningClass">card-warning</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardWarningCode">
|
|
<div class="card hover-effect card-warning">
|
|
<div class="card-header">
|
|
<h5>warning card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="card-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardInfoClass">card-info</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardInfoCode">
|
|
<div class="card hover-effect card-info">
|
|
<div class="card-header">
|
|
<h5>info card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="card-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardLightClass">card-light</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardLightCode">
|
|
<div class="card hover-effect card-light">
|
|
<div class="card-header">
|
|
<h5>light card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="card-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardDarkClass">card-dark</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardDarkCode">
|
|
<div class="card hover-effect card-dark">
|
|
<div class="card-header">
|
|
<h5>dark card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="card-outline-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-outline-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardOutlinePrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardOutlinePrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardOutlinePrimaryClass">
|
|
card-outline-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardOutlinePrimaryCode">
|
|
<div class="card hover-effect card-outline-primary">
|
|
<div class="card-header">
|
|
<h5>Outline card-outline-primary card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="card-outline-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-outline-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardOutlineSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardOutlineSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardOutlineSecondaryClass">
|
|
card-outline-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardOutlineSecondaryCode">
|
|
<div class="card hover-effect card-outline-secondary">
|
|
<div class="card-header">
|
|
<h5>Outline card-outline-secondary card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="card-outline-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-outline-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardOutlineSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardOutlineSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardOutlineSuccessClass">
|
|
card-outline-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardOutlineSuccessCode">
|
|
<div class="card hover-effect card-outline-success">
|
|
<div class="card-header">
|
|
<h5>Outline card-outline-success card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="card-outline-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-outline-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardOutlineDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardOutlineDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardOutlineDangerClass">
|
|
card-outline-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardOutlineDangerCode">
|
|
<div class="card hover-effect card-outline-danger">
|
|
<div class="card-header">
|
|
<h5>Outline card-outline-danger card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="card-outline-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-outline-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardOutlineWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardOutlineWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardOutlineWarningClass">
|
|
card-outline-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardOutlineWarningCode">
|
|
<div class="card hover-effect card-outline-warning">
|
|
<div class="card-header">
|
|
<h5>Outline card-outline-warning card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="card-outline-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-outline-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardOutlineInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardOutlineInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardOutlineInfoClass">
|
|
card-outline-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardOutlineInfoCode">
|
|
<div class="card hover-effect card-outline-info">
|
|
<div class="card-header">
|
|
<h5>Outline card-outline-info card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="card-outline-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-outline-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardOutlineLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardOutlineLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardOutlineLightClass">
|
|
card-outline-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardOutlineLightCode">
|
|
<div class="card hover-effect card-outline-light">
|
|
<div class="card-header">
|
|
<h5>Outline card-outline-light card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="card-outline-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">card-outline-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardOutlineDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardOutlineDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardOutlineDarkClass">
|
|
card-outline-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardOutlineDarkCode">
|
|
<div class="card hover-effect card-outline-dark">
|
|
<div class="card-header">
|
|
<h5>Outline card-outline-dark card</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Card body</h6>
|
|
<p>...</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="icon-bg">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">icon-bg</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardIconBgClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardIconBgCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardIconBgClass">icon-bg</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardIconBgCode">
|
|
<div class="col-lg-8 offset-lg-2">
|
|
<div class="card hover-effect card-primary">
|
|
<div class="card-body">
|
|
<i class="ti ti-alarm icon-bg"></i>
|
|
<h6>Card With icon</h6>
|
|
<p>With supporting text below lead-in to additional content below as a natural.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="border-top">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">border-primary border-top</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardBorderTopClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardBorderTopCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardBorderTopClass">border-primary
|
|
border-top
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardBorderTopCode">
|
|
<div class="card hover-effect border-primary border-top border-4">
|
|
<div class="card-body">
|
|
<h6>Card With Top border</h6>
|
|
<p>With supporting text below lead-in to additional content below as a natural.</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="border-bottom">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">border-secondary border-bottom</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardBorderBottomClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardBorderBottomCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardBorderBottomClass">
|
|
border-secondary border-bottom
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardBorderBottomCode">
|
|
<div class="card hover-effect border-secondary border-bottom border-4">
|
|
<div class="card-body">
|
|
<h6>Card With Bottom border</h6>
|
|
<p>With supporting text below lead-in to additional content below as a natural.</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="border-start">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">border-success border-start</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardBorderStartClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardBorderStartCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardBorderStartClass">border-success
|
|
border-start
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardBorderStartCode">
|
|
<div class="card hover-effect border-success border-start border-4">
|
|
<div class="card-body">
|
|
<h6>Card With Start border</h6>
|
|
<p>With supporting text below lead-in to additional content below as a natural.</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="border-end">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">border-danger border-end</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('cardBorderEndClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#cardBorderEndCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="cardBorderEndClass">border-danger
|
|
border-end
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="cardBorderEndCode">
|
|
<div class="card hover-effect border-danger border-end border-4">
|
|
<div class="card-body">
|
|
<h6>Card With End border</h6>
|
|
<p>With supporting text below lead-in to additional content below as a natural.</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card cheatsheets-card box-template-list toggle-card">
|
|
<div class="card-header p-0">
|
|
<a aria-controls="dropdown"
|
|
aria-expanded="false"
|
|
class="btn btn-primary w-100 text-start f-s-18 f-w-500 rounded-bottom-0 py-2 box-template-name"
|
|
data-bs-toggle="collapse"
|
|
href="cheatsheet.html#dropdown">
|
|
Dropdown
|
|
</a>
|
|
</div>
|
|
<div class="collapse card-body show p-0" id="dropdown">
|
|
<ul>
|
|
<li class="list-item-preview d-flex gap-2" data-header="app-dropdown">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> app-dropdown</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('appDropdownClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#appDropdownCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="appDropdownClass">app-dropdown</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="appDropdownCode">
|
|
<div class="card">
|
|
<div class="card-body d-flex flex-wrap gap-2">
|
|
<div class="app-dropdown">
|
|
<button class="btn btn-primary border-0 " type="button" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="outside" aria-expanded="false">
|
|
Clickable Submenu
|
|
</button>
|
|
<div class="dropdown-menu mb-3">
|
|
<a href="#" class="dropdown-item">
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus ms-auto"></i>
|
|
</a>
|
|
<hr class="dropdown-divider">
|
|
<a class="dropdown-item border-0" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span>More Option</span>
|
|
<i class="ti ti-arrow-badge-right ms-auto"></i>
|
|
</a>
|
|
<div class="dropdown-menu sub-menu">
|
|
<a href="#" class="dropdown-item">
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus ms-auto"></i>
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation ms-auto"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hover-dropdown app-hover-dropdown">
|
|
<button class="btn btn-primary dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown"
|
|
data-trigger="hover" aria-expanded="false">
|
|
Hoverable Dropdown
|
|
</button>
|
|
<ul class="dropdown-menu bg-dark">
|
|
<li class="dropdown-item">
|
|
<a href="#">
|
|
<span> Action</span>
|
|
</a>
|
|
<i class="ti ti-user-plus ms-auto"></i>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="#">
|
|
<span>Another action</span>
|
|
</a>
|
|
<i class="ti ti-circles-relation ms-auto"></i>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="#">
|
|
<span>Something else here</span>
|
|
</a>
|
|
<i class="ti ti-message-circle ms-auto"></i>
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li class="hover-dropdown">
|
|
<a role="button" class="dropdown-item waves-effect waves-light" data-bs-toggle="dropdown"
|
|
data-trigger="hover" aria-expanded="false">
|
|
More Option
|
|
</a>
|
|
<ul class="dropdown-menu hover-submenu bg-dark">
|
|
<li class="dropdown-item">
|
|
<a href="#">
|
|
<span> Action</span>
|
|
</a>
|
|
<i class="ti ti-user-plus ms-auto"></i>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="#">
|
|
<span>Another action</span>
|
|
</a>
|
|
<i class="ti ti-circles-relation ms-auto"></i>
|
|
</li>
|
|
<li class="dropdown-item">
|
|
<a href="#">
|
|
<span>Something else here</span>
|
|
</a>
|
|
<i class="ti ti-message-circle ms-auto"></i>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-dropdown primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> app-dropdown primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('appdropdownPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#appdropdownPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="appdropdownPrimaryClass">btn
|
|
btn-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="appdropdownPrimaryCode">
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
primary <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<!-- item-->
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-dropdown secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> app-dropdown secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('appdropdownSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#appdropdownSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="appdropdownSecondaryClass">btn
|
|
btn-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="appdropdownSecondaryCode">
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
secondary <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<!-- item-->
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-dropdown success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> app-dropdown success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('appdropdownSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#appdropdownSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="appdropdownSuccessClass">btn
|
|
btn-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="appdropdownSuccessCode">
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
success <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<!-- item-->
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-dropdown danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> app-dropdown danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('appdropdownDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#appdropdownDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="appdropdownDangerClass">btn
|
|
btn-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="appdropdownDangerCode">
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
danger <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<!-- item-->
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-dropdown warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> app-dropdown warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('appdropdownWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#appdropdownWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="appdropdownWarningClass">btn
|
|
btn-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="appdropdownWarningCode">
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
warning <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<!-- item-->
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="app-dropdown info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> app-dropdown info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('appdropdownInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#appdropdownInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="appdropdownInfoClass">btn btn-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="appdropdownInfoCode">
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
info <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<!-- item-->
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="app-dropdown light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> app-dropdown light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('appdropdownLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#appdropdownLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="appdropdownLightClass">btn
|
|
btn-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="appdropdownLightCode">
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
light <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<!-- item-->
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="app-dropdown dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> app-dropdown dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('appdropdownDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#appdropdownDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="appdropdownDarkClass">btn btn-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="appdropdownDarkCode">
|
|
<div class="btn-group btn-rtl">
|
|
<button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
dark <i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<!-- item-->
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="dropdown-menu menu-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> dropdown-menu menu-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dropdownMenuPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dropdownMenuPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dropdownMenuPrimaryClass">btn
|
|
btn-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dropdownMenuPrimaryCode">
|
|
<div class="app-dropdown">
|
|
<button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="true" aria-expanded="false">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-primary show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="dropdown-menu menu-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> dropdown-menu menu-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dropdownMenuSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dropdownMenuSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dropdownMenuSecondaryClass">btn
|
|
btn-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dropdownMenuSecondaryCode">
|
|
<div class="app-dropdown">
|
|
<button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="true" aria-expanded="false">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-secondary show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="dropdown-menu menu-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> dropdown-menu menu-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dropdownMenuSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dropdownMenuSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dropdownMenuSuccessClass">btn
|
|
btn-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dropdownMenuSuccessCode">
|
|
<div class="app-dropdown">
|
|
<button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="true" aria-expanded="false">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-success show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="dropdown-menu menu-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> dropdown-menu menu-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dropdownMenuDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dropdownMenuDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dropdownMenuDangerClass">btn
|
|
btn-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dropdownMenuDangerCode">
|
|
<div class="app-dropdown">
|
|
<button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="true" aria-expanded="false">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-danger show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="dropdown-menu menu-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> dropdown-menu menu-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dropdownMenuWarningrClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dropdownMenuWarningrCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dropdownMenuWarningrClass">btn
|
|
btn-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dropdownMenuWarningrCode">
|
|
<div class="app-dropdown">
|
|
<button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="true" aria-expanded="false">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-warning show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="dropdown-menu menu-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> dropdown-menu menu-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dropdownMenuInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dropdownMenuInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dropdownMenuInfoClass">btn btn-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dropdownMenuInfoCode">
|
|
<div class="app-dropdown">
|
|
<button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="true" aria-expanded="false">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-info show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="dropdown-menu menu-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> dropdown-menu menu-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dropdownMenuLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dropdownMenuLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dropdownMenuLightClass">btn
|
|
btn-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dropdownMenuLightCode">
|
|
<div class="app-dropdown">
|
|
<button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="true" aria-expanded="false">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-light show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="dropdown-menu menu-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> dropdown-menu menu-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dropdownMenuDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dropdownMenuDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dropdownMenuDarkClass">btn btn-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dropdownMenuDarkCode">
|
|
<div class="app-dropdown">
|
|
<button class="btn border-0 icon-btn" type="button" data-bs-toggle="dropdown"
|
|
data-bs-auto-close="true" aria-expanded="false">
|
|
<i class="ti ti-dots"></i>
|
|
</button>
|
|
<ul class="dropdown-menu menu-dark show">
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span> Action</span>
|
|
<i class="ti ti-user-plus"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Another action</span>
|
|
<i class="ti ti-circles-relation"></i>
|
|
</li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Something else here</span>
|
|
<i class="ti ti-message-circle"></i>
|
|
</li>
|
|
<li class="dropdown-divider"></li>
|
|
<li class="dropdown-item d-flex justify-content-between">
|
|
<span>Settings</span>
|
|
<i class="ti ti-settings"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card cheatsheets-card box-template-list toggle-card">
|
|
<div class="card-header p-0">
|
|
<a aria-controls="avatar"
|
|
aria-expanded="false"
|
|
class="btn btn-primary w-100 text-start f-s-18 f-w-500 rounded-bottom-0 py-2 box-template-name"
|
|
data-bs-toggle="collapse"
|
|
href="cheatsheet.html#avatar">
|
|
Avatar
|
|
</a>
|
|
</div>
|
|
<div class="collapse card-body show p-0" id="avatar">
|
|
<ul>
|
|
<li class="list-item-preview d-flex gap-2" data-header="avatar-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> Primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarPrimaryClass">bg-primary h-45
|
|
w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarPrimaryCode">
|
|
<span class="bg-primary h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="avatar-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> Secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarSecondaryClass">bg-secondary
|
|
h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarSecondaryCode">
|
|
<span class="bg-secondary h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="avatar-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> Success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarSuccessClass">bg-success h-45
|
|
w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarSuccessCode">
|
|
<span class="bg-success h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="avatar-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> Danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarDangerClass">bg-danger h-45 w-45
|
|
d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarDangerCode">
|
|
<span class="bg-danger h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="avatar-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> Warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarWarningClass">bg-warning h-45
|
|
w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarWarningCode">
|
|
<span class="bg-warning h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="avatar-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> Info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarInfoClass">bg-info h-45 w-45
|
|
d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarInfoCode">
|
|
<span class="bg-info h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="avatar-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> Light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarLightClass">bg-light h-45 w-45
|
|
d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarLightCode">
|
|
<span class="bg-light h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="avatar-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> Dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarDarkClass">bg-dark h-45 w-45
|
|
d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarDarkCode">
|
|
<span class="bg-dark h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="text-outline-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-outline-primary </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarOutlinePrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarOutlinePrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarOutlinePrimaryClass">
|
|
text-outline-primary h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarOutlinePrimaryCode">
|
|
<span class="text-outline-primary h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="text-outline-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-outline-secondary </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarOutlineSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarOutlineSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarOutlineSecondaryClass">
|
|
text-outline-secondary h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarOutlineSecondaryCode">
|
|
<span class="text-outline-secondary h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="text-outline-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-outline-success </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarOutlineSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarOutlineSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarOutlineSuccessClass">
|
|
text-outline-success h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarOutlineSuccessCode">
|
|
<span class="text-outline-success h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="text-outline-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-outline-danger </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarOutlineDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarOutlineDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarOutlineDangerClass">
|
|
text-outline-danger h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarOutlineDangerCode">
|
|
<span class="text-outline-danger h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="text-outline-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-outline-warning </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarOutlineWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarOutlineWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarOutlineWarningClass">
|
|
text-outline-warning h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarOutlineWarningCode">
|
|
<span class="text-outline-warning h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="text-outline-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-outline-info </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarOutlineInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarOutlineInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarOutlineInfoClass">
|
|
text-outline-info h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarOutlineInfoCode">
|
|
<span class="text-outline-info h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="text-outline-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-outline-light </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarOutlineLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarOutlineLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarOutlineLightClass">
|
|
text-outline-light h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarOutlineLightCode">
|
|
<span class="text-outline-light h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="text-outline-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-outline-dark </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarOutlineDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarOutlineDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarOutlineDarkClass">
|
|
text-outline-dark h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarOutlineDarkCode">
|
|
<span class="text-outline-dark h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="avatar images">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> avatar images </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarImagesCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarImagesCode">
|
|
<div class="d-flex gap-3 flex-wrap">
|
|
<div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary">
|
|
<img src="../assets/images/avatar/1.png" alt="" class="img-fluid">
|
|
</div>
|
|
<div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-secondary">
|
|
<img src="../assets/images/avatar/2.png" alt="" class="img-fluid">
|
|
</div>
|
|
<div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success">
|
|
<img src="../assets/images/avatar/3.png" alt="" class="img-fluid">
|
|
</div>
|
|
<div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-info">
|
|
<img src="../assets/images/avatar/4.png" alt="" class="img-fluid">
|
|
</div>
|
|
<div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success">
|
|
<img src="../assets/images/avatar/5.png" alt="" class="img-fluid">
|
|
</div>
|
|
<div class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger">
|
|
<img src="../assets/images/avatar/6.png" alt="" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="avatar size">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> avatar size </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarSizeCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarSizeCode">
|
|
<div class="d-flex gap-3 flex-wrap">
|
|
<span class="bg-secondary h-30 w-30 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
<span class="bg-success h-35 w-35 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
<span class="bg-info h-40 w-40 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
<span class="bg-warning h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
<span class="bg-danger h-50 w-50 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="text-light-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-light-primary </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarLightPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarLightPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarLightPrimaryClass">
|
|
text-light-primary h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarLightPrimaryCode">
|
|
<span class="text-light-primary h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="text-light-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-light-secondary </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarLightSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarLightSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarLightSecondaryClass">
|
|
text-light-secondary h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarLightSecondaryCode">
|
|
<span class="text-light-secondary h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="text-light-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-light-success </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarLightSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarLightSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarLightSuccessClass">
|
|
text-light-success h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarLightSuccessCode">
|
|
<span class="text-light-success h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="text-light-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-light-danger </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarLightDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarLightDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarLightDangerClass">
|
|
text-light-danger h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarLightDangerCode">
|
|
<span class="text-light-danger h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="text-light-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-light-warning </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarLightWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarLightWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarLightWarningClass">
|
|
text-light-warning h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarLightWarningCode">
|
|
<span class="text-light-warning h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="text-light-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-light-info </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarLightInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarLightInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarLightInfoClass">text-light-info
|
|
h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarLightInfoCode">
|
|
<span class="text-light-info h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="text-light-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-light-light </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarLightLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarLightLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarLightLightClass">
|
|
text-light-light h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarLightLightCode">
|
|
<span class="text-light-light h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="text-light-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> text-light-dark </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('avatarLightDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarLightDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="avatarLightDarkClass">text-light-dark
|
|
h-45 w-45 d-flex-center b-r-50
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarLightDarkCode">
|
|
<span class="text-light-dark h-45 w-45 d-flex-center b-r-50">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="avatar Radius">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> avatar Radius </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarRadiusCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarRadiusCode">
|
|
|
|
<div class="d-flex gap-3 flex-wrap">
|
|
<span class="text-light-primary h-45 w-45 d-flex-center b-r-0">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
|
|
<span class="text-light-secondary h-45 w-45 d-flex-center b-r-6">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
|
|
<span class="text-light-success h-45 w-45 d-flex-center b-r-10">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
|
|
<span class="text-light-info h-45 w-45 d-flex-center b-r-14">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
|
|
<span class="text-light-warning h-45 w-45 d-flex-center b-r-20">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
|
|
<span class="text-light-danger h-45 w-45 d-flex-center b-r-30">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="Avatar group">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> Avatar group </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#avatarGroupCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="avatarGroupCode">
|
|
|
|
<div class="d-flex gap-3 flex-wrap">
|
|
|
|
<ul class="avatar-group">
|
|
<li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary b-2-light"
|
|
data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
|
|
<img src="../assets/images/avatar/4.png" alt="" class="img-fluid">
|
|
</li>
|
|
<li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success b-2-light"
|
|
data-bs-toggle="tooltip" data-bs-title="Eva Bailey">
|
|
<img src="../assets/images/avatar/5.png" alt="" class="img-fluid">
|
|
</li>
|
|
<li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger b-2-light"
|
|
data-bs-toggle="tooltip" data-bs-title="Michael Hughes">
|
|
<img src="../assets/images/avatar/6.png" alt="" class="img-fluid">
|
|
</li>
|
|
<li class="text-bg-secondary h-35 w-35 d-flex-center b-r-50" data-bs-toggle="tooltip"
|
|
data-bs-title="10 More">
|
|
10+
|
|
</li>
|
|
</ul>
|
|
<ul class="avatar-group">
|
|
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-danger b-2-light position-relative"
|
|
data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
|
|
<span
|
|
class="position-absolute top-0 start-2 p-1 bg-danger border border-light rounded-circle"></span>
|
|
<img src="../assets/images/avatar/4.png" alt="" class="img-fluid b-r-50 overflow-hidden">
|
|
</li>
|
|
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-success b-2-light position-relative"
|
|
data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
|
|
<span
|
|
class="position-absolute top-0 start-2 p-1 bg-success border border-light rounded-circle"></span>
|
|
<img src="../assets/images/avatar/1.png" alt="" class="img-fluid b-r-50 overflow-hidden">
|
|
</li>
|
|
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-warning b-2-light position-relative"
|
|
data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
|
|
<span
|
|
class="position-absolute top-0 start-2 p-1 bg-warning border border-light rounded-circle"></span>
|
|
<img src="../assets/images/avatar/2.png" alt="" class="img-fluid b-r-50 overflow-hidden">
|
|
</li>
|
|
<li class="h-45 w-45 d-flex-center b-r-50 text-bg-info b-2-light position-relative"
|
|
data-bs-toggle="tooltip" data-bs-title="Sabrina Torres">
|
|
<span
|
|
class="position-absolute top-0 start-2 p-1 bg-info border border-light rounded-circle"></span>
|
|
<img src="../assets/images/avatar/3.png" alt="" class="img-fluid b-r-50 overflow-hidden">
|
|
</li>
|
|
<li class="text-bg-primary h-35 w-35 d-flex-center b-r-50" data-bs-toggle="tooltip"
|
|
data-bs-title="5 More">
|
|
5+
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card cheatsheets-card box-template-list toggle-card">
|
|
<div class="card-header p-0">
|
|
<a aria-controls="tabs"
|
|
aria-expanded="false"
|
|
class="btn btn-primary w-100 text-start f-s-18 f-w-500 rounded-bottom-0 py-2 box-template-name"
|
|
data-bs-toggle="collapse"
|
|
href="cheatsheet.html#tabs">
|
|
Tabs
|
|
</a>
|
|
</div>
|
|
<div class="collapse card-body show p-0" id="tabs">
|
|
<ul>
|
|
<li class="list-item-preview d-flex gap-2" data-header="tabs-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> app-tabs-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('tabsPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#tabsPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="tabsPrimaryClass">app-tabs-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="tabsPrimaryCode">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<ul class="nav nav-tabs app-tabs-primary" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="html-tab" data-bs-toggle="tab"
|
|
data-bs-target="#html-tab-pane" type="button" role="tab" aria-controls="html-tab-pane"
|
|
aria-selected="true">HTML</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="css-tab" data-bs-toggle="tab" data-bs-target="#css-tab-pane"
|
|
type="button" role="tab" aria-controls="css-tab-pane" aria-selected="false">CSS</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="php-tab" data-bs-toggle="tab" data-bs-target="#php-tab-pane"
|
|
type="button" role="tab" aria-controls="php-tab-pane" aria-selected="false">PHP</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="BasicContent">
|
|
<div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel"
|
|
aria-labelledby="html-tab" tabindex="0">
|
|
<p>Hypertext Markup Language is the standard markup language for documents designed to be
|
|
displayed in a web browser.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="css-tab-pane" role="tabpanel" aria-labelledby="css-tab"
|
|
tabindex="0">
|
|
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
|
|
of a document written in a markup language like HTML.</p>
|
|
<p>CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="php-tab-pane" role="tabpanel" aria-labelledby="php-tab"
|
|
tabindex="0">
|
|
<p>PHP is a popular general-purpose scripting language that is especially suited to web
|
|
development.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="tabs-outline-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> tab-outline-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('tabsOutlineClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#tabsOutlineCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="tabsOutlineClass">
|
|
tab-outline-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="tabOutlineCode">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<ul class="nav nav-tabs tab-outline-primary" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="connect-tab" data-bs-toggle="tab"
|
|
data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
|
|
aria-selected="true">Connect</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="discover-tab" data-bs-toggle="tab"
|
|
data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
|
|
aria-selected="false">Discover</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
|
|
type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="OutlineContent">
|
|
<div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
|
|
aria-labelledby="connect-tab" tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab one.</h6>
|
|
...
|
|
</div>
|
|
<div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
|
|
tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab two.</h6>
|
|
...
|
|
</div>
|
|
<div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
|
|
tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab three.</h6>
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="tabs-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> tab-light-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('tabsLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#tabsLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="tabsLightClass">tab-light-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="tabLightCode">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<ul class="nav nav-tabs tab-light-primary" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="connect-tab" data-bs-toggle="tab"
|
|
data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
|
|
aria-selected="true">Connect</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="discover-tab" data-bs-toggle="tab"
|
|
data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
|
|
aria-selected="false">Discover</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
|
|
type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="OutlineContent">
|
|
<div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
|
|
aria-labelledby="connect-tab" tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab one.</h6>
|
|
...
|
|
</div>
|
|
<div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
|
|
tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab two.</h6>
|
|
...
|
|
</div>
|
|
<div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
|
|
tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab three.</h6>
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="tabs-vertical">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> vertical-tab</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('tabsVerticalClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#tabsVerticalCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="tabsVerticalClass"> vertical-tab
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="tabVerticalCode">
|
|
<div class="card">
|
|
<div class="card-body vertical-tab">
|
|
<ul class="nav nav-tabs tab-light-secondary ms-3" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="connect-tab" data-bs-toggle="tab"
|
|
data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
|
|
aria-selected="true">Connect</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="discover-tab" data-bs-toggle="tab"
|
|
data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
|
|
aria-selected="false">Discover</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
|
|
type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="OutlineContent">
|
|
<div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
|
|
aria-labelledby="connect-tab" tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab one.</h6>
|
|
...
|
|
</div>
|
|
<div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
|
|
tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab two.</h6>
|
|
...
|
|
</div>
|
|
<div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
|
|
tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab three.</h6>
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="tabs-vertical-right">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> vertical-right-tab</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('tabsEndVerticalClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#tabsEndVerticalCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="tabsEndVerticalClass">
|
|
vertical-right-tab
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="tabEndVerticalCode">
|
|
<div class="card">
|
|
<div class="card-body vertical-right-tab">
|
|
<ul class="nav nav-tabs app-tabs-success" id="Outline" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="connect-tab" data-bs-toggle="tab"
|
|
data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
|
|
aria-selected="true">Connect</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="discover-tab" data-bs-toggle="tab"
|
|
data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
|
|
aria-selected="false">Discover</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
|
|
type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="OutlineContent">
|
|
<div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
|
|
aria-labelledby="connect-tab" tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab one.</h6>
|
|
...
|
|
</div>
|
|
<div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
|
|
tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab two.</h6>
|
|
...
|
|
</div>
|
|
<div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
|
|
tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab three.</h6>
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="tabs background">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> tab background </span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#tabsBackgroundCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="tabBackgroundCode">
|
|
<ul class="nav nav-tabs tab-primary bg-primary p-1" id="bg" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="features-tab" data-bs-toggle="tab"
|
|
data-bs-target="#features-tab-pane" type="button" role="tab" aria-controls="features-tab-pane"
|
|
aria-selected="true"> <i class="ti ti-disc pe-1 ps-1"></i> features</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="history-tab" data-bs-toggle="tab"
|
|
data-bs-target="#history-tab-pane" type="button" role="tab" aria-controls="history-tab-pane"
|
|
aria-selected="false"><i class="ti ti-history pe-1 ps-1"></i>History</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="reviews-tab" data-bs-toggle="tab"
|
|
data-bs-target="#reviews-tab-pane" type="button" role="tab" aria-controls="reviews-tab-pane"
|
|
aria-selected="false"><i class="ti ti-star pe-1 ps-1"></i>reviews</button>
|
|
</li>
|
|
|
|
</ul>
|
|
<div class="tab-content" id="bgContent">
|
|
<div class="tab-pane fade show active" id="features-tab-pane" role="tabpanel"
|
|
aria-labelledby="features-tab" tabindex="0">
|
|
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
|
|
identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
|
|
with fragment identifiers to switch between them.</p>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="history-tab-pane" role="tabpanel" aria-labelledby="history-tab"
|
|
tabindex="0">
|
|
<ol>
|
|
<li>Show only the last tab.</li>
|
|
<li>If <code>:target</code> matches a tab, show it and hide all following siblings.</li>
|
|
<li>Matches a tab, show it and hide all following siblings.</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="reviews-tab-pane" role="tabpanel" aria-labelledby="reviews-tab"
|
|
tabindex="0">
|
|
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
|
|
identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
|
|
with fragment identifiers to switch between them.</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bottom-tab">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> bottom-tab</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('tabsBottomClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#tabsBottomCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="tabsBottomClass"> bottom-tab</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="tabBottomCode">
|
|
<div class="card">
|
|
<div class="card-body bottom-tab">
|
|
<ul class="nav nav-tabs app-tabs-success" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="connect-tab" data-bs-toggle="tab"
|
|
data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
|
|
aria-selected="true">Connect</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="discover-tab" data-bs-toggle="tab"
|
|
data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
|
|
aria-selected="false">Discover</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
|
|
type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="OutlineContent">
|
|
<div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
|
|
aria-labelledby="connect-tab" tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab one.</h6>
|
|
...
|
|
</div>
|
|
<div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
|
|
tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab two.</h6>
|
|
...
|
|
</div>
|
|
<div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
|
|
tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab three.</h6>
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="tab-justify-content-around">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> justify-content-around</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('tabsContentAroundClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#tabsContentAroundCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="tabsContentAroundClass">
|
|
justify-content-around
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="tabsContentAroundCode">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<ul class="nav nav-tabs app-tabs-dark justify-content-around" role="tablist">
|
|
<li class="nav-item flex-fill" role="presentation">
|
|
<button class="nav-link w-100 active" id="connect-tab" data-bs-toggle="tab"
|
|
data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
|
|
aria-selected="true">Connect</button>
|
|
</li>
|
|
<li class="nav-item flex-fill" role="presentation">
|
|
<button class="nav-link w-100" id="discover-tab" data-bs-toggle="tab"
|
|
data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
|
|
aria-selected="false">Discover</button>
|
|
</li>
|
|
<li class="nav-item flex-fill" role="presentation">
|
|
<button class="nav-link w-100" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
|
|
type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="OutlineContent">
|
|
<div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
|
|
aria-labelledby="connect-tab" tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab one.</h6>
|
|
...
|
|
</div>
|
|
<div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
|
|
tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab two.</h6>
|
|
...
|
|
</div>
|
|
<div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
|
|
tabindex="0">
|
|
<h6 class="mb-1">This is the content of tab three.</h6>
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="image as nav link">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">image as nav link</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#tabsContentAroundCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="tabContentAroundCode">
|
|
<ul class="nav nav-tabs tab-light-secondary" id="lang-Light" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link gap-2 active" id="lang-home-tab" data-bs-toggle="tab"
|
|
data-bs-target="#lang-home-tab-pane" type="button" role="tab"
|
|
aria-controls="lang-home-tab-pane" aria-selected="true">
|
|
<i class="flag-icon flag-icon-usa"></i>
|
|
USA
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link gap-2" id="lang-profile-tab" data-bs-toggle="tab"
|
|
data-bs-target="#lang-profile-tab-pane" type="button" role="tab"
|
|
aria-controls="lang-profile-tab-pane" aria-selected="false">
|
|
<i class="flag-icon flag-icon-gbr"></i>
|
|
GBR
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link gap-2" id="lang-contact-tab" data-bs-toggle="tab"
|
|
data-bs-target="#lang-contact-tab-pane" type="button" role="tab"
|
|
aria-controls="lang-contact-tab-pane" aria-selected="false">
|
|
<i class="flag-icon flag-icon-deu"></i>
|
|
DEU
|
|
</button>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
<div class="tab-content" id="lang-LightContent">
|
|
<div class="tab-pane fade show active" id="lang-home-tab-pane" role="tabpanel"
|
|
aria-labelledby="lang-home-tab" tabindex="0">
|
|
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
|
|
identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
|
|
with fragment identifiers to switch between them.</p>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="lang-profile-tab-pane" role="tabpanel"
|
|
aria-labelledby="lang-profile-tab" tabindex="0">
|
|
<ol>
|
|
<li>Show only the last tab.</li>
|
|
<li>If <code>:target</code> matches a tab, show it and hide all following siblings.</li>
|
|
<li>Matches a tab, show it and hide all following siblings.</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="lang-contact-tab-pane" role="tabpanel"
|
|
aria-labelledby="lang-contact-tab" tabindex="0">
|
|
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
|
|
identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
|
|
with fragment identifiers to switch between them.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card cheatsheets-card box-template-list toggle-card">
|
|
<div class="card-header p-0">
|
|
<a aria-controls="accordions"
|
|
aria-expanded="false"
|
|
class="btn btn-primary w-100 text-start f-s-18 f-w-500 rounded-bottom-0 py-2 box-template-name"
|
|
data-bs-toggle="collapse"
|
|
href="cheatsheet.html#accordions">
|
|
Accordions
|
|
</a>
|
|
</div>
|
|
<div class="collapse card-body show p-0" id="accordions">
|
|
<ul>
|
|
<li class="list-item-preview d-flex gap-2" data-header="accordions">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> accordion-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('accordionsPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#accordionsPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="accordionsPrimaryClass">
|
|
accordion-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="accordionsPrimaryCode">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="accordion app-accordion accordion-primary">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
Accordion Item #1
|
|
</button>
|
|
</h2>
|
|
<div id="collapseOne" class="accordion-collapse collapse show"
|
|
data-bs-parent="#accordionExample">
|
|
<div class="accordion-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
|
Accordion Item #2
|
|
</button>
|
|
</h2>
|
|
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
|
<div class="accordion-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
|
Accordion Item #3
|
|
</button>
|
|
</h2>
|
|
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
|
<div class="accordion-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="accordions-outline">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> accordion-outline-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('accordionsOutlineClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#accordionsOutlineCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="accordionsOutlineClass">
|
|
accordion-outline-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="accordionsOutlineCode">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="accordion app-accordion accordion-outline-secondary">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#collapseOneOutline" aria-expanded="true"
|
|
aria-controls="collapseOneOutline">
|
|
Accordion Item #1
|
|
</button>
|
|
</h2>
|
|
<div id="collapseOneOutline" class="accordion-collapse collapse show"
|
|
data-bs-parent="#accordionExampleoutlineoutline">
|
|
<div class="accordion-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#collapseTwooutline" aria-expanded="false"
|
|
aria-controls="collapseTwooutline">
|
|
Accordion Item #2
|
|
</button>
|
|
</h2>
|
|
<div id="collapseTwooutline" class="accordion-collapse collapse"
|
|
data-bs-parent="#accordionExampleoutlineoutline">
|
|
<div class="accordion-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#collapseThreeoutline" aria-expanded="false"
|
|
aria-controls="collapseThreeoutline">
|
|
Accordion Item #3
|
|
</button>
|
|
</h2>
|
|
<div id="collapseThreeoutline" class="accordion-collapse collapse"
|
|
data-bs-parent="#accordionExampleoutlineoutline">
|
|
<div class="accordion-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="accordions-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> accordion-light-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('accordionsLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#accordionsLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="accordionsLightClass">
|
|
accordion-light-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="accordionsLightCode">
|
|
<div class="accordion app-accordion accordion-light-success" id="accordionFlushExample">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#flush-collapseOne" aria-expanded="true" aria-controls="flush-collapseOne">
|
|
Accordion Item #1
|
|
</button>
|
|
</h2>
|
|
<div id="flush-collapseOne" class="accordion-collapse show"
|
|
data-bs-parent="#accordionFlushExample">
|
|
<div class="accordion-body">Placeholder content for this accordion, which is intended to
|
|
demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion
|
|
body.</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
|
|
Accordion Item #2
|
|
</button>
|
|
</h2>
|
|
<div id="flush-collapseTwo" class="accordion-collapse collapse"
|
|
data-bs-parent="#accordionFlushExample">
|
|
<div class="accordion-body">Placeholder content for this accordion, which is intended to
|
|
demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion
|
|
body. Let's imagine this being filled with some actual content.</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#flush-collapseThree" aria-expanded="false"
|
|
aria-controls="flush-collapseThree">
|
|
Accordion Item #3
|
|
</button>
|
|
</h2>
|
|
<div id="flush-collapseThree" class="accordion-collapse collapse"
|
|
data-bs-parent="#accordionFlushExample">
|
|
<div class="accordion-body">Placeholder content for this accordion, which is intended to
|
|
demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion
|
|
body. Nothing more exciting happening here in terms of content, but just filling up the
|
|
space to make it look, at least at first glance, a bit more representative of how this would
|
|
look in a real-world application.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="accordions-flush">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> accordion-flush</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('accordionsFlushClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#accordionsFlushCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="accordionsFlushClass">
|
|
accordion-flush
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="accordionsFlushCode">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="accordion app-accordion accordion-flush accordion-secondary"
|
|
id="accordionappflushExample">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#appflush-collapseOne" aria-expanded="true"
|
|
aria-controls="appflush-collapseOne">
|
|
Accordion Item #1
|
|
</button>
|
|
</h2>
|
|
<div id="appflush-collapseOne" class="accordion-collapse show"
|
|
data-bs-parent="#accordionappflushExample">
|
|
<div class="accordion-body">Placeholder content for this accordion, which is intended to
|
|
demonstrate the <code>.accordion-appflush</code> class. This is the first item's accordion
|
|
body.</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#appflush-collapseTwo" aria-expanded="false"
|
|
aria-controls="appflush-collapseTwo">
|
|
Accordion Item #2
|
|
</button>
|
|
</h2>
|
|
<div id="appflush-collapseTwo" class="accordion-collapse collapse"
|
|
data-bs-parent="#accordionappflushExample">
|
|
<div class="accordion-body">Placeholder content for this accordion, which is intended to
|
|
demonstrate the <code>.accordion-appflush</code> class. This is the second item's accordion
|
|
body. Let's imagine this being filled with some actual content.</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#appflush-collapseThree" aria-expanded="false"
|
|
aria-controls="appflush-collapseThree">
|
|
Accordion Item #3
|
|
</button>
|
|
</h2>
|
|
<div id="appflush-collapseThree" class="accordion-collapse collapse"
|
|
data-bs-parent="#accordionrealExample">
|
|
<div class="accordion-body">Placeholder content for this accordion, which is intended to
|
|
demonstrate the <code>.accordion-appflush</code> class. This is the third item's accordion
|
|
body. Nothing more exciting happening here in terms of content, but just filling up the
|
|
space to make it look, at least at first glance, a bit more representative of how this would
|
|
look in a real-world application.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="accordions-icon-left">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> app-accordion-icon-left</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('accordionsIconLeftClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#accordionsIconLeftCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="accordionsIconLeftClass">
|
|
app-accordion-icon-left
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="accordionsIconLeftCode">
|
|
<div class="card">
|
|
|
|
<div class="card-body">
|
|
<div
|
|
class="accordion app-accordion accordion-light-primary app-accordion-icon-left app-accordion-plus"
|
|
id="accordionlefticonExample">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#lefticon-collapseOne" aria-expanded="true"
|
|
aria-controls="lefticon-collapseOne">
|
|
What happens if I just pay my ticket?
|
|
</button>
|
|
</h2>
|
|
<div id="lefticon-collapseOne" class="accordion-collapse collapse show">
|
|
<div class="accordion-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#lefticon-collapseTwo" aria-expanded="false"
|
|
aria-controls="lefticon-collapseTwo">
|
|
Can this ticket affect my job?
|
|
</button>
|
|
</h2>
|
|
<div id="lefticon-collapseTwo" class="accordion-collapse collapse">
|
|
<div class="accordion-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#lefticon-collapseThree" aria-expanded="false"
|
|
aria-controls="lefticon-collapseThree">
|
|
How long does it take to resolve my case?
|
|
</button>
|
|
</h2>
|
|
<div id="lefticon-collapseThree" class="accordion-collapse collapse">
|
|
<div class="accordion-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="accordions-plus">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-accordion-plus</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('accordionsPlusClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#accordionsPlusCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="accordionsPlusClass">
|
|
app-accordion-plus
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="accordionsPlusCode">
|
|
<div class="card">
|
|
|
|
<div class="card-body">
|
|
<div
|
|
class="accordion app-accordion accordion-light-primary app-accordion-icon-left app-accordion-plus"
|
|
id="accordionlefticonExample">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#lefticon-collapseOne" aria-expanded="true"
|
|
aria-controls="lefticon-collapseOne">
|
|
What happens if I just pay my ticket?
|
|
</button>
|
|
</h2>
|
|
<div id="lefticon-collapseOne" class="accordion-collapse collapse show">
|
|
<div class="accordion-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#lefticon-collapseTwo" aria-expanded="false"
|
|
aria-controls="lefticon-collapseTwo">
|
|
Can this ticket affect my job?
|
|
</button>
|
|
</h2>
|
|
<div id="lefticon-collapseTwo" class="accordion-collapse collapse">
|
|
<div class="accordion-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#lefticon-collapseThree" aria-expanded="false"
|
|
aria-controls="lefticon-collapseThree">
|
|
How long does it take to resolve my case?
|
|
</button>
|
|
</h2>
|
|
<div id="lefticon-collapseThree" class="accordion-collapse collapse">
|
|
<div class="accordion-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="accordions without indicators">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">No icon indicators</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#accordionsWithoutIndicatorsCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="accordionsWithoutIndicatorsCode">
|
|
<div class="card">
|
|
|
|
<div class="card-body">
|
|
<div class="accordion app-accordion accordion-light-danger app-accordion-no-icon"
|
|
id="accordionnoiconExample">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#noicon-collapseOne" aria-expanded="true"
|
|
aria-controls="noicon-collapseOne">
|
|
<i class="ti ti-message-report me-1 f-s-20"></i> What happens if I just pay my ticket?
|
|
</button>
|
|
</h2>
|
|
<div id="noicon-collapseOne" class="accordion-collapse collapse show">
|
|
<div class="accordion-body">
|
|
Paying your ticket without contesting it can result in a conviction on your driving record.
|
|
This can have long-lasting consequences such as increased insurance rates, driver's license
|
|
suspension, employment restrictions, and additional fines imposed by your state's DMV.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#noicon-collapseTwo" aria-expanded="false"
|
|
aria-controls="noicon-collapseTwo">
|
|
<i class="ti ti-ticket me-1 f-s-20"></i> Can this ticket affect my job?
|
|
</button>
|
|
</h2>
|
|
<div id="noicon-collapseTwo" class="accordion-collapse collapse">
|
|
<div class="accordion-body">
|
|
Absolutely, tickets recorded on your driving history can result in disqualification from
|
|
driving commercially or obtaining a commercial driver's license (CDL). They can also
|
|
disqualify you from driving for ride-sharing services such as Uber or Lyft, which require a
|
|
clean driving record.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#noicon-collapseThree" aria-expanded="false"
|
|
aria-controls="noicon-collapseThree">
|
|
<i class="ti ti-transition-bottom me-1 f-s-20"></i> How long does it take to resolve my
|
|
case?
|
|
</button>
|
|
</h2>
|
|
<div id="noicon-collapseThree" class="accordion-collapse collapse">
|
|
<div class="accordion-body">
|
|
It really depends on the court your ticket landed in. Some courts move faster than others,
|
|
but on average, it could take about 1-3 months. This is perfectly normal in the legal
|
|
process.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card cheatsheets-card box-template-list toggle-card">
|
|
<div class="card-header p-0">
|
|
<a aria-controls="background"
|
|
aria-expanded="false"
|
|
class="btn btn-primary w-100 text-start f-s-18 f-w-500 rounded-bottom-0 py-2 box-template-name"
|
|
data-bs-toggle="collapse"
|
|
href="cheatsheet.html#background">
|
|
Background
|
|
</a>
|
|
</div>
|
|
<div class="collapse card-body show p-0" id="background">
|
|
<ul>
|
|
<li class="list-item-preview d-flex gap-2" data-header="background-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('backgroundPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#backgroundPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="backgroundPrimaryClass">bg-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="backgroundPrimaryCode">
|
|
<button type="button" class="btn bg-primary text-white">bg-primary</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="background-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('backgroundSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#backgroundSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="backgroundSecondaryClass">
|
|
bg-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="backgroundSecondaryCode">
|
|
<button type="button" class="btn bg-secondary text-white">bg-secondary</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="background-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('backgroundSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#backgroundSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="backgroundSuccessClass">bg-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="backgroundSuccessCode">
|
|
<button type="button" class="btn bg-success text-white">bg-success</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="background-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('backgroundDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#backgroundDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="backgroundDangerClass">bg-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="backgroundDangerCode">
|
|
<button type="button" class="btn bg-danger text-white">bg-danger</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="background-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('backgroundWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#backgroundWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="backgroundWarningClass">bg-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="backgroundWarningCode">
|
|
<button type="button" class="btn bg-warning text-white">bg-warning</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="background-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('backgroundInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#backgroundInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="backgroundInfoClass">bg-info</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="backgroundInfoCode">
|
|
<button type="button" class="btn bg-info text-white">bg-info</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="background-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('backgroundLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#backgroundLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="backgroundLightClass">bg-light</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="backgroundLightCode">
|
|
<button type="button" class="btn bg-light text-white">bg-light</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="background-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('backgroundDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#backgroundDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="backgroundDarkClass">bg-dark</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="backgroundDarkCode">
|
|
<button type="button" class="btn bg-dark text-white">bg-dark</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="shades900">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-primary-900</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('shades900Class')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#shades900Code')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="shades900Class">bg-primary-900</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="shades900Code">
|
|
<button type="button" class="btn bg-primary-900">bg-primary-900</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="shades800">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-primary-800</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('shades800Class')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#shades800Code')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="shades800Class">bg-primary-800</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="shades800Code">
|
|
<button type="button" class="btn bg-primary-800">bg-primary-800</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="shades700">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-primary-700</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('shades700Class')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#shades700Code')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="shades700Class">bg-primary-700</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="shades700Code">
|
|
<button type="button" class="btn bg-primary-700">bg-primary-700</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="shades600">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-primary-600</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('shades600Class')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#shades600Code')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="shades600Class">bg-primary-600</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="shades600Code">
|
|
<button type="button" class="btn bg-primary-600">bg-primary-600</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="shades500">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-primary-500</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('shades500Class')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#shades500Code')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="shades500Class">bg-primary-500</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="shades500Code">
|
|
<button type="button" class="btn bg-primary-500">bg-primary-500</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="shades400">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-primary-400</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('shades400Class')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#shades400Code')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="shades400Class">bg-primary-400</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="shades400Code">
|
|
<button type="button" class="btn bg-primary-400">bg-primary-400</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="shades300">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-primary-300</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('shades300Class')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#shades300Code')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="shades300Class">bg-primary-300</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="shades300Code">
|
|
<button type="button" class="btn bg-primary-300">bg-primary-300</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-outline-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-outline-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgOutlinePrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgOutlinePrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgOutlinePrimaryClass">
|
|
bg-outline-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgOutlinePrimaryCode">
|
|
<button type="button" class="btn bg-outline-primary">bg-outline-primary</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="bg-outline-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-outline-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgOutlineSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgOutlineSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgOutlineSecondaryClass">
|
|
bg-outline-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgOutlineSecondaryCode">
|
|
<button type="button" class="btn bg-outline-secondary">bg-outline-secondary</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-outline-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-outline-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgOutlineSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgOutlineSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgOutlineSuccessClass">
|
|
bg-outline-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgOutlineSuccessCode">
|
|
<button type="button" class="btn bg-outline-success">bg-outline-success</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-outline-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-outline-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgOutlineDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgOutlineDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgOutlineDangerClass">
|
|
bg-outline-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgOutlineDangerCode">
|
|
<button type="button" class="btn bg-outline-danger">bg-outline-danger</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-outline-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-outline-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgOutlineWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgOutlineWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgOutlineWarningClass">
|
|
bg-outline-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgOutlineWarningCode">
|
|
<button type="button" class="btn bg-outline-warning">bg-outline-warning</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-outline-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-outline-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgOutlineInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgOutlineInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgOutlineInfoClass">bg-outline-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgOutlineInfoCode">
|
|
<button type="button" class="btn bg-outline-info">bg-outline-info</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-outline-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-outline-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgOutlineLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgOutlineLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgOutlineLightClass">
|
|
bg-outline-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgOutlineLightCode">
|
|
<button type="button" class="btn bg-outline-light">bg-outline-light</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-outline-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-outline-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgOutlineDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgOutlineDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgOutlineDarkClass">bg-outline-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgOutlineDarkCode">
|
|
<button type="button" class="btn bg-outline-dark">bg-outline-dark</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-light-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-light-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgLightPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgLightPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgLightPrimaryClass">
|
|
bg-light-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgLightPrimaryCode">
|
|
<button type="button" class="btn bg-light-primary">bg-light-primary</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-light-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-light-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgLightSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgLightSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgLightSecondaryClass">
|
|
bg-light-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgLightSecondaryCode">
|
|
<button type="button" class="btn bg-light-secondary">bg-light-secondary</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-light-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-light-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgLightSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgLightSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgLightSuccessClass">
|
|
bg-light-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgLightSuccessCode">
|
|
<button type="button" class="btn bg-light-success">bg-light-success</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-light-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-light-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgLightDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgLightDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgLightDangerClass">bg-light-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgLightDangerCode">
|
|
<button type="button" class="btn bg-light-danger">bg-light-danger</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-light-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-light-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgLightWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgLightWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgLightWarningClass">
|
|
bg-light-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgLightWarningCode">
|
|
<button type="button" class="btn bg-light-warning">bg-light-warning</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-light-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-light-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgLightInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgLightInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgLightInfoClass">bg-light-info</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgLightInfoCode">
|
|
<button type="button" class="btn bg-light-info">bg-light-info</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-light-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-light-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgLightLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgLightLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgLightLightClass">bg-light-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgLightLightCode">
|
|
<button type="button" class="btn bg-light-light">bg-light-light</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="bg-light-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">bg-light-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('bgLightDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#bgLightDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="bgLightDarkClass">bg-light-dark</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="bgLightDarkCode">
|
|
<button type="button" class="btn bg-light-dark">bg-light-dark</button>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card cheatsheets-card box-template-list toggle-card">
|
|
<div class="card-header p-0">
|
|
<a aria-controls="progress"
|
|
aria-expanded="false"
|
|
class="btn btn-primary w-100 text-start f-s-18 f-w-500 rounded-bottom-0 py-2 box-template-name"
|
|
data-bs-toggle="collapse"
|
|
href="cheatsheet.html#progress">
|
|
Progress
|
|
</a>
|
|
</div>
|
|
<div class="collapse card-body show p-0" id="progress">
|
|
<ul>
|
|
<li class="list-item-preview d-flex gap-2" data-header="progress-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressPrimaryClass">progress-bar
|
|
bg-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressPrimaryCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-primary" style="width: 12.5%"></div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="progress-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressSecondaryClass">progress-bar
|
|
bg-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressSecondaryCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-secondary" style="width: 12.5%"></div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="progress-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressSuccessClass">progress-bar
|
|
bg-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressSuccessCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-success" style="width: 12.5%"></div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="progress-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressDangerClass">progress-bar
|
|
bg-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressDangerCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-danger" style="width: 12.5%"></div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="progress-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressWaningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressWaningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressWaningClass">progress-bar
|
|
bg-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressWaningCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-warning" style="width: 12.5%"></div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="progress-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressInfoClass">progress-bar
|
|
bg-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressInfoCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-info" style="width: 12.5%"></div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="progress-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressLightClass">progress-bar
|
|
bg-light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressLightCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-light" style="width: 12.5%"></div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="progress-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressDarkClass">progress-bar
|
|
bg-dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressDarkCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-dark" style="width: 12.5%"></div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="progress-light-primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-light-primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressLightPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressLightPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressLightPrimaryClass">
|
|
progress-bar bg-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressLightPrimaryCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-light-primary" style="width: 12.5%"> 12.5% </div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="progress-light-secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-light-secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressLightSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressLightSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressLightSecondaryClass">
|
|
progress-bar bg-secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressLightSecondaryCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-light-secondary" style="width: 25%"> 25% </div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="progress-light-success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-light-success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressLightSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressLightSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressLightSuccessClass">
|
|
progress-bar bg-success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressLightSuccessCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-light-success" style="width: 37.5%"> 37.5% </div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="progress-light-danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-light-danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressLightDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressLightDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressLightDangerClass">
|
|
progress-bar bg-danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressLightDangerCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-light-danger" style="width: 50%"> 50% </div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="progress-light-warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-light-warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressLightWarningClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressLightWarningCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressLightWarningClass">
|
|
progress-bar bg-warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressLightWarningCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-light-warning" style="width: 62.5%"> 62.5% </div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="progress-light-info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-light-info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressLightInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressLightInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressLightInfoClass">progress-bar
|
|
bg-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressLightInfoCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-light-info" style="width: 62.5%"> 62.5% </div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="progress-light-light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-light-light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressLightLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressLightLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressLightLightClass">progress-bar
|
|
bg-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressLightLightCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-light-light" style="width: 82.5%"> 82.5% </div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="progress-light-dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar bg-light-dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressLightDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressLightDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressLightDarkClass">progress-bar
|
|
bg-info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressLightDarkCode">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-light-dark" style="width: 95%"> 95% </div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="progress-bar-striped">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress-bar progress-bar-striped</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('progressStripedyClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressStripedyCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="progressStripedyClass">progress-bar
|
|
bg-primary progress-bar-striped
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressStripedyCode">
|
|
|
|
<div class="d-flex gap-3 flex-wrap">
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-primary progress-bar-striped" style="width: 12.5%"> 12.5% </div>
|
|
</div>
|
|
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated"
|
|
style="width: 25%"> 25% </div>
|
|
</div>
|
|
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated"
|
|
style="width: 37.5%"> 37.5% </div>
|
|
</div>
|
|
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated"
|
|
style="width: 50%"> 50% </div>
|
|
</div>
|
|
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated"
|
|
style="width: 62.5%"> 62.5% </div>
|
|
</div>
|
|
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-info progress-bar-striped progress-bar-animated"
|
|
style="width: 75%"> 75% </div>
|
|
</div>
|
|
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-light progress-bar-striped progress-bar-animated"
|
|
style="width: 82.5%"> 82.5% </div>
|
|
</div>
|
|
|
|
<div class="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<div class="progress-bar bg-dark progress-bar-striped progress-bar-animated"
|
|
style="width: 95%"> 95% </div>
|
|
</div>
|
|
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="progress sizes">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">progress sizes</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#progressSizeCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="progressSizeCode">
|
|
<div class="d-flex flex-column gap-3">
|
|
<div class="progress h-5">
|
|
<div class="progress-bar bg-primary h-5" role="progressbar" aria-valuenow="20" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 20%;"></div>
|
|
</div>
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="40" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 30%;">This is normal size</div>
|
|
</div>
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 40%;">This is normal size</div>
|
|
</div>
|
|
|
|
<div class="progress h-15">
|
|
<div class="progress-bar bg-success h-15" role="progressbar" aria-valuenow="50" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 50%;"> height 15px</div>
|
|
</div>
|
|
|
|
<div class="progress h-15">
|
|
<div class="progress-bar bg-info h-15" role="progressbar" aria-valuenow="50" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 60%;"> height 15px</div>
|
|
</div>
|
|
|
|
<div class="progress h-20">
|
|
<div class="progress-bar bg-danger h-20" role="progressbar" aria-valuenow="60" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 70%;"> height 20px</div>
|
|
</div>
|
|
|
|
<div class="progress h-25">
|
|
<div class="progress-bar bg-warning h-25" role="progressbar" aria-valuenow="70" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 80%;"> height 25px</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card cheatsheets-card box-template-list toggle-card">
|
|
<div class="card-header p-0">
|
|
<a aria-controls="helperClass"
|
|
aria-expanded="false"
|
|
class="btn btn-primary w-100 text-start f-s-18 f-w-500 rounded-bottom-0 py-2 box-template-name"
|
|
data-bs-toggle="collapse"
|
|
href="cheatsheet.html#helperClass">
|
|
Helper Classes
|
|
</a>
|
|
</div>
|
|
<div class="collapse card-body show p-0" id="helperClass">
|
|
<ul>
|
|
<li class="list-item-preview d-flex gap-2" data-header="text-[color]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">text-[color]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('textColorClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#textColorCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="textColorClass">text-primary</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="textColorCode">
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<span class="text-primary p-2"> - .text-primary</span>
|
|
<span class="text-secondary p-2"> - .text-secondary</span>
|
|
<span class="text-success p-2"> - .text-success</span>
|
|
<span class="text-danger p-2"> - .text-danger</span>
|
|
<span class="text-warning p-2"> - .text-warning</span>
|
|
<span class="text-info p-2"> - .text-info</span>
|
|
<span class="text-light p-2"> - .text-light</span>
|
|
<span class="text-dark p-2"> - .text-dark</span>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="link-[color]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">link-[color]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('linkColorClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#linkColorCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="linkColorClass">link-primary</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="linkColorCode">
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<span class="link-primary p-2"> - .link-primary</span>
|
|
<span class="link-secondary p-2"> - .link-secondary</span>
|
|
<span class="link-success p-2"> - .link-success</span>
|
|
<span class="link-danger p-2"> - .link-danger</span>
|
|
<span class="link-warning p-2"> - .link-warning</span>
|
|
<span class="link-info p-2"> - .link-info</span>
|
|
<span class="link-light p-2"> - .link-light</span>
|
|
<span class="link-dark p-2"> - .link-dark</span>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="txt-bg-[color]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">txt-bg-[color]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('txtBgColorClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#txtBgColorCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="txtBgColorClass">txt-bg-primary</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="txtBgColorCode">
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<span class="txt-bg-primary p-2"> - .txt-bg-primary</span>
|
|
<span class="txt-bg-secondary p-2"> - .txt-bg-secondary</span>
|
|
<span class="txt-bg-success p-2"> - .txt-bg-success</span>
|
|
<span class="txt-bg-danger p-2"> - .txt-bg-danger</span>
|
|
<span class="txt-bg-warning p-2"> - .txt-bg-warning</span>
|
|
<span class="txt-bg-info p-2"> - .txt-bg-info</span>
|
|
<span class="txt-bg-light p-2"> - .txt-bg-light</span>
|
|
<span class="txt-bg-dark p-2"> - .txt-bg-dark</span>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="text-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">text-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('textalignClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#textalignCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="textalignClass">text-start</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="textalignCode">
|
|
<div class="text-lowercase p-2">Text-Lowercase</div>
|
|
<div class="text-uppercase p-2">Text-Uppercase</div>
|
|
<div class="text-capitalize p-2">Text-Capitalize</div>
|
|
<div class="text-center">- Text Align Center</div>
|
|
<div class="text-start">- Text Align Start</div>
|
|
<div class="text-end">- Text Align End</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="text-d-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">text-d-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('textDecorationClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#textDecorationCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="textDecorationClass">
|
|
text-d-underline
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="textDecorationCode">
|
|
<div class="p-2">- Text Decoration<span class="text-d-underline ms-2"> underline </span></div>
|
|
<div class="p-2">- Text Decoration<span class="text-d-line-through ms-2"> line-through </span></div>
|
|
<div class="p-2">- Text Decoration<span class="text-d-overline ms-2"> overline</span></div>
|
|
<div class="p-2">- Text Decoration<span class="text-d-overline-underline ms-2">overline-underline</span></div>
|
|
<div class="p-2">- Text Decoration<span class="text-d-line-underline ms-2">underline-line-through</span>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="f-fs-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">f-fs-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('fontStyleClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#fontStyleCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="fontStyleClass">f-fs-normal</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="fontStyleCode">
|
|
<div class="p-2">- Font style<span class="f-fs-normal ms-2">Normal</span></div>
|
|
<div class="p-2">- Font style<span class="f-fs-italic ms-2">Italic</span></div>
|
|
<div class="p-2">- Font style<span class="f-fs-oblique ms-2">Oblique</span></div>
|
|
<div class="p-2">- Font style<span class="f-fs-initial ms-2">Initial</span></div>
|
|
<div class="p-2">- Font style<span class="f-fs-inherit ms-2">Inherit</span></div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="Headings">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">h1-h6</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('HeadingsClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#HeadingsCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="HeadingsClass">h1-h6</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="HeadingsCode">
|
|
<div class="h1">h1 Fontsize</div>
|
|
<div class="h2">h2 Fontsize</div>
|
|
<div class="h3">h3 Fontsize</div>
|
|
<div class="h4">h4 Fontsize</div>
|
|
<div class="h5">h5 Fontsize</div>
|
|
<div class="h6">h6 Fontsize</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="f-fw-[weight]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">f-fw-[weight]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('fontWeightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#fontWeightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="fontWeightClass">f-fw-500</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="fontWeightCode">
|
|
<div class="p-2">- Font weight<span class="f-fw-100 ms-2">f-fw-100* </span></div>
|
|
<div class="p-2">- Font weight<span class="f-fw-200 ms-2">f-fw-200* </span></div>
|
|
<div class="p-2">- Font weight<span class="f-fw-300 ms-2">f-fw-300* </span></div>
|
|
<div class="p-2">- Font weight<span class="f-fw-400 ms-2">f-fw-400* </span></div>
|
|
<div class="p-2">- Font weight<span class="f-fw-500 ms-2">f-fw-500* </span></div>
|
|
<div class="p-2">- Font weight<span class="f-fw-600 ms-2">f-fw-600* </span></div>
|
|
<div class="p-2">- Font weight<span class="f-fw-700 ms-2">f-fw-700* </span></div>
|
|
<div class="p-2">- Font weight<span class="f-fw-800 ms-2">f-fw-800* </span></div>
|
|
<div class="p-2">- Font weight<span class="f-fw-900 ms-2">f-fw-900* </span></div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="f-s-[size]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">f-s-[size]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('fontSizeClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#fontSizeCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="fontSizeClass">f-s-14</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="fontSizeCode">
|
|
<div class="p-2 f-s-10 ms-2">Size-10 </span></div>
|
|
<div class="p-2 f-s-12 ms-2">Size-12 </span></div>
|
|
<div class="p-2 f-s-14 ms-2">Size-14 </span></div>
|
|
<div class="p-2 f-s-16 ms-2">Size-16 </span></div>
|
|
<div class="p-2 f-s-18 ms-2">Size-18 </span></div>
|
|
<div class="p-2 f-s-20 ms-2">Size-20 </span></div>
|
|
<div class="p-2 f-s-24 ms-2">Size-24 </span></div>
|
|
<div class="f-s-80 ms-2">Size-80 </span></div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="pa-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">pa-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('paddingClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#paddingCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="paddingClass">pd-0</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="paddingCode">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="border pa-16">Padding-16</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border pa-14">Padding-14</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border pa-10">Padding-10</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border pa-8">Padding-8</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border pa-4">Padding-4</p>
|
|
</div>
|
|
</div>
|
|
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="pa-t-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> pa-t-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('paddingTopClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#paddingTopCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="paddingTopClass"> pa-t-0</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="paddingTopCode">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="border pa-t-40">Padding-Top-40</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border pa-t-35">Padding-Top-35</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border pa-t-20">Padding-Top-20</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border pa-t-15">Padding-Top-15</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="pa-s-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> pa-s-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('paddingStartClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#paddingStartCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="paddingStartClass"> pa-s-0</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="paddingStartCode">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="border pa-s-40">Padding-Start-40</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<p class="border pa-s-35">Padding-Start-35</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<p class="border pa-s-20">Padding-Start-20</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<p class="border pa-s-15">Padding-Start-15</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="pa-b-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> pa-b-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('paddingBottomClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#paddingBottomCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="paddingBottomClass"> pa-t-0</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="paddingBottomCode">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="border pa-b-40">Padding-Bottom-40</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border pa-b-35">Padding-Bottom-35</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border pa-b-20">Padding-Bottom-20</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border pa-b-15">Padding-Bottom-15</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="pa-e-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> pa-e-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('paddingEndClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#paddingEndCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="paddingEndClass"> pa-e-0</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="paddingEndCode">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="border pa-e-40">Padding-End-40</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border pa-e-35">Padding-End-35</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border pa-e-20">Padding-End-20</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border pa-e-15">Padding-End-15</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="mg-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">mg-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('marginClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#marginCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="marginClass">pd-0</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="marginCode">
|
|
<div class="row">
|
|
<div class="col-auto mb-2">
|
|
<div class="border">
|
|
<div class="mg-40 txt-bg-primary">Margin-40</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto mb-2">
|
|
<div class="border">
|
|
<div class="mg-34 txt-bg-dark">Margin-34</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto mb-2">
|
|
<div class="border">
|
|
<div class="mg-30 txt-bg-light">Margin-30</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto mb-2">
|
|
<div class="border">
|
|
<div class="mg-28 txt-bg-info">Margin-28</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto mb-2">
|
|
<div class="border">
|
|
<div class="mg-24 txt-bg-warning">Margin-24</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto mb-2">
|
|
<div class="border">
|
|
<div class="mg-20 txt-bg-danger">Margin-20</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto mb-2">
|
|
<div class="border">
|
|
<div class="mg-14 txt-bg-success">Margin-14</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto mb-2">
|
|
<div class="border">
|
|
<p class="mg-10 txt-bg-secondary">Margin-10</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto mb-2">
|
|
<div class="border">
|
|
<p class="mg-4 txt-bg-primary">Margin-4</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="mg-t-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> mg-t-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('marginTopClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#marginTopCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="marginTopClass"> mg-t-0</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="marginTopCode">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="border mg-t-40">margin-Top-40</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border mg-t-35">margin-Top-35</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border mg-t-20">margin-Top-20</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border mg-t-15">margin-Top-15</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="mg-s-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> mg-s-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('marginStartClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#marginStartCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="marginStartClass"> mg-s-0</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="marginStartCode">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="border mg-s-40">margin-Start-40</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<p class="border mg-s-35">margin-Start-35</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<p class="border mg-s-20">margin-Start-20</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<p class="border mg-s-15">margin-Start-15</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="pa-b-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> mg-b-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('marginBottomClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#marginBottomCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="marginBottomClass"> mg-t-0</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="marginBottomCode">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="border mg-b-40">margin-Bottom-40</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border mg-b-35">margin-Bottom-35</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border mg-b-20">margin-Bottom-20</p>
|
|
</div>
|
|
<div class="col">
|
|
<p class="border mg-b-15">margin-Bottom-15</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="mg-e-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name"> mg-e-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('marginEndClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#marginEndCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="marginEndClass"> mg-e-0</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="marginEndCode">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="border mg-e-40">margin-End-40</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<p class="border mg-e-35">margin-End-35</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<p class="border mg-e-20">margin-End-20</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<p class="border mg-e-15">margin-End-15</p>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="w-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">w-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('widthClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#widthCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="widthClass">w-50</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="widthCode">
|
|
<div class="w-150 border p-2 mb-2"> w-150 </div>
|
|
<div class="w-80 border p-2 mb-2"> w-80 </div>
|
|
<div class="w-60 border p-2 mb-2"> w-60 </div>
|
|
<div class="w-50 border p-2 mb-2"> w-50 </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="h-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">h-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('heightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#heightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="heightClass">h-50</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="heightCode">
|
|
<div class="h-150 border p-2 mb-2"> h-150 </div>
|
|
<div class="h-80 border p-2 mb-2"> h-80 </div>
|
|
<div class="h-60 border p-2 mb-2"> h-60 </div>
|
|
<div class="h-50 border p-2 mb-2"> h-50 </div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="b-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">b-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('borderClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#borderCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="borderClass">border</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="borderCode">
|
|
<div class="app-example">
|
|
<div class="border">border</div>
|
|
<div class="border-t">border-t</div>
|
|
<div class="border-s">border-s</div>
|
|
<div class="border-e">border-e</div>
|
|
<div class="border-b">border-b</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="b-1-[color]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">b-1-[color]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('borderColorClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#borderColorCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="borderColorClass">b-1-primary</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="borderColorCode">
|
|
<div class="app-example">
|
|
<div class="b-1-primary p-2">b-1-primary</div>
|
|
<div class="b-1-secondary p-2">b-1-secondary</div>
|
|
<div class="b-1-success p-2">b-1-success</div>
|
|
<div class="b-1-danger p-2">b-1-danger</div>
|
|
<div class="b-1-warning p-2">b-1-warning</div>
|
|
<div class="b-1-info p-2">b-1-info</div>
|
|
<div class="b-1-light p-2">b-1-light</div>
|
|
<div class="b-1-dark p-2">b-1-dark</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="b-[size]-[color]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">b-[size]-[color]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('borderSizeClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#borderSizeCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="borderSizeClass">b-1-primary</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="borderSizeCode">
|
|
<div class="app-example">
|
|
<div class="b-1-primary p-2">b-1-primary</div>
|
|
<div class="b-3-secondary p-2">b-3-secondary</div>
|
|
<div class="b-5-success p-2">b-5-success</div>
|
|
<div class="b-7-danger p-2">b-7-danger</div>
|
|
<div class="b-9-warning p-2">b-9-warning</div>
|
|
<div class="b-15-info p-2">b-15-info</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="b-r-[option]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">b-r-[option]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('borderRadiusClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#borderRadiusCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="borderRadiusClass">b-r-5</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="borderRadiusCode">
|
|
<div class="app-example">
|
|
<div class="b-1-secondary b-r-5">b-r-5</div>
|
|
<div class="b-1-secondary b-r-10">b-r-10</div>
|
|
<div class="b-1-secondary b-r-15">b-r-15</div>
|
|
<div class="b-1-secondary b-r-20">b-r-20</div>
|
|
<div class="b-1-secondary b-r-25">b-r-25</div>
|
|
<div class="b-1-secondary b-r-30">b-r-30</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card cheatsheets-card box-template-list toggle-card">
|
|
<div class="card-header p-0">
|
|
<a aria-controls="divider"
|
|
aria-expanded="false"
|
|
class="btn btn-primary w-100 text-start f-s-18 f-w-500 rounded-bottom-0 py-2 box-template-name"
|
|
data-bs-toggle="collapse"
|
|
href="cheatsheet.html#divider">
|
|
Divider
|
|
</a>
|
|
</div>
|
|
<div class="collapse card-body show p-0" id="divider">
|
|
<ul>
|
|
<li class="list-item-preview d-flex gap-2" data-header="app-divider-v">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerSimpleClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerSimpleCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerSimpleClass">app-divider-v
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerSimpleCode">
|
|
<div class="app-divider-v"></div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-v dotted">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v dotted</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerDottedClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerDottedCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerDottedClass">app-divider-v
|
|
dotted
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerDottedCode">
|
|
<div class="app-divider-v dotted"></div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-v dashed">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v dashed</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerDashedClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerDashedCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerDashedClass">app-divider-v
|
|
dashed
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerDashedCode">
|
|
<div class="app-divider-v dashed"></div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="app-divider-v">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHSimpleClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHSimpleCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHSimpleClass">app-divider-h
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHSimpleCode">
|
|
<div class="app-divider-h"></div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-h dotted">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h dotted</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHDottedClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHDottedCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHDottedClass">app-divider-h
|
|
dotted
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHDottedCode">
|
|
<div class="app-divider-h dotted"></div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-h dashed">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h dashed</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHDashedClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHDashedCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHDashedClass">app-divider-h
|
|
dashed
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHDashedCode">
|
|
<div class="app-divider-h dashed"></div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-v justify-content-start">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v justify-content-start</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerContentStartClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerContentStartCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerContentStartClass">
|
|
app-divider-v
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerContentStartCode">
|
|
<div class="app-divider-v">
|
|
<p> justify-content-start </p>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-v justify-content-center">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v justify-content-center</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerContentCenterClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerContentCenterCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerContentCenterClass">
|
|
app-divider-v justify-content-center
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerContentCenterCode">
|
|
<div class="app-divider-v justify-content-center">
|
|
<p> justify-content-center </p>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-v justify-content-end">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v justify-content-end</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerContentEndClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerContentEndCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerContentEndClass">app-divider-v
|
|
justify-content-end
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerContentEndCode">
|
|
<div class="app-divider-v justify-content-end">
|
|
<p> justify-content-end </p>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-h align-items-start">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h align-items-start</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHContentStartClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHContentStartCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHContentStartClass">
|
|
app-divider-h
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHContentStartCode">
|
|
<div class="card h-100">
|
|
<div class="card-body divider-body d-flex">
|
|
<div class="app-divider-h">
|
|
<p>Or</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-h align-items-center">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h align-items-center</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHContentCenterClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHContentCenterCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHContentCenterClass">
|
|
app-divider-h align-items-center
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHContentCenterCode">
|
|
<div class="card h-100">
|
|
<div class="card-body divider-body d-flex">
|
|
<div class="app-divider-h align-items-center">
|
|
<p>Or</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-h align-items-end">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h align-items-end</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHContentEndClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHContentEndCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHContentEndClass">
|
|
app-divider-h align-items-end
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHContentEndCode">
|
|
<div class="card h-100">
|
|
<div class="card-body divider-body d-flex">
|
|
<div class="app-divider-h align-items-end">
|
|
<p>Or</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-v primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerPrimaryClass">app-divider-v
|
|
primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerPrimaryCode">
|
|
<div class="app-divider-v primary">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-v secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerSecondaryClass">app-divider-v
|
|
secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerSecondaryCode">
|
|
<div class="app-divider-v secondary">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-v success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerSuccessClass">app-divider-v
|
|
success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerSuccessCode">
|
|
<div class="app-divider-v success">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-v danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerDangerClass">app-divider-v
|
|
danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerDangerCode">
|
|
<div class="app-divider-v danger">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-v warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerWaringClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerWaringCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerWaringClass">app-divider-v
|
|
warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerWaringCode">
|
|
<div class="app-divider-v warning">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="app-divider-v info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerInfoClass">app-divider-v
|
|
info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerInfoCode">
|
|
<div class="app-divider-v info">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-v light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerLightClass">app-divider-v
|
|
light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerLightCode">
|
|
<div class="app-divider-v light">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="app-divider-v dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-v dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerDarkClass">app-divider-v
|
|
dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerDarkCode">
|
|
<div class="app-divider-v dark">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-h primary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h primary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHPrimaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHPrimaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHPrimaryClass">app-divider-h
|
|
primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHPrimaryCode">
|
|
<div class="app-divider-h primary">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-h secondary">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h secondary</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHSecondaryClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHSecondaryCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHSecondaryClass">app-divider-h
|
|
secondary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHSecondaryCode">
|
|
<div class="app-divider-h secondary">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-h success">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h success</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHSuccessClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHSuccessCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHSuccessClass">app-divider-h
|
|
success
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHSuccessCode">
|
|
<div class="app-divider-h success">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-h danger">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h danger</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHDangerClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHDangerCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHDangerClass">app-divider-h
|
|
danger
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHDangerCode">
|
|
<div class="app-divider-h danger">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-h warning">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h warning</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHWaringClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHWaringCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHWaringClass">app-divider-h
|
|
warning
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHWaringCode">
|
|
<div class="app-divider-h warning">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="app-divider-h info">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h info</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHInfoClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHInfoCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHInfoClass">app-divider-h
|
|
info
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHInfoCode">
|
|
<div class="app-divider-h info">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="app-divider-h light">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h light</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHLightClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHLightCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHLightClass">app-divider-h
|
|
light
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHLightCode">
|
|
<div class="app-divider-h light">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="app-divider-h dark">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">app-divider-h dark</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('dividerHDarkClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#dividerHDarkCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="dividerHDarkClass">app-divider-h
|
|
dark
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="dividerHDarkCode">
|
|
<div class="app-divider-h dark">
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card cheatsheets-card box-template-list toggle-card">
|
|
<div class="card-header p-0">
|
|
<a aria-controls="ribbon"
|
|
aria-expanded="false"
|
|
class="btn btn-primary w-100 text-start f-s-18 f-w-500 rounded-bottom-0 py-2 box-template-name"
|
|
data-bs-toggle="collapse"
|
|
href="cheatsheet.html#ribbon">
|
|
Ribbon
|
|
</a>
|
|
</div>
|
|
<div class="collapse card-body show p-0" id="ribbon">
|
|
<ul>
|
|
<li class="list-item-preview d-flex gap-2" data-header="ribbon ribbon-left">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">ribbon ribbon-left</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('ribbonSimpleClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#ribbonSimpleCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="ribbonSimpleClass">ribbon ribbon-left
|
|
ribbon-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="ribbonSimpleCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="ribbon ribbon-left ribbon-primary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="ribbon ribbon-left ribbon-secondary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="ribbon ribbon-left ribbon-success">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-danger-500">
|
|
<div class="ribbon ribbon-left ribbon-danger">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-warning-500">
|
|
<div class="ribbon ribbon-left ribbon-warning">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-info-500">
|
|
<div class="ribbon ribbon-left ribbon-info">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-light-500">
|
|
<div class="ribbon ribbon-left ribbon-light">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-dark-500">
|
|
<div class="ribbon ribbon-left ribbon-dark">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="cross-shadow-ribbon cross-left">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">cross-shadow-ribbon cross-left</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('ribbonCrossClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#ribbonCrossCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="ribbonCrossClass">cross-shadow-ribbon
|
|
cross-left ribbon-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="ribbonCrossCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="cross-shadow-ribbon cross-left ribbon-primary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="cross-shadow-ribbon cross-left ribbon-secondary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="cross-shadow-ribbon cross-left ribbon-success">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-danger-500">
|
|
<div class="cross-shadow-ribbon cross-left ribbon-danger">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-warning-500">
|
|
<div class="cross-shadow-ribbon cross-left ribbon-warning">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-info-500">
|
|
<div class="cross-shadow-ribbon cross-left ribbon-info">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-light-500">
|
|
<div class="cross-shadow-ribbon cross-left ribbon-light">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-dark-500">
|
|
<div class="cross-shadow-ribbon cross-left ribbon-dark">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="ribbon-shape shape-left">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">ribbon-shape shape-left</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('ribbonShapeClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#ribbonShapeCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="ribbonShapeClass">ribbon-shape
|
|
shape-left ribbon-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="ribbonShapeCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="ribbon-shape shape-left ribbon-primary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="ribbon-shape shape-left ribbon-secondary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="ribbon-shape shape-left ribbon-success">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-danger-500">
|
|
<div class="ribbon-shape shape-left ribbon-danger">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-warning-500">
|
|
<div class="ribbon-shape shape-left ribbon-warning">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-info-500">
|
|
<div class="ribbon-shape shape-left ribbon-info">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-light-500">
|
|
<div class="ribbon-shape shape-left ribbon-light">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-dark-500">
|
|
<div class="ribbon-shape shape-left ribbon-dark">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="arrow-ribbon arrow-left">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">arrow-ribbon arrow-left</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('ribbonArrowClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#ribbonArrowCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="ribbonArrowClass">arrow-ribbon
|
|
arrow-left ribbon-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="ribbonArrowCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="arrow-ribbon arrow-left ribbon-primary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="arrow-ribbon arrow-left ribbon-secondary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="arrow-ribbon arrow-left ribbon-success">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-danger-500">
|
|
<div class="arrow-ribbon arrow-left ribbon-danger">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-warning-500">
|
|
<div class="arrow-ribbon arrow-left ribbon-warning">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-info-500">
|
|
<div class="arrow-ribbon arrow-left ribbon-info">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-light-500">
|
|
<div class="arrow-ribbon arrow-left ribbon-light">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-dark-500">
|
|
<div class="arrow-ribbon arrow-left ribbon-dark">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="ribbon-side side-left">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">ribbon-side side-left</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('ribbonSideClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#ribbonSideCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="ribbonSideClass">ribbon-side
|
|
side-left ribbon-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="ribbonSideCode">
|
|
<div class="d-flex gap-4 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="ribbon-side side-left ribbon-primary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="ribbon-side side-left ribbon-secondary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="ribbon-side side-left ribbon-success">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-danger-500">
|
|
<div class="ribbon-side side-left ribbon-danger">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-warning-500">
|
|
<div class="ribbon-side side-left ribbon-warning">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-info-500">
|
|
<div class="ribbon-side side-left ribbon-info">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-light-500">
|
|
<div class="ribbon-side side-left ribbon-light">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-dark-500">
|
|
<div class="ribbon-side side-left ribbon-dark">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="ribbon-top top-left">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">ribbon-top top-left</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('topRibbonClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#topRibbonCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="topRibbonClass">ribbon-top top-left
|
|
ribbon-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="topRibbonCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="ribbon-top top-left ribbon-primary">
|
|
<i class="fa-solid fa-gift fa-fw"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="ribbon-top top-left ribbon-secondary">
|
|
<i class="fa-solid fa-gift fa-fw"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="ribbon-top top-left ribbon-success">
|
|
<i class="fa-solid fa-gift fa-fw"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-danger-500">
|
|
<div class="ribbon-top top-left ribbon-danger">
|
|
<i class="fa-solid fa-gift fa-fw"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-warning-500">
|
|
<div class="ribbon-top top-left ribbon-warning">
|
|
<i class="fa-solid fa-gift fa-fw"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-info-500">
|
|
<div class="ribbon-top top-left ribbon-info">
|
|
<i class="fa-solid fa-gift fa-fw"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-light-500">
|
|
<div class="ribbon-top top-left ribbon-light">
|
|
<i class="fa-solid fa-gift fa-fw"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-dark-500">
|
|
<div class="ribbon-top top-left ribbon-dark">
|
|
<i class="fa-solid fa-gift fa-fw"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="circle-ribbon circle-left">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">circle-ribbon circle-left</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('ribbonCircleClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#ribbonCircleCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="ribbonCircleClass">circle-ribbon
|
|
circle-left ribbon-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="ribbonCircleCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="circle-ribbon circle-left ribbon-primary">
|
|
50%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="circle-ribbon circle-left ribbon-secondary">
|
|
50%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="circle-ribbon circle-left ribbon-success">
|
|
50%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-danger-500">
|
|
<div class="circle-ribbon circle-left ribbon-danger">
|
|
50%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-warning-500">
|
|
<div class="circle-ribbon circle-left ribbon-warning">
|
|
50%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-info-500">
|
|
<div class="circle-ribbon circle-left ribbon-info">
|
|
50%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-light-500">
|
|
<div class="circle-ribbon circle-left ribbon-light">
|
|
50%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-dark-500">
|
|
<div class="circle-ribbon circle-left ribbon-dark">
|
|
50%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2" data-header="ribbon file-left">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">ribbon file-left</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('fileRibbonClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#fileRibbonCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="fileRibbonClass">ribbon file-left
|
|
ribbon-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="fileRibbonCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-file w-120 h-120 bg-primary-500">
|
|
<div class="ribbon file-left ribbon-primary">
|
|
25%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-file w-120 h-120 bg-secondary-500">
|
|
<div class="ribbon file-left ribbon-secondary">
|
|
25%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-file w-120 h-120 bg-success-500">
|
|
<div class="ribbon file-left ribbon-success">
|
|
25%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-file w-120 h-120 bg-danger-500">
|
|
<div class="ribbon file-left ribbon-danger">
|
|
25%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-file w-120 h-120 bg-warning-500">
|
|
<div class="ribbon file-left ribbon-warning">
|
|
25%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-file w-120 h-120 bg-info-500">
|
|
<div class="ribbon file-left ribbon-info">
|
|
25%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-file w-120 h-120 bg-light-500">
|
|
<div class="ribbon file-left ribbon-light">
|
|
25%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-file w-120 h-120 bg-dark-500">
|
|
<div class="ribbon file-left ribbon-dark">
|
|
25%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="box-ribbon box-left">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">box-ribbon box-left</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Class" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyClassClipboard('boxRibbonClass')">
|
|
<i class="ti ti-copy"></i>
|
|
</a>
|
|
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#boxRibbonCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<div class="opacity-0 w-0 h-0" id="boxRibbonClass">ribbon file-left
|
|
ribbon-primary
|
|
</div>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="boxRibbonCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="box-ribbon box-left">
|
|
<div class="ribbonbox ribbon-primary"> Box </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="box-ribbon box-left">
|
|
<div class="ribbonbox ribbon-secondary"> Box </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="box-ribbon box-left">
|
|
<div class="ribbonbox ribbon-success"> Box </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-danger-500">
|
|
<div class="box-ribbon box-left">
|
|
<div class="ribbonbox ribbon-danger"> Box </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-warning-500">
|
|
<div class="box-ribbon box-left">
|
|
<div class="ribbonbox ribbon-warning"> Box </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-info-500">
|
|
<div class="box-ribbon box-left">
|
|
<div class="ribbonbox ribbon-info"> Box </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-light-500">
|
|
<div class="box-ribbon box-left">
|
|
<div class="ribbonbox ribbon-light"> Box </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-dark-500">
|
|
<div class="box-ribbon box-left">
|
|
<div class="ribbonbox ribbon-dark"> Box </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="ribbon ribbon-[position]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">ribbon ribbon-[position]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#ribbonPositionSimpleCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="ribbonPositionSimpleCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="ribbon ribbon-right ribbon-primary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="ribbon ribbon-left-bottom ribbon-secondary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="ribbon ribbon-right-bottom ribbon-success">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="ribbon-shape shape-[position]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">ribbon-shape shape-[position]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#ribbonPositionShapeCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="ribbonPositionShapeCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="ribbon-shape shape-right ribbon-primary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="ribbon-shape shape-left-bottom ribbon-secondary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="ribbon-shape shape-right-bottom ribbon-success">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="arrow-ribbon arrow-[position]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">arrow-ribbon arrow-[position]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#ribbonPositionArrowCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="ribbonPositionArrowCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="arrow-ribbon arrow-right ribbon-primary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="arrow-ribbon arrow-left-bottom ribbon-secondary">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="arrow-ribbon arrow-right-bottom ribbon-success">
|
|
Ribbon
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="ribbon-top top-[position]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">ribbon-top top-[position]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#topRibbonPositionCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="topRibbonPositionCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="ribbon-top top-right ribbon-primary">
|
|
<i class="fa-solid fa-gift fa-fw"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="ribbon-top top-left-bottom ribbon-secondary">
|
|
<i class="fa-solid fa-gift fa-fw"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="ribbon-top top-right-bottom ribbon-success">
|
|
<i class="fa-solid fa-gift fa-fw"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="ribbon-side side-[position]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">ribbon-side side-[position]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#sideRibbonPositionCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="sideRibbonPositionCode">
|
|
<div class="d-flex gap-4 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="ribbon-side side-right ribbon-primary">
|
|
Side
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="ribbon-side side-left-bottom ribbon-secondary">
|
|
Side
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="ribbon-side side-right-bottom ribbon-success">
|
|
Side
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="cross-shadow-ribbon cross-[position]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">cross-shadow-ribbon cross-[position]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#crossRibbonPositionCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="crossRibbonPositionCode">
|
|
<div class="d-flex gap-4 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="cross-shadow-ribbon cross-right ribbon-primary">
|
|
Side
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="cross-shadow-ribbon cross-left-bottom ribbon-secondary">
|
|
Side
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="cross-shadow-ribbon cross-right-bottom ribbon-success">
|
|
Side
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="circle-ribbon circle-[position]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">circle-ribbon circle-[position]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#CircleRibbonPositionCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="CircleRibbonPositionCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="circle-ribbon circle-right ribbon-primary">
|
|
25%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="circle-ribbon circle-left-bottom ribbon-secondary">
|
|
25%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="circle-ribbon circle-right-bottom ribbon-success">
|
|
25%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="ribbon file-[position]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">ribbon file-[position]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#fileRibbonPositionCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="fileRibbonPositionCode">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<div class="ribbon-file w-120 h-120 bg-primary-500">
|
|
<div class="ribbon file-right ribbon-primary">
|
|
10%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-file w-120 h-120 bg-secondary-500">
|
|
<div class="ribbon file-left-bottom ribbon-secondary">
|
|
10%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-file w-120 h-120 bg-success-500">
|
|
<div class="ribbon file-right-bottom ribbon-success">
|
|
10%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
<li class="list-item-preview d-flex gap-2"
|
|
data-header="box-ribbon box-[position]">
|
|
<div class="list-preview w-100">
|
|
<span class="collapse-name">box-ribbon box-[position]</span>
|
|
</div>
|
|
<span class="collapse-icons d-flex gap-2">
|
|
<a data-bs-placement="top" data-bs-title="Copy Code" data-bs-toggle="tooltip" href="cheatsheet.html#"
|
|
onclick="copyToClipboard('#boxRibbonPositionCode')">
|
|
<i class="ti ti-code"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<pre class="opacity-0 w-0 h-0 p-0">
|
|
<code class="language-html" id="boxRibbonPositionCode">
|
|
<div class="d-flex gap-3 flex-wrap">
|
|
<div class="ribbon-box w-120 h-120 bg-primary-500">
|
|
<div class="box-ribbon box-right">
|
|
<div class="ribbonbox ribbon-primary"> Box </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-secondary-500">
|
|
<div class="box-ribbon box-left-bottom">
|
|
<div class="ribbonbox ribbon-secondary"> Box </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon-box w-120 h-120 bg-success-500">
|
|
<div class="box-ribbon box-right-bottom">
|
|
<div class="ribbonbox ribbon-success"> Box </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid code-container code-preview-popup d-none">
|
|
<div class="row">
|
|
<div class="col-12 p-0">
|
|
<div class="code-preview-header d-flex justify-content-between mb-3">
|
|
<h4 class="m-0 text-white header-preview-text"></h4>
|
|
<button class="btn h-30 w-30 bg-light p-2 box-close d-flex-center" type="button"><i
|
|
class="fa fa-close"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="d-flex align-items-end justify-content-between mg-b-16">
|
|
<h4 class="text-white">Code</h4>
|
|
<button class="btn h-30 w-30 bg-dark text-white p-2 d-flex-center"
|
|
onclick="copyToClipboard('#previewCodeText')"
|
|
type="button"><i class="ti ti-copy"></i>
|
|
</button>
|
|
</div>
|
|
<div class="card box-shadow-none code-preview">
|
|
<div class="card-body">
|
|
<pre class=""><code class="language-html " id="previewCodeText"></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="mg-b-16">
|
|
<h4 class="text-white">Preview</h4>
|
|
</div>
|
|
<div class="card box-shadow-none code-preview">
|
|
<div class="card-body code-preview-div">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Body main section ends -->
|
|
|
|
<!-- tap on top -->
|
|
<div class="go-top">
|
|
<span class="progress-value">
|
|
<i class="ti ti-arrow-up"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Footer Section starts-->
|
|
<footer>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-9 col-12">
|
|
<p class="footer-text f-w-600 mb-0">Copyright © 2025 ki-admin. All rights reserved 💖
|
|
V1.0.0</p>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="footer-text text-end">
|
|
<a class="f-w-500 text-primary" href="mailto:teqlathemes@gmail.com"> Need Help <i
|
|
class="ti ti-help"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!-- Footer Section ends-->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--customizer-->
|
|
<div id="customizer"></div>
|
|
|
|
<!-- Modal -->
|
|
<!-- Loader -->
|
|
|
|
<!-- latest jquery-->
|
|
<script src="../assets/js/jquery-3.6.3.min.js"></script>
|
|
|
|
<!-- Simple bar js-->
|
|
<script src="../assets/vendor/simplebar/simplebar.js"></script>
|
|
|
|
<!-- Bootstrap js-->
|
|
<script src="../assets/vendor/bootstrap/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- phosphor js -->
|
|
<script src="../assets/vendor/phosphor/phosphor.js"></script>
|
|
|
|
<!--Prism JS-->
|
|
<script src="../assets/vendor/prism/prism.min.js"></script>
|
|
|
|
<!-- masonry js-->
|
|
<script src="../assets/vendor/masonry/masonry.pkgd.min.js"></script>
|
|
|
|
<!-- Toatify js-->
|
|
<script src="../assets/vendor/toastify/toastify.js"></script>
|
|
<script src="../assets/js/tooltips_popovers.js"></script>
|
|
|
|
|
|
<!-- cheatsheet js -->
|
|
<script src="../assets/js/cheatsheet.js"></script>
|
|
|
|
<!-- App js-->
|
|
<script src="../assets/js/script.js"></script>
|
|
|
|
<!-- Customizer js-->
|
|
<script src="../assets/js/customizer.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |