4456 lines
201 KiB
HTML
4456 lines
201 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Required Meta Tags Always Come First -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<!-- Title -->
|
||
<title>Cards - Documentation | Front - Multipurpose Responsive Template</title>
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="../favicon.ico">
|
||
|
||
<!-- Font -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||
|
||
<!-- CSS Implementing Plugins -->
|
||
<!-- bundlecss:vendor [..] -->
|
||
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<!-- bundlecss:theme [..] ?v=1.0 -->
|
||
|
||
|
||
|
||
<link rel="preload" href="../assets/css/theme.css" data-hs-appearance="default" as="style">
|
||
<link rel="preload" href="../assets/css/docs.css" data-hs-appearance="default" as="style">
|
||
<link rel="preload" href="../assets/css/theme-dark.css" data-hs-appearance="dark" as="style">
|
||
<link rel="preload" href="../assets/css/docs-dark.css" data-hs-appearance="dark" as="style">
|
||
|
||
<style data-hs-appearance-onload-styles>
|
||
* {
|
||
transition: unset !important;
|
||
}
|
||
|
||
body {
|
||
opacity: 0;
|
||
}
|
||
</style>
|
||
|
||
|
||
<script>
|
||
window.hs_config = {"autopath":"@@autopath","deleteLine":"hs-builder:delete","deleteLine:build":"hs-builder:build-delete","deleteLine:dist":"hs-builder:dist-delete","previewMode":false,"startPath":"/index.html","vars":{"themeFont":"https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap","version":"?v=1.0"},"layoutBuilder":{"extend":{"switcherSupport":true},"header":{"layoutMode":"default","containerMode":"container-fluid"},"sidebarLayout":"default"},"themeAppearance":{"layoutSkin":"default","sidebarSkin":"default","styles":{"colors":{"primary":"#377dff","transparent":"transparent","white":"#fff","dark":"132144","gray":{"100":"#f9fafc","900":"#1e2022"}},"font":"Inter"}},"languageDirection":{"lang":"en"},"skipFilesFromBundle":{"dist":["assets/js/hs.theme-appearance.js","assets/js/hs.theme-appearance-charts.js"],"build":["assets/css/theme.css","assets/vendor/hs-navbar-vertical-aside/dist/hs-navbar-vertical-aside-mini-cache.js","assets/js/demo.js","assets/css/theme-dark.css","assets/css/docs.css","assets/vendor/icon-set/style.css","assets/js/hs.theme-appearance.js","assets/js/hs.theme-appearance-charts.js","node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.min.js"]},"minifyCSSFiles":["assets/css/theme.css","assets/css/theme-dark.css"],"copyDependencies":{"dist":{"*assets/js/theme-custom.js":""},"build":{"*assets/js/theme-custom.js":"","node_modules/bootstrap-icons/font/*fonts/**":"assets/css"}},"buildFolder":"","replacePathsToCDN":{},"directoryNames":{"src":"./src","dist":"./dist","build":"./build"},"fileNames":{"dist":{"js":"theme.min.js","css":"theme.min.css"},"build":{"css":"theme.min.css","js":"theme.min.js","vendorCSS":"vendor.min.css","vendorJS":"vendor.min.js"}},"fileTypes":"jpg|png|svg|mp4|webm|ogv|json"}
|
||
window.hs_config.gulpRGBA = (p1) => {
|
||
const options = p1.split(',')
|
||
const hex = options[0].toString()
|
||
const transparent = options[1].toString()
|
||
|
||
var c;
|
||
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
|
||
c= hex.substring(1).split('');
|
||
if(c.length== 3){
|
||
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
|
||
}
|
||
c= '0x'+c.join('');
|
||
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + transparent + ')';
|
||
}
|
||
throw new Error('Bad Hex');
|
||
}
|
||
window.hs_config.gulpDarken = (p1) => {
|
||
const options = p1.split(',')
|
||
|
||
let col = options[0].toString()
|
||
let amt = -parseInt(options[1])
|
||
var usePound = false
|
||
|
||
if (col[0] == "#") {
|
||
col = col.slice(1)
|
||
usePound = true
|
||
}
|
||
var num = parseInt(col, 16)
|
||
var r = (num >> 16) + amt
|
||
if (r > 255) {
|
||
r = 255
|
||
} else if (r < 0) {
|
||
r = 0
|
||
}
|
||
var b = ((num >> 8) & 0x00FF) + amt
|
||
if (b > 255) {
|
||
b = 255
|
||
} else if (b < 0) {
|
||
b = 0
|
||
}
|
||
var g = (num & 0x0000FF) + amt
|
||
if (g > 255) {
|
||
g = 255
|
||
} else if (g < 0) {
|
||
g = 0
|
||
}
|
||
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16)
|
||
}
|
||
window.hs_config.gulpLighten = (p1) => {
|
||
const options = p1.split(',')
|
||
|
||
let col = options[0].toString()
|
||
let amt = parseInt(options[1])
|
||
var usePound = false
|
||
|
||
if (col[0] == "#") {
|
||
col = col.slice(1)
|
||
usePound = true
|
||
}
|
||
var num = parseInt(col, 16)
|
||
var r = (num >> 16) + amt
|
||
if (r > 255) {
|
||
r = 255
|
||
} else if (r < 0) {
|
||
r = 0
|
||
}
|
||
var b = ((num >> 8) & 0x00FF) + amt
|
||
if (b > 255) {
|
||
b = 255
|
||
} else if (b < 0) {
|
||
b = 0
|
||
}
|
||
var g = (num & 0x0000FF) + amt
|
||
if (g > 255) {
|
||
g = 255
|
||
} else if (g < 0) {
|
||
g = 0
|
||
}
|
||
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16)
|
||
}
|
||
</script>
|
||
</head>
|
||
|
||
<body class="navbar-sidebar-aside-lg">
|
||
|
||
<script src="../assets/js/hs.theme-appearance.js"></script>
|
||
|
||
|
||
<!-- ========== HEADER ========== -->
|
||
<header id="header" class="navbar navbar-expand navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
||
<div class="container-fluid">
|
||
<nav class="navbar-nav-wrap">
|
||
<div class="row flex-grow-1">
|
||
<!-- Default Logo -->
|
||
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
||
<a class="navbar-brand" href="../documentation/index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo" data-hs-theme-appearance="default">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos-light/logo.svg" alt="Logo" data-hs-theme-appearance="dark">
|
||
</a>
|
||
<a href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary">v2.0</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<div class="col-md px-lg-0">
|
||
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
||
<div class="d-none d-md-block">
|
||
<!-- Search Form -->
|
||
<form id="docsSearch" class="position-relative"
|
||
data-hs-list-options='{
|
||
"searchMenu": true,
|
||
"keyboard": true,
|
||
"item": "searchTemplate",
|
||
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
||
"empty": "#searchNoResults"
|
||
}'>
|
||
<!-- Input Group -->
|
||
<div class="input-group input-group-merge navbar-input-group">
|
||
<div class="input-group-prepend input-group-text">
|
||
<i class="bi-search"></i>
|
||
</div>
|
||
|
||
<input type="search" class="search form-control form-control-sm" placeholder="Search in docs" aria-label="Search in docs">
|
||
|
||
<a class="input-group-append input-group-text" href="javascript:;">
|
||
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
||
</a>
|
||
</div>
|
||
<!-- End Input Group -->
|
||
|
||
<!-- List -->
|
||
<div class="list dropdown-menu navbar-dropdown-menu-borderless w-100 overflow-auto" style="max-height: 16rem;"></div>
|
||
<!-- End List -->
|
||
|
||
<!-- Empty -->
|
||
<div id="searchNoResults" style="display: none;">
|
||
<div class="text-center p-4">
|
||
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" data-hs-theme-appearance="default" style="width: 7rem;">
|
||
<img class="mb-3" src="../assets/svg/illustrations-light/oc-error.svg" alt="Image Description" data-hs-theme-appearance="dark" style="width: 7rem;">
|
||
<p class="mb-0">No Results</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Empty -->
|
||
</form>
|
||
<!-- End Search Form -->
|
||
|
||
<!-- List Item Template -->
|
||
<div class="d-none">
|
||
<div id="searchTemplate" class="dropdown-item">
|
||
<a class="d-block link" href="#">
|
||
<span class="category d-block fw-normal text-muted mb-1"></span>
|
||
<span class="component text-dark"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End List Item Template -->
|
||
</div>
|
||
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav p-0">
|
||
<li class="nav-item">
|
||
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
||
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="btn btn-primary btn-sm" href="../index.html">
|
||
<i class="bi-eye me-1"></i> Preview Demo
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main">
|
||
<!-- Navbar -->
|
||
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
||
data-hs-nav-scroller-options='{
|
||
"type": "vertical",
|
||
"target": ".navbar-nav .active",
|
||
"offset": 80
|
||
}'>
|
||
<!-- Navbar Toggle -->
|
||
<div class="d-grid flex-grow-1 px-2">
|
||
<button type="button" class="navbar-toggler btn btn-white" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
||
<span class="d-flex justify-content-between align-items-center">
|
||
<span class="h3 mb-0">Nav menu</span>
|
||
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<!-- End Navbar Toggle -->
|
||
|
||
<!-- Navbar Collapse -->
|
||
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
||
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
||
<!-- Default Logo -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<a class="navbar-brand" href="../documentation/index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo" data-hs-theme-appearance="default">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos-light/logo.svg" alt="Logo" data-hs-theme-appearance="dark">
|
||
</a>
|
||
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary ms-2">v2.0</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
</div>
|
||
|
||
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
||
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Documentation</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/index.html">Introduction</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Getting started</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/getting-started.html">Getting Started</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/gulp.html">Gulp</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/darkmode.html">Dark Mode <span class="badge bg-soft-dark text-dark lh-base ms-1">New</span></a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/customization.html">Customization</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/credits.html">Credits</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/changelog.html">Changelog</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Design & Graphics</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/bs-icons.html">Bootstrap Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/illustrations.html">Illustrations</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Components</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/accordion.html">Accordion</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/alerts.html">Alerts</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/avatars.html">Avatars</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/badge.html">Badge</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/breadcrumb.html">Breadcrumb</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/buttons.html">Buttons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/button-group.html">Button Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../documentation/cards.html">Cards</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/collapse.html">Collapse</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/column-divider.html">Column Divider</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/devices.html">Devices</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/divider.html">Divider</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/dropdowns.html">Dropdowns</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/icons.html">Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/list-group.html">List Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/lists.html">Lists</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/legend-indicator.html">Legend Indicator</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/modal.html">Modal</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/offcanvas.html">Offcanvas</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/page-header.html">Page Header</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/pagination.html">Pagination</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/popovers.html">Popovers</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/progress.html">Progress</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/profile.html">Profile</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/shapes.html">Shapes</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sliding-img.html">Sliding Image</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/spinners.html">Spinners</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/steps.html">Steps</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tab.html">Tab</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toasts.html">Toasts</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tooltips.html">Tooltips</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/typography.html">Typography</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Navbars</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/navbar.html">Navbar</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/navs.html">Navs</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/mega-menu.html">Mega Menu</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/navbar-vertical-aside.html">Navbar Vertical Aside</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/scrollspy.html">Scrollspy</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Tables</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tables.html">Tables</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/datatables.html">Datatables</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/table-sticky-header.html">Sticky Header</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Basic forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/basic-forms.html">Basic Forms</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/checks-and-switches.html">Checks & Switches</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/input-group.html">Input Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Advanced Forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/select.html">Advanced Select</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/datepicker.html">Datepicker (Flatpickr)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/daterangepicker.html">Date Range Picker</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/calendar.html">Calendar (Fullcalendar)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/file-attachments.html">File Attachments</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/dropzone.html">Drag’ n’ Drop File Uploads</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/quill.html">WYSIWYG Editor</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/quantity-counter.html">Quantity Counter</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/copy-to-clipboard.html">Copy to Clipboard</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/input-mask.html">Input Mask</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/step-forms.html">Step Forms (Wizards)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/add-field.html">Add Field</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-password.html">Toggle Password</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/count-characters.html">Count Characters</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/form-search.html">Form Search</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-switch.html">Toggle Switch</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/google-recaptcha.html">Google reCAPTCHA</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Charts</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/chartjs.html">Chart.js</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/counter.html">Counter</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/circles.html">Circles.js (Pie Chart)</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Others</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/fslightbox.html">Fullscreen Lightbox</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/maps-leaflet.html">Leaflet</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/maps-jsvectormap.html">JSVectorMap</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sortablejs.html">SortableJS</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sticky-block.html">Sticky Block</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/go-to.html">Go To</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-4"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Utilities</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/backgrounds.html">Backgrounds</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/borders.html">Borders</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/colors.html">Colors</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/links.html">Links</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/position.html">Position</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/shadows.html">Shadows</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sizing.html">Sizing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/spacing.html">Spacing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/z-index.html">Z-index</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/opacity.html">Opacity</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- End Navbar Collapse -->
|
||
</nav>
|
||
<!-- End Navbar -->
|
||
|
||
<!-- Content -->
|
||
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
|
||
<!-- Page Header -->
|
||
<div class="docs-page-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-sm">
|
||
<h1 class="docs-page-header-title">Cards</h1>
|
||
<p class="docs-page-header-text">Front's card provide a flexible and extensible content container with multiple variants and options.</p>
|
||
<a class="link" href="https://getbootstrap.com/docs/5.0/components/card/" target="_blank">Bootstrap Card documentation <i class="bi-box-arrow-up-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Page Header -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="basic-example" class="hs-docs-heading">
|
||
Basic example <a class="anchorjs-link" href="#basic-example" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Below is an example of a basic card with mixed content and a fixed width.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab1" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab1" href="#nav-result1" data-bs-toggle="pill" data-bs-target="#nav-result1" role="tab" aria-controls="nav-result1" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab1" href="#nav-html1" data-bs-toggle="pill" data-bs-target="#nav-html1" role="tab" aria-controls="nav-html1" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent1">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result1" role="tabpanel" aria-labelledby="nav-resultTab1">
|
||
<!-- Card -->
|
||
<div class="card" style="max-width: 20rem;">
|
||
<img class="card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card" style="max-width: 20rem;">
|
||
<img class="card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="titles-text-and-links" class="hs-docs-heading">
|
||
Titles, text, and links <a class="anchorjs-link" href="#titles-text-and-links" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Card titles are used by adding <code>.card-title</code> to a <code><h*></code> tag. In the same way, links are added and placed next to each other by adding <code>.card-link</code> to an <code><a></code> tag.</p>
|
||
|
||
<p>Subtitles are used by adding a <code>.card-subtitle</code> to a <code><h*></code> tag.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab2" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab2" href="#nav-result2" data-bs-toggle="pill" data-bs-target="#nav-result2" role="tab" aria-controls="nav-result2" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab2" href="#nav-html2" data-bs-toggle="pill" data-bs-target="#nav-html2" role="tab" aria-controls="nav-html2" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent2">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result2" role="tabpanel" aria-labelledby="nav-resultTab2">
|
||
<!-- Card -->
|
||
<div class="card" style="max-width: 20rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle">Card subtitle</span>
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
<a class="card-link" href="#">Card link</a>
|
||
<a class="card-link" href="#">Another link</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card" style="max-width: 20rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle">Card subtitle</span>
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
<a class="card-link" href="#">Card link</a>
|
||
<a class="card-link" href="#">Another link</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="card-header" class="hs-docs-heading">
|
||
Header <a class="anchorjs-link" href="#card-header" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Add an optional header within a card. By default <code>.card-header</code> is set to <code>display: flex;</code> and <code>justify-content: space-between;</code> and <code>align-items: center;</code>.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab3" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab3" href="#nav-result3" data-bs-toggle="pill" data-bs-target="#nav-result3" role="tab" aria-controls="nav-result3" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab3" href="#nav-html3" data-bs-toggle="pill" data-bs-target="#nav-html3" role="tab" aria-controls="nav-html3" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent3">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result3" role="tabpanel" aria-labelledby="nav-resultTab3">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-header-title">Featured</h3>
|
||
<small class="text-muted">2 days ago</small>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3 class="card-title">Special title treatment</h3>
|
||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-header-title">Featured</h3>
|
||
<small class="text-muted">2 days ago</small>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3 class="card-title">Special title treatment</h3>
|
||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="card-header-content-between" class="hs-docs-heading">
|
||
Header content between <a class="anchorjs-link" href="#card-header-content-between" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code>.card-header-content-{breakpoint}-between</code> to align items in the corners and modifier classes to break horizontal alignment and keep the same style in vertical order. Reduce browser size to see it in action.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab26" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab26" href="#nav-result26" data-bs-toggle="pill" data-bs-target="#nav-result26" role="tab" aria-controls="nav-result26" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab26" href="#nav-html26" data-bs-toggle="pill" data-bs-target="#nav-html26" role="tab" aria-controls="nav-html26" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent26">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result26" role="tabpanel" aria-labelledby="nav-resultTab26">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-header card-header-content-md-between">
|
||
<h3 class="card-header-title">Featured</h3>
|
||
<small class="text-muted">2 days ago</small>
|
||
</div>
|
||
<div class="card-body">
|
||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html26" role="tabpanel" aria-labelledby="nav-htmlTab26">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-header card-header-content-md-between">
|
||
<h3 class="card-header-title">Featured</h3>
|
||
<small class="text-muted">2 days ago</small>
|
||
</div>
|
||
<div class="card-body">
|
||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="body" class="hs-docs-heading">
|
||
Body <a class="anchorjs-link" href="#body" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>The building block of a card is the <code>.card-body</code>. Use it whenever you need a padded section within a card.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab4" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab4" href="#nav-result4" data-bs-toggle="pill" data-bs-target="#nav-result4" role="tab" aria-controls="nav-result4" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab4" href="#nav-html4" data-bs-toggle="pill" data-bs-target="#nav-html4" role="tab" aria-controls="nav-html4" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent4">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result4" role="tabpanel" aria-labelledby="nav-resultTab4">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="footer" class="hs-docs-heading">
|
||
Footer <a class="anchorjs-link" href="#footer" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Add an optional footer within a card.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab5" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab5" href="#nav-result5" data-bs-toggle="pill" data-bs-target="#nav-result5" role="tab" aria-controls="nav-result5" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab5" href="#nav-html5" data-bs-toggle="pill" data-bs-target="#nav-html5" role="tab" aria-controls="nav-html5" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent5">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result5" role="tabpanel" aria-labelledby="nav-resultTab5">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Special title treatment</h3>
|
||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
<div class="card-footer">
|
||
2 days ago
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html5" role="tabpanel" aria-labelledby="nav-htmlTab5">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Special title treatment</h3>
|
||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
<div class="card-footer">
|
||
2 days ago
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="sizing" class="hs-docs-heading">
|
||
Sizing <a class="anchorjs-link" href="#sizing" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code>.card-sm</code> class.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab6" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab6" href="#nav-result6" data-bs-toggle="pill" data-bs-target="#nav-result6" role="tab" aria-controls="nav-result6" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab6" href="#nav-html6" data-bs-toggle="pill" data-bs-target="#nav-html6" role="tab" aria-controls="nav-html6" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent6">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result6" role="tabpanel" aria-labelledby="nav-resultTab6">
|
||
<!-- Card -->
|
||
<div class="card card-sm" style="max-width: 20rem;">
|
||
<img class="card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html6" role="tabpanel" aria-labelledby="nav-htmlTab6">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card card-sm" style="max-width: 20rem;">
|
||
<img class="card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<p>Use <code>.card-lg</code> class.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab7" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab7" href="#nav-result7" data-bs-toggle="pill" data-bs-target="#nav-result7" role="tab" aria-controls="nav-result7" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab7" href="#nav-html7" data-bs-toggle="pill" data-bs-target="#nav-html7" role="tab" aria-controls="nav-html7" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent7">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result7" role="tabpanel" aria-labelledby="nav-resultTab7">
|
||
<!-- Card -->
|
||
<div class="card card-lg" style="max-width: 20rem;">
|
||
<img class="card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html7" role="tabpanel" aria-labelledby="nav-htmlTab7">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card card-lg" style="max-width: 20rem;">
|
||
<img class="card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="images" class="hs-docs-heading">
|
||
Images <a class="anchorjs-link" href="#images" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Cards include a few options for working with images. Choose from appending "image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card.</p>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="image-caps" class="hs-docs-heading">
|
||
Image caps <a class="anchorjs-link" href="#image-caps" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab8" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab8" href="#nav-result8" data-bs-toggle="pill" data-bs-target="#nav-result8" role="tab" aria-controls="nav-result8" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab8" href="#nav-html8" data-bs-toggle="pill" data-bs-target="#nav-html8" role="tab" aria-controls="nav-html8" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent8">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result8" role="tabpanel" aria-labelledby="nav-resultTab8">
|
||
<!-- Card -->
|
||
<div class="card mb-3" style="max-width: 20rem;">
|
||
<img class="card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html8" role="tabpanel" aria-labelledby="nav-htmlTab8">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card mb-3">
|
||
<img class="card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="image-overlays" class="hs-docs-heading">
|
||
Image overlays <a class="anchorjs-link" href="#image-overlays" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-3">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab9" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab9" href="#nav-result9" data-bs-toggle="pill" data-bs-target="#nav-result9" role="tab" aria-controls="nav-result9" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab9" href="#nav-html9" data-bs-toggle="pill" data-bs-target="#nav-html9" role="tab" aria-controls="nav-html9" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent9">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result9" role="tabpanel" aria-labelledby="nav-resultTab9">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<img class="card-img card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
|
||
<div class="card-img-overlay">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">Last updated 3 mins ago</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html9" role="tabpanel" aria-labelledby="nav-htmlTab9">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<img class="card-img card-img-top" src="../assets/img/documentation/img7.jpg" alt="Card image cap">
|
||
<div class="card-img-overlay">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">Last updated 3 mins ago</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark" role="alert">
|
||
<span class="fw-semi-bold">Heads up!</span> Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.
|
||
</div>
|
||
<!-- End Alert -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="horizontal" class="hs-docs-heading">
|
||
Horizontal <a class="anchorjs-link" href="#horizontal" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with <code>.no-gutters</code> and use <code>.col-md-*</code> classes to make the card horizontal at the <code>md</code> breakpoint. Further adjustments may be needed depending on your card content.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab10" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab10" href="#nav-result10" data-bs-toggle="pill" data-bs-target="#nav-result10" role="tab" aria-controls="nav-result10" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab10" href="#nav-html10" data-bs-toggle="pill" data-bs-target="#nav-html10" role="tab" aria-controls="nav-html10" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent10">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result10" role="tabpanel" aria-labelledby="nav-resultTab10">
|
||
<!-- Card -->
|
||
<div class="card mb-3" style="max-width: 540px;">
|
||
<div class="row no-gutters">
|
||
<div class="col-md-4">
|
||
<img class="img-fluid" src="../assets/img/documentation/img8.jpg" alt="Card image cap">
|
||
</div>
|
||
<div class="col-md-8">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in.</p>
|
||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html10" role="tabpanel" aria-labelledby="nav-htmlTab10">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card mb-3" style="max-width: 540px;">
|
||
<div class="row no-gutters">
|
||
<div class="col-md-4">
|
||
<img class="img-fluid" src="../assets/img/documentation/img8.jpg" alt="Card image cap">
|
||
</div>
|
||
<div class="col-md-8">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in.</p>
|
||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="card-layout" class="hs-docs-heading">
|
||
Card layout <a class="anchorjs-link" href="#card-layout" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, <span class="fw-semi-bold">these layout options are not yet responsive</span>.</p>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="card-groups" class="hs-docs-heading">
|
||
Card groups <a class="anchorjs-link" href="#card-groups" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use <code>display: flex;</code> to become attached with uniform dimensions starting at the <code>sm</code> breakpoint.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab11" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab11" href="#nav-result11" data-bs-toggle="pill" data-bs-target="#nav-result11" role="tab" aria-controls="nav-result11" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab11" href="#nav-html11" data-bs-toggle="pill" data-bs-target="#nav-html11" role="tab" aria-controls="nav-html11" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent11">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result11" role="tabpanel" aria-labelledby="nav-resultTab11">
|
||
<div class="card-group">
|
||
<div class="card">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img-top" src="../assets/img/documentation/img2.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img-top" src="../assets/img/documentation/img3.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html11" role="tabpanel" aria-labelledby="nav-htmlTab11">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<div class="card-group">
|
||
<div class="card">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img-top" src="../assets/img/documentation/img2.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img-top" src="../assets/img/documentation/img3.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<p>When using card groups with footers, their content will automatically line up.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab12" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab12" href="#nav-result12" data-bs-toggle="pill" data-bs-target="#nav-result12" role="tab" aria-controls="nav-result12" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab12" href="#nav-html12" data-bs-toggle="pill" data-bs-target="#nav-html12" role="tab" aria-controls="nav-html12" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent12">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result12" role="tabpanel" aria-labelledby="nav-resultTab12">
|
||
<div class="card-group">
|
||
<div class="card">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img-top" src="../assets/img/documentation/img2.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img-top" src="../assets/img/documentation/img3.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html12" role="tabpanel" aria-labelledby="nav-htmlTab12">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<div class="card-group">
|
||
<div class="card">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img-top" src="../assets/img/documentation/img2.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img-top" src="../assets/img/documentation/img3.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="card-transition" class="hs-docs-heading">
|
||
Card transition <a class="anchorjs-link" href="#card-transition" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Add animation on hover using <code>.card-transition</code></p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab13" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab13" href="#nav-result13" data-bs-toggle="pill" data-bs-target="#nav-result13" role="tab" aria-controls="nav-result13" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab13" href="#nav-html13" data-bs-toggle="pill" data-bs-target="#nav-html13" role="tab" aria-controls="nav-html13" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent13">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result13" role="tabpanel" aria-labelledby="nav-resultTab13">
|
||
<!-- Card -->
|
||
<a class="card card-transition" href="#" style="max-width: 20rem;">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text text-body">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html13" role="tabpanel" aria-labelledby="nav-htmlTab13">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<a class="card card-transition" href="#">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text text-body">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="card-ghost" class="hs-docs-heading">
|
||
Card ghost <a class="anchorjs-link" href="#card-ghost" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Need a card that has no box-shadow and border colors? Use <code>.card-ghost</code></p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab14" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab14" href="#nav-result14" data-bs-toggle="pill" data-bs-target="#nav-result14" role="tab" aria-controls="nav-result14" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab14" href="#nav-html14" data-bs-toggle="pill" data-bs-target="#nav-html14" role="tab" aria-controls="nav-html14" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent14">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result14" role="tabpanel" aria-labelledby="nav-resultTab14">
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<div class="card-body">
|
||
<h3>Billing address #1</h3>
|
||
|
||
<address class="text-body">
|
||
45 Roker Terrace<br>
|
||
Latheronwheel<br>
|
||
KW5 8NW, London<br>
|
||
UK <img class="avatar avatar-xss avatar-circle me-1" src="../node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
|
||
</address>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<div class="card-body">
|
||
<h3>Billing address #2</h3>
|
||
|
||
<address class="text-body">
|
||
27 Thornton St<br>
|
||
Hundleby<br>
|
||
PE23 0ZJ, Manchester<br>
|
||
UK <img class="avatar avatar-xss avatar-circle me-1" src="../node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
|
||
</address>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<!-- Card -->
|
||
<a class="card card-ghost card-centered h-100" href="#">
|
||
<div class="card-body">
|
||
<div class="mb-2">
|
||
<i class="bi-building fs-2"></i>
|
||
</div>
|
||
Add a new address
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html14" role="tabpanel" aria-labelledby="nav-htmlTab14">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<div class="card-body">
|
||
<h3>Billing address #1</h3>
|
||
|
||
<address class="text-body">
|
||
45 Roker Terrace<br>
|
||
Latheronwheel<br>
|
||
KW5 8NW, London<br>
|
||
UK <img class="avatar avatar-xss avatar-circle me-1" src="../node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
|
||
</address>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<div class="card-body">
|
||
<h3>Billing address #2</h3>
|
||
|
||
<address class="text-body">
|
||
27 Thornton St<br>
|
||
Hundleby<br>
|
||
PE23 0ZJ, Manchester<br>
|
||
UK <img class="avatar avatar-xss avatar-circle me-1" src="../node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
|
||
</address>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<!-- Card -->
|
||
<a class="card card-ghost card-centered h-100" href="#">
|
||
<div class="card-body">
|
||
<div class="mb-2">
|
||
<i class="bi-building fs-2"></i>
|
||
</div>
|
||
Add a new address
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="card-dashed" class="hs-docs-heading">
|
||
Card dashed <a class="anchorjs-link" href="#card-dashed" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code>.card-dashed</code></p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab15" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab15" href="#nav-result15" data-bs-toggle="pill" data-bs-target="#nav-result15" role="tab" aria-controls="nav-result15" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab15" href="#nav-html15" data-bs-toggle="pill" data-bs-target="#nav-html15" role="tab" aria-controls="nav-html15" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent15">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result15" role="tabpanel" aria-labelledby="nav-resultTab15">
|
||
<!-- Card -->
|
||
<div class="card card-dashed shadow-none" style="max-width: 20rem;">
|
||
<div class="card-body text-center">
|
||
<div class="mb-2">
|
||
<i class="bi-building fs-2"></i>
|
||
</div>
|
||
This is a card with dashed border style
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html15" role="tabpanel" aria-labelledby="nav-htmlTab15">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card card-dashed shadow-none">
|
||
<div class="card-body text-center">
|
||
<div class="mb-2">
|
||
<i class="bi-building fs-2"></i>
|
||
</div>
|
||
This is a card with dashed border style
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="card-pinned" class="hs-docs-heading">
|
||
Card pinned <a class="anchorjs-link" href="#card-pinned" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Need to place a component on top of a card image? Use <code>.card-pinned-top-start</code></p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab16" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab16" href="#nav-result16" data-bs-toggle="pill" data-bs-target="#nav-result16" role="tab" aria-controls="nav-result16" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab16" href="#nav-html16" data-bs-toggle="pill" data-bs-target="#nav-html16" role="tab" aria-controls="nav-html16" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent16">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result16" role="tabpanel" aria-labelledby="nav-resultTab16">
|
||
<!-- Card -->
|
||
<div class="card h-100" style="max-width: 20rem;">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
|
||
<span class="card-pinned-top-start">
|
||
<span class="badge bg-primary rounded-pill">Top start aligned</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
|
||
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html16" role="tabpanel" aria-labelledby="nav-htmlTab16">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card h-100" style="max-width: 20rem;">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
|
||
<span class="card-pinned-top-start">
|
||
<span class="badge bg-primary rounded-pill">Top start aligned</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
|
||
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<p>or <code>.card-pinned-top-end</code></p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab17" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab17" href="#nav-result17" data-bs-toggle="pill" data-bs-target="#nav-result17" role="tab" aria-controls="nav-result17" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab17" href="#nav-html17" data-bs-toggle="pill" data-bs-target="#nav-html17" role="tab" aria-controls="nav-html17" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent17">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result17" role="tabpanel" aria-labelledby="nav-resultTab17">
|
||
<!-- Card -->
|
||
<div class="card h-100" style="max-width: 20rem;">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
|
||
<span class="card-pinned-top-end">
|
||
<span class="badge bg-primary rounded-pill">Top end aligned</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
|
||
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html17" role="tabpanel" aria-labelledby="nav-htmlTab17">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card h-100" style="max-width: 20rem;">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
|
||
<span class="card-pinned-top-end">
|
||
<span class="badge bg-primary rounded-pill">Top end aligned</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
|
||
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<p>or <code>.card-pinned-bottom-start</code></p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab18" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab18" href="#nav-result18" data-bs-toggle="pill" data-bs-target="#nav-result18" role="tab" aria-controls="nav-result18" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab18" href="#nav-html18" data-bs-toggle="pill" data-bs-target="#nav-html18" role="tab" aria-controls="nav-html18" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent18">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result18" role="tabpanel" aria-labelledby="nav-resultTab18">
|
||
<!-- Card -->
|
||
<div class="card h-100" style="max-width: 20rem;">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
|
||
<span class="card-pinned-bottom-start">
|
||
<span class="badge bg-primary rounded-pill">Top start aligned</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
|
||
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html18" role="tabpanel" aria-labelledby="nav-htmlTab18">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card h-100" style="max-width: 20rem;">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
|
||
<span class="card-pinned-bottom-start">
|
||
<span class="badge bg-primary rounded-pill">Top start aligned</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
|
||
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<p>or <code>.card-pinned-bottom-end</code></p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab19" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab19" href="#nav-result19" data-bs-toggle="pill" data-bs-target="#nav-result19" role="tab" aria-controls="nav-result19" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab19" href="#nav-html19" data-bs-toggle="pill" data-bs-target="#nav-html19" role="tab" aria-controls="nav-html19" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent19">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result19" role="tabpanel" aria-labelledby="nav-resultTab19">
|
||
<!-- Card -->
|
||
<div class="card h-100" style="max-width: 20rem;">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
|
||
<span class="card-pinned-bottom-end">
|
||
<span class="badge bg-primary rounded-pill">Top end aligned</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
|
||
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html19" role="tabpanel" aria-labelledby="nav-htmlTab19">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card h-100" style="max-width: 20rem;">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/img/documentation/img1.jpg" alt="Image Description">
|
||
|
||
<span class="card-pinned-bottom-end">
|
||
<span class="badge bg-primary rounded-pill">Top end aligned</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title"><a class="text-dark" href="#">Objects and dimensions</a></h3>
|
||
<p class="card-text">Learn the simplest way to select the object and change dimensions.</p>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="alert" class="hs-docs-heading">
|
||
Alert <a class="anchorjs-link" href="#alert" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code>.card-alert</code> with <code>alert</code> to remove the <code>border-radius</code> and <code>margin-bottom</code> to perfectly sit within a card body.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab20" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab20" href="#nav-result20" data-bs-toggle="pill" data-bs-target="#nav-result20" role="tab" aria-controls="nav-result20" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab20" href="#nav-html20" data-bs-toggle="pill" data-bs-target="#nav-html20" role="tab" aria-controls="nav-html20" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent20">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result20" role="tabpanel" aria-labelledby="nav-resultTab20">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-header-title">Featured</h3>
|
||
<small class="text-muted">2 days ago</small>
|
||
</div>
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark card-alert text-center" role="alert">
|
||
We need permission from your browser to show notifications. <a class="alert-link" href="#">Request permission</a>
|
||
</div>
|
||
<!-- End Alert -->
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html20" role="tabpanel" aria-labelledby="nav-htmlTab20">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-header-title">Featured</h3>
|
||
<small class="text-muted">2 days ago</small>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">
|
||
<small class="text-muted">Last updated 3 mins ago</small>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="table" class="hs-docs-heading">
|
||
Table <a class="anchorjs-link" href="#table" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p><code>.card-table</code> aligns table sizes with card body sizes.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab21" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab21" href="#nav-result21" data-bs-toggle="pill" data-bs-target="#nav-result21" role="tab" aria-controls="nav-result21" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab21" href="#nav-html21" data-bs-toggle="pill" data-bs-target="#nav-html21" role="tab" aria-controls="nav-html21" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent21">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result21" role="tabpanel" aria-labelledby="nav-resultTab21">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-header-title">Users</h4>
|
||
</div>
|
||
|
||
<!-- Table -->
|
||
<div class="table-responsive">
|
||
<table class="table table-nowrap table-align-middle">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Position</th>
|
||
<th>Country</th>
|
||
<th>Status</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<a class="d-flex" href="../user-profile.html">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar avatar-circle">
|
||
<img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<span class="d-block h5 text-inherit mb-0">Amanda Harvey <i class="bi-patch-check-fill text-primary" data-bs-toggle="tooltip" data-placement="top" title="Top endorsed"></i></span>
|
||
<span class="d-block font-size-sm text-body">amanda@example.com</span>
|
||
</div>
|
||
</a>
|
||
</td>
|
||
<td>
|
||
<span class="d-block h5 mb-0">Director</span>
|
||
<span class="d-block font-size-sm">Human resources</span>
|
||
</td>
|
||
<td>United Kingdom</td>
|
||
<td>
|
||
<span class="legend-indicator bg-success"></span>Active
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<a class="d-flex" href="../user-profile.html">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar avatar-soft-primary avatar-circle">
|
||
<span class="avatar-initials">A</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<span class="d-block h5 text-inherit mb-0">Anne Richard</span>
|
||
<span class="d-block font-size-sm text-body">anne@example.com</span>
|
||
</div>
|
||
</a>
|
||
</td>
|
||
<td>
|
||
<span class="d-block h5 mb-0">Seller</span>
|
||
<span class="d-block font-size-sm">Branding products</span>
|
||
</td>
|
||
<td>United States</td>
|
||
<td>
|
||
<span class="legend-indicator bg-warning"></span>Pending
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<a class="d-flex" href="../user-profile.html">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar avatar-circle">
|
||
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<span class="d-block h5 text-inherit mb-0">David Harrison</span>
|
||
<span class="d-block font-size-sm text-body">david@example.com</span>
|
||
</div>
|
||
</a>
|
||
</td>
|
||
<td>
|
||
<span class="d-block h5 mb-0">Unknown</span>
|
||
<span class="d-block font-size-sm">Unknown</span>
|
||
</td>
|
||
<td>United States</td>
|
||
<td>
|
||
<span class="legend-indicator bg-success"></span>Active
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<a class="d-flex" href="../user-profile.html">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar avatar-circle">
|
||
<img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<span class="d-block h5 text-inherit mb-0">Finch Hoot</span>
|
||
<span class="d-block font-size-sm text-body">finch@example.com</span>
|
||
</div>
|
||
</a>
|
||
</td>
|
||
<td>
|
||
<span class="d-block h5 mb-0">Designer</span>
|
||
<span class="d-block font-size-sm">IT department</span>
|
||
</td>
|
||
<td>Argentina</td>
|
||
<td>
|
||
<span class="legend-indicator bg-danger"></span>Suspended
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<a class="d-flex" href="../user-profile.html">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar avatar-soft-dark avatar-circle">
|
||
<span class="avatar-initials">B</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<span class="d-block h5 text-inherit mb-0">Bob Dean</span>
|
||
<span class="d-block font-size-sm text-body">bob@example.com</span>
|
||
</div>
|
||
</a>
|
||
</td>
|
||
<td>
|
||
<span class="d-block h5 mb-0">Executive director</span>
|
||
<span class="d-block font-size-sm">Marketing</span>
|
||
</td>
|
||
<td>Austria</td>
|
||
<td>
|
||
<span class="legend-indicator bg-success"></span>Active
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html21" role="tabpanel" aria-labelledby="nav-htmlTab21">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-header-title">Users</h4>
|
||
</div>
|
||
|
||
<!-- Table -->
|
||
<div class="table-responsive">
|
||
<table class="table table-nowrap table-align-middle">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Position</th>
|
||
<th>Country</th>
|
||
<th>Status</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<a class="d-flex" href="../user-profile.html">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar avatar-circle">
|
||
<img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<span class="d-block h5 text-inherit mb-0">Amanda Harvey <i class="bi-patch-check-fill text-primary" data-bs-toggle="tooltip" data-placement="top" title="Top endorsed"></i></span>
|
||
<span class="d-block font-size-sm text-body">amanda@example.com</span>
|
||
</div>
|
||
</a>
|
||
</td>
|
||
<td>
|
||
<span class="d-block h5 mb-0">Director</span>
|
||
<span class="d-block font-size-sm">Human resources</span>
|
||
</td>
|
||
<td>United Kingdom</td>
|
||
<td>
|
||
<span class="legend-indicator bg-success"></span>Active
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<a class="d-flex" href="../user-profile.html">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar avatar-soft-primary avatar-circle">
|
||
<span class="avatar-initials">A</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<span class="d-block h5 text-inherit mb-0">Anne Richard</span>
|
||
<span class="d-block font-size-sm text-body">anne@example.com</span>
|
||
</div>
|
||
</a>
|
||
</td>
|
||
<td>
|
||
<span class="d-block h5 mb-0">Seller</span>
|
||
<span class="d-block font-size-sm">Branding products</span>
|
||
</td>
|
||
<td>United States</td>
|
||
<td>
|
||
<span class="legend-indicator bg-warning"></span>Pending
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<a class="d-flex" href="../user-profile.html">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar avatar-circle">
|
||
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<span class="d-block h5 text-inherit mb-0">David Harrison</span>
|
||
<span class="d-block font-size-sm text-body">david@example.com</span>
|
||
</div>
|
||
</a>
|
||
</td>
|
||
<td>
|
||
<span class="d-block h5 mb-0">Unknown</span>
|
||
<span class="d-block font-size-sm">Unknown</span>
|
||
</td>
|
||
<td>United States</td>
|
||
<td>
|
||
<span class="legend-indicator bg-success"></span>Active
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<a class="d-flex" href="../user-profile.html">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar avatar-circle">
|
||
<img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<span class="d-block h5 text-inherit mb-0">Finch Hoot</span>
|
||
<span class="d-block font-size-sm text-body">finch@example.com</span>
|
||
</div>
|
||
</a>
|
||
</td>
|
||
<td>
|
||
<span class="d-block h5 mb-0">Designer</span>
|
||
<span class="d-block font-size-sm">IT department</span>
|
||
</td>
|
||
<td>Argentina</td>
|
||
<td>
|
||
<span class="legend-indicator bg-danger"></span>Suspended
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<a class="d-flex" href="../user-profile.html">
|
||
<div class="flex-shrink-0">
|
||
<div class="avatar avatar-soft-dark avatar-circle">
|
||
<span class="avatar-initials">B</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<span class="d-block h5 text-inherit mb-0">Bob Dean</span>
|
||
<span class="d-block font-size-sm text-body">bob@example.com</span>
|
||
</div>
|
||
</a>
|
||
</td>
|
||
<td>
|
||
<span class="d-block h5 mb-0">Executive director</span>
|
||
<span class="d-block font-size-sm">Marketing</span>
|
||
</td>
|
||
<td>Austria</td>
|
||
<td>
|
||
<span class="legend-indicator bg-success"></span>Active
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="card-centered" class="hs-docs-heading">
|
||
Centered <a class="anchorjs-link" href="#card-centered" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code>.card-centered</code> to center align a <code>.card-body</code> content.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab22" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab22" href="#nav-result22" data-bs-toggle="pill" data-bs-target="#nav-result22" role="tab" aria-controls="nav-result22" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab22" href="#nav-html22" data-bs-toggle="pill" data-bs-target="#nav-html22" role="tab" aria-controls="nav-html22" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent22">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result22" role="tabpanel" aria-labelledby="nav-resultTab22">
|
||
<!-- Card -->
|
||
<a class="card card-centered" href="#" style="max-width: 20rem; height: 15rem;">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text text-body">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html22" role="tabpanel" aria-labelledby="nav-htmlTab22">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<a class="card card-center" href="#" style="height: 15rem;">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text text-body">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="card-body-height" class="hs-docs-heading">
|
||
Body height <a class="anchorjs-link" href="#card-body-height" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code>.card-body-height</code> to add a scrollable fixed content height.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab24" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab24" href="#nav-result24" data-bs-toggle="pill" data-bs-target="#nav-result24" role="tab" aria-controls="nav-result24" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab24" href="#nav-html24" data-bs-toggle="pill" data-bs-target="#nav-html24" role="tab" aria-controls="nav-html24" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent24">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result24" role="tabpanel" aria-labelledby="nav-resultTab24">
|
||
<!-- Card -->
|
||
<a class="card" href="#" style="max-width: 20rem;">
|
||
<div class="card-body card-body-height">
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html24" role="tabpanel" aria-labelledby="nav-htmlTab24">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<a class="card card-center" href="#">
|
||
<div class="card-body card-body-height">
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="card-cover-shadow" class="hs-docs-heading">
|
||
Cover shadow <a class="anchorjs-link" href="#card-cover-shadow" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code>.card-hover-shadow</code> to add a smooth animation with bolder shadow around a card.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab25" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab25" href="#nav-result25" data-bs-toggle="pill" data-bs-target="#nav-result25" role="tab" aria-controls="nav-result25" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab25" href="#nav-html25" data-bs-toggle="pill" data-bs-target="#nav-html25" role="tab" aria-controls="nav-html25" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent25">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result25" role="tabpanel" aria-labelledby="nav-resultTab25">
|
||
<!-- Card -->
|
||
<a class="card" href="#" style="max-width: 20rem;">
|
||
<div class="card-body card-hover-shadow">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html25" role="tabpanel" aria-labelledby="nav-htmlTab25">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<a class="card card-center" href="#">
|
||
<div class="card-body card-hover-shadow">
|
||
<h3 class="card-title">Card title</h3>
|
||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="project" class="hs-docs-heading">
|
||
Project <a class="anchorjs-link" href="#project" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Create beautiful project cards.</p>
|
||
<p>Use <code>.card-progress-wrap</code> to wrap a <code>progress</code> at the top of a card. Whereas <code>.card-progress</code> along with the <code>.progress</code> to set a smaller height to the <code>progress</code> than its default size.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab27" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab27" href="#nav-result27" data-bs-toggle="pill" data-bs-target="#nav-result27" role="tab" aria-controls="nav-result27" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab27" href="#nav-html27" data-bs-toggle="pill" data-bs-target="#nav-html27" role="tab" aria-controls="nav-html27" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent27">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result27" role="tabpanel" aria-labelledby="nav-resultTab27">
|
||
<!-- Card -->
|
||
<div class="card card-hover-shadow text-center h-100" style="max-width: 25rem;">
|
||
<div class="card-progress-wrap">
|
||
<!-- Progress -->
|
||
<div class="progress card-progress">
|
||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="25" aria-valuemax="100"></div>
|
||
</div>
|
||
<!-- End Progress -->
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="card-body">
|
||
<div class="row align-items-center text-start mb-4">
|
||
<div class="col">
|
||
<span class="badge bg-soft-secondary text-secondary p-2">To do</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<!-- Dropdown -->
|
||
<div class="dropdown">
|
||
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm card-dropdown-btn rounded-circle" id="projectsGridDropdown8" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<i class="bi-three-dots-vertical"></i>
|
||
</button>
|
||
|
||
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="projectsGridDropdown8">
|
||
<a class="dropdown-item" href="#">Rename project </a>
|
||
<a class="dropdown-item" href="#">Add to favorites</a>
|
||
<a class="dropdown-item" href="#">Archive project</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item text-danger" href="#">Delete</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Dropdown -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-center mb-2">
|
||
<!-- Avatar -->
|
||
<img class="avatar avatar-lg" src="../assets/svg/brands/google-webdev-icon.svg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<h2 class="mb-1">Webdev</h2>
|
||
|
||
<span class="fs-5">Updated 2 hours ago</span>
|
||
</div>
|
||
|
||
<small class="card-subtitle">Members</small>
|
||
|
||
<div class="d-flex justify-content-center">
|
||
<!-- Avatar Group -->
|
||
<div class="avatar-group avatar-group-sm avatar-circle card-avatar-group">
|
||
<a class="avatar" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Finch Hoot">
|
||
<img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
|
||
</a>
|
||
<a class="avatar avatar-soft-dark" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Bob Bardly">
|
||
<span class="avatar-initials">B</span>
|
||
</a>
|
||
<a class="avatar" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Clarice Boone">
|
||
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
||
</a>
|
||
<a class="avatar avatar-soft-dark" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Adam Keep">
|
||
<span class="avatar-initials">A</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Avatar Group -->
|
||
</div>
|
||
|
||
<a class="stretched-link" href="#"></a>
|
||
</div>
|
||
<!-- End Body -->
|
||
|
||
<!-- Footer -->
|
||
<div class="card-footer">
|
||
<!-- Stats -->
|
||
<div class="row col-divider">
|
||
<div class="col">
|
||
<span class="h4">19</span>
|
||
<span class="d-block fs-5">Tasks</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<span class="h4">33</span>
|
||
<span class="d-block fs-5">Completed</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<span class="h4">10</span>
|
||
<span class="d-block fs-5">Days left</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Stats -->
|
||
</div>
|
||
<!-- End Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html27" role="tabpanel" aria-labelledby="nav-htmlTab27">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card card-hover-shadow text-center h-100" style="max-width: 25rem;">
|
||
<div class="card-progress-wrap">
|
||
<!-- Progress -->
|
||
<div class="progress card-progress">
|
||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="25" aria-valuemax="100"></div>
|
||
</div>
|
||
<!-- End Progress -->
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="card-body">
|
||
<div class="row align-items-center text-start mb-4">
|
||
<div class="col">
|
||
<span class="badge bg-soft-secondary text-secondary p-2">To do</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<!-- Dropdown -->
|
||
<div class="dropdown">
|
||
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm card-dropdown-btn rounded-circle" id="projectsGridDropdown8" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<i class="bi-three-dots-vertical"></i>
|
||
</button>
|
||
|
||
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="projectsGridDropdown8">
|
||
<a class="dropdown-item" href="#">Rename project </a>
|
||
<a class="dropdown-item" href="#">Add to favorites</a>
|
||
<a class="dropdown-item" href="#">Archive project</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item text-danger" href="#">Delete</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Dropdown -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-center mb-2">
|
||
<!-- Avatar -->
|
||
<img class="avatar avatar-lg" src="../assets/svg/brands/google-webdev-icon.svg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<h2 class="mb-1">Webdev</h2>
|
||
|
||
<span class="fs-5">Updated 2 hours ago</span>
|
||
</div>
|
||
|
||
<small class="card-subtitle">Members</small>
|
||
|
||
<div class="d-flex justify-content-center">
|
||
<!-- Avatar Group -->
|
||
<div class="avatar-group avatar-group-sm avatar-circle card-avatar-group">
|
||
<a class="avatar" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Finch Hoot">
|
||
<img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
|
||
</a>
|
||
<a class="avatar avatar-soft-dark" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Bob Bardly">
|
||
<span class="avatar-initials">B</span>
|
||
</a>
|
||
<a class="avatar" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Clarice Boone">
|
||
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
||
</a>
|
||
<a class="avatar avatar-soft-dark" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Adam Keep">
|
||
<span class="avatar-initials">A</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Avatar Group -->
|
||
</div>
|
||
|
||
<a class="stretched-link" href="#"></a>
|
||
</div>
|
||
<!-- End Body -->
|
||
|
||
<!-- Footer -->
|
||
<div class="card-footer">
|
||
<!-- Stats -->
|
||
<div class="row col-divider">
|
||
<div class="col">
|
||
<span class="h4">19</span>
|
||
<span class="d-block fs-5">Tasks</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<span class="h4">33</span>
|
||
<span class="d-block fs-5">Completed</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<span class="h4">10</span>
|
||
<span class="d-block fs-5">Days left</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Stats -->
|
||
</div>
|
||
<!-- End Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="profile" class="hs-docs-heading">
|
||
Profile <a class="anchorjs-link" href="#profile" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Create beautiful profile cards.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab28" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab28" href="#nav-result28" data-bs-toggle="pill" data-bs-target="#nav-result28" role="tab" aria-controls="nav-result28" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab28" href="#nav-html28" data-bs-toggle="pill" data-bs-target="#nav-html28" role="tab" aria-controls="nav-html28" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent28">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result28" role="tabpanel" aria-labelledby="nav-resultTab28">
|
||
<!-- Card -->
|
||
<div class="card h-100" style="max-width: 25rem;">
|
||
<div class="card-pinned">
|
||
<div class="card-pinned-top-end">
|
||
<!-- Dropdown -->
|
||
<div class="dropdown">
|
||
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm rounded-circle" id="connectionsDropdown2" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<i class="bi-three-dots-vertical"></i>
|
||
</button>
|
||
|
||
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-end" aria-labelledby="connectionsDropdown2">
|
||
<a class="dropdown-item" href="#">Share connection</a>
|
||
<a class="dropdown-item" href="#">Block connection</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item text-danger" href="#">Delete</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Dropdown -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="card-body text-center">
|
||
<!-- Avatar -->
|
||
<div class="avatar avatar-xl avatar-circle avatar-centered mb-3">
|
||
<img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
||
<span class="avatar-status avatar-sm-status avatar-status-success"></span>
|
||
</div>
|
||
<!-- End Avatar -->
|
||
|
||
<h3 class="mb-1">
|
||
<a class="text-dark" href="#">Isabella Finley</a>
|
||
</h3>
|
||
|
||
<div class="mb-3">
|
||
<i class="bi-building me-1"></i>
|
||
<span>FrontApp</span>
|
||
</div>
|
||
|
||
<!-- Badges -->
|
||
<ul class="list-inline mb-0">
|
||
<li class="list-inline-item"><a class="badge bg-soft-secondary text-secondary p-2" href="#">Human resources</a></li>
|
||
<li class="list-inline-item"><a class="badge bg-soft-secondary text-secondary p-2" href="#">Support</a></li>
|
||
</ul>
|
||
<!-- End Badges -->
|
||
</div>
|
||
<!-- End Body -->
|
||
|
||
<!-- Footer -->
|
||
<div class="card-footer">
|
||
<div class="row justify-content-between align-items-center">
|
||
<div class="col-auto py-1">
|
||
<a class="fs-6 text-body" href="#">79 connections</a>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto py-1">
|
||
<!-- Form Check -->
|
||
<div class="form-check form-check-switch">
|
||
<input class="form-check-input" type="checkbox" value="" id="connectionsCheckbox2" checked>
|
||
<label class="form-check-label btn-sm" for="connectionsCheckbox2">
|
||
<span class="form-check-default">
|
||
<i class="bi-person-plus-fill"></i> Connect
|
||
</span>
|
||
<span class="form-check-active">
|
||
<i class="bi-check-lg me-2"></i> Connected
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<!-- End Form Check -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html28" role="tabpanel" aria-labelledby="nav-htmlTab28">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card h-100" style="max-width: 25rem;">
|
||
<div class="card-pinned">
|
||
<div class="card-pinned-top-end">
|
||
<!-- Dropdown -->
|
||
<div class="dropdown">
|
||
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm rounded-circle" id="connectionsDropdown2" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<i class="bi-three-dots-vertical"></i>
|
||
</button>
|
||
|
||
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-end" aria-labelledby="connectionsDropdown2">
|
||
<a class="dropdown-item" href="#">Share connection</a>
|
||
<a class="dropdown-item" href="#">Block connection</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item text-danger" href="#">Delete</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Dropdown -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="card-body text-center">
|
||
<!-- Avatar -->
|
||
<div class="avatar avatar-xl avatar-circle avatar-centered mb-3">
|
||
<img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
||
<span class="avatar-status avatar-sm-status avatar-status-success"></span>
|
||
</div>
|
||
<!-- End Avatar -->
|
||
|
||
<h3 class="mb-1">
|
||
<a class="text-dark" href="#">Isabella Finley</a>
|
||
</h3>
|
||
|
||
<div class="mb-3">
|
||
<i class="bi-building me-1"></i>
|
||
<span>FrontApp</span>
|
||
</div>
|
||
|
||
<!-- Badges -->
|
||
<ul class="list-inline mb-0">
|
||
<li class="list-inline-item"><a class="badge bg-soft-secondary text-secondary p-2" href="#">Human resources</a></li>
|
||
<li class="list-inline-item"><a class="badge bg-soft-secondary text-secondary p-2" href="#">Support</a></li>
|
||
</ul>
|
||
<!-- End Badges -->
|
||
</div>
|
||
<!-- End Body -->
|
||
|
||
<!-- Footer -->
|
||
<div class="card-footer">
|
||
<div class="row justify-content-between align-items-center">
|
||
<div class="col-auto py-1">
|
||
<a class="fs-6 text-body" href="#">79 connections</a>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto py-1">
|
||
<!-- Form Check -->
|
||
<div class="form-check form-check-switch">
|
||
<input class="form-check-input" type="checkbox" value="" id="connectionsCheckbox2" checked>
|
||
<label class="form-check-label btn-sm" for="connectionsCheckbox2">
|
||
<span class="form-check-default">
|
||
<i class="bi-person-plus-fill"></i> Connect
|
||
</span>
|
||
<span class="form-check-active">
|
||
<i class="bi-check-lg me-2"></i> Connected
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<!-- End Form Check -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="team" class="hs-docs-heading">
|
||
Team <a class="anchorjs-link" href="#team" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Create beautiful team cards with <code>list-group</code></p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab29" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab29" href="#nav-result29" data-bs-toggle="pill" data-bs-target="#nav-result29" role="tab" aria-controls="nav-result29" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab29" href="#nav-html29" data-bs-toggle="pill" data-bs-target="#nav-html29" role="tab" aria-controls="nav-html29" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent29">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result29" role="tabpanel" aria-labelledby="nav-resultTab29">
|
||
<!-- Card -->
|
||
<div class="card h-100" style="max-width: 25rem;">
|
||
<!-- Body -->
|
||
<div class="card-body pb-0">
|
||
<div class="row align-items-center mb-2">
|
||
<div class="col-9">
|
||
<h4 class="mb-1">
|
||
<a href="#">#digitalmarketing</a>
|
||
</h4>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-3 text-end">
|
||
<!-- Dropdown -->
|
||
<div class="dropdowm">
|
||
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm rounded-circle" id="teamsDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<i class="bi-three-dots-vertical"></i>
|
||
</button>
|
||
|
||
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-end" aria-labelledby="teamsDropdown1">
|
||
<a class="dropdown-item" href="#">Rename team</a>
|
||
<a class="dropdown-item" href="#">Add to favorites</a>
|
||
<a class="dropdown-item" href="#">Archive team</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item text-danger" href="#">Delete</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Dropdown -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<p>Our group promotes and sells products and services by leveraging online marketing tactics</p>
|
||
</div>
|
||
<!-- End Body -->
|
||
|
||
<!-- Footer -->
|
||
<div class="card-footer border-0 pt-0">
|
||
<div class="list-group list-group-flush list-group-no-gutters">
|
||
<!-- List Item -->
|
||
<div class="list-group-item">
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<span class="card-subtitle">Industry:</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<a class="badge bg-soft-primary text-primary p-2" href="#">Marketing team</a>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
</div>
|
||
<!-- End List Item -->
|
||
|
||
<!-- List Item -->
|
||
<div class="list-group-item">
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<span class="card-subtitle">Rated:</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<!-- Stars -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="14" data-hs-theme-appearance="default">
|
||
<img src="../assets/svg/illustrations-light/star-half.svg" alt="Review rating" width="14" data-hs-theme-appearance="dark">
|
||
</div>
|
||
<!-- End Stars -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
</div>
|
||
<!-- End List Item -->
|
||
|
||
<!-- List Item -->
|
||
<div class="list-group-item">
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<span class="card-subtitle">Members:</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<!-- Avatar Group -->
|
||
<div class="avatar-group avatar-group-xs avatar-circle">
|
||
<span class="avatar" data-toggle="tooltip" data-placement="top" title="Ella Lauda">
|
||
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
||
</span>
|
||
<span class="avatar" data-toggle="tooltip" data-placement="top" title="David Harrison">
|
||
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
||
</span>
|
||
<span class="avatar avatar-soft-dark" data-toggle="tooltip" data-placement="top" title="Antony Taylor">
|
||
<span class="avatar-initials">A</span>
|
||
</span>
|
||
<span class="avatar avatar-soft-info" data-toggle="tooltip" data-placement="top" title="Sara Iwens">
|
||
<span class="avatar-initials">S</span>
|
||
</span>
|
||
<span class="avatar" data-toggle="tooltip" data-placement="top" title="Finch Hoot">
|
||
<img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
|
||
</span>
|
||
<span class="avatar avatar-light avatar-circle" data-toggle="tooltip" data-placement="top" title="Sam Kart, Amanda Harvey and 1 more">
|
||
<span class="avatar-initials">+3</span>
|
||
</span>
|
||
</div>
|
||
<!-- End Avatar Group -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
</div>
|
||
<!-- End List Item -->
|
||
</div>
|
||
</div>
|
||
<!-- End Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html29" role="tabpanel" aria-labelledby="nav-htmlTab29">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card h-100" style="max-width: 25rem;">
|
||
<!-- Body -->
|
||
<div class="card-body pb-0">
|
||
<div class="row align-items-center mb-2">
|
||
<div class="col-9">
|
||
<h4 class="mb-1">
|
||
<a href="#">#digitalmarketing</a>
|
||
</h4>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-3 text-end">
|
||
<!-- Dropdown -->
|
||
<div class="dropdowm">
|
||
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm rounded-circle" id="teamsDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<i class="bi-three-dots-vertical"></i>
|
||
</button>
|
||
|
||
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-end" aria-labelledby="teamsDropdown1">
|
||
<a class="dropdown-item" href="#">Rename team</a>
|
||
<a class="dropdown-item" href="#">Add to favorites</a>
|
||
<a class="dropdown-item" href="#">Archive team</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item text-danger" href="#">Delete</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Dropdown -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<p>Our group promotes and sells products and services by leveraging online marketing tactics</p>
|
||
</div>
|
||
<!-- End Body -->
|
||
|
||
<!-- Footer -->
|
||
<div class="card-footer border-0 pt-0">
|
||
<div class="list-group list-group-flush list-group-no-gutters">
|
||
<!-- List Item -->
|
||
<div class="list-group-item">
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<span class="card-subtitle">Industry:</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<a class="badge bg-soft-primary text-primary p-2" href="#">Marketing team</a>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
</div>
|
||
<!-- End List Item -->
|
||
|
||
<!-- List Item -->
|
||
<div class="list-group-item">
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<span class="card-subtitle">Rated:</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<!-- Stars -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="14">
|
||
</div>
|
||
<!-- End Stars -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
</div>
|
||
<!-- End List Item -->
|
||
|
||
<!-- List Item -->
|
||
<div class="list-group-item">
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<span class="card-subtitle">Members:</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<!-- Avatar Group -->
|
||
<div class="avatar-group avatar-group-xs avatar-circle">
|
||
<span class="avatar" data-toggle="tooltip" data-placement="top" title="Ella Lauda">
|
||
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
||
</span>
|
||
<span class="avatar" data-toggle="tooltip" data-placement="top" title="David Harrison">
|
||
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
||
</span>
|
||
<span class="avatar avatar-soft-dark" data-toggle="tooltip" data-placement="top" title="Antony Taylor">
|
||
<span class="avatar-initials">A</span>
|
||
</span>
|
||
<span class="avatar avatar-soft-info" data-toggle="tooltip" data-placement="top" title="Sara Iwens">
|
||
<span class="avatar-initials">S</span>
|
||
</span>
|
||
<span class="avatar" data-toggle="tooltip" data-placement="top" title="Finch Hoot">
|
||
<img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
|
||
</span>
|
||
<span class="avatar avatar-light avatar-circle" data-toggle="tooltip" data-placement="top" title="Sam Kart, Amanda Harvey and 1 more">
|
||
<span class="avatar-initials">+3</span>
|
||
</span>
|
||
</div>
|
||
<!-- End Avatar Group -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
</div>
|
||
<!-- End List Item -->
|
||
</div>
|
||
</div>
|
||
<!-- End Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="fullscreen" class="hs-docs-heading">
|
||
Fullscreen <a class="anchorjs-link" href="#fullscreen" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use <code>.card-header-content-between</code> to align items in the corners.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab30" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab30" href="#nav-result30" data-bs-toggle="pill" data-bs-target="#nav-result30" role="tab" aria-controls="nav-result30" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab30" href="#nav-html30" data-bs-toggle="pill" data-bs-target="#nav-html30" role="tab" aria-controls="nav-html30" aria-selected="false">HTML</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab30" href="#nav-js30" data-bs-toggle="pill" data-bs-target="#nav-js30" role="tab" aria-controls="nav-js30" aria-selected="false">JS</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark card-alert" role="alert">
|
||
This example uses <span class="fw-semi-bold">Fullscreen</span> library.
|
||
</div>
|
||
<!-- End Alert -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent30">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result30" role="tabpanel" aria-labelledby="nav-resultTab30">
|
||
<!-- Card -->
|
||
<div id="cardFullScreenEg" class="card card-centered">
|
||
<div class="card-header card-header-content-between">
|
||
<h3 class="card-header-title">Fullscreen card</h3>
|
||
<a class="js-fullscreen-invoker btn btn-ghost-secondary btn-icon btn-sm btn-no-focus rounded-circle" href="javascript:;"
|
||
data-hs-fullscreen-options='{
|
||
"targetEl": "#cardFullScreenEg"
|
||
}'>
|
||
<i class="bi-fullscreen hs-fullscreen-icon-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Fullscreen"></i>
|
||
<i class="bi-fullscreen-exit hs-fullscreen-icon-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Exit Fullscreen"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="default">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations-light/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="dark">
|
||
<p>This is a fullscreen card body text.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html30" role="tabpanel" aria-labelledby="nav-htmlTab30">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div id="cardFullScreenEg" class="card card-centered">
|
||
<div class="card-header card-header-content-between">
|
||
<h3 class="card-header-title">Fullscreen card</h3>
|
||
<a class="js-fullscreen-invoker btn btn-ghost-secondary btn-icon btn-sm btn-no-focus rounded-circle" href="javascript:;"
|
||
data-hs-fullscreen-options='{
|
||
"targetEl": "#cardFullScreenEg"
|
||
}'>
|
||
<i class="bi-fullscreen hs-fullscreen-icon-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Fullscreen"></i>
|
||
<i class="bi-fullscreen-exit hs-fullscreen-icon-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Exit Fullscreen"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/oc-megaphone.svg" alt="Image Description">
|
||
<p>This is a fullscreen card body text.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js30" role="tabpanel" aria-labelledby="nav-jsTab30">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- JS Implementing Plugins -->
|
||
<!-- bundlejs:vendor [..] -->
|
||
<script src="../assets/vendor/hs-fullscreen/dist/hs-fullscreen.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF FULLSCREEN
|
||
// =======================================================
|
||
new HSFullscreen('.js-fullscreen-invoker')
|
||
})()
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="fullscreen-methods" class="hs-docs-heading">
|
||
Fullscreen methods <a class="anchorjs-link" href="#fullscreen-methods" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Table -->
|
||
<div class="table-responsive">
|
||
<table class="table table-thead-bordered card-table">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th>Parameters</th>
|
||
<th style="width: 50%;">Description</th>
|
||
<th class="text-nowrap">Default value</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<code>targetEl</code>
|
||
</td>
|
||
<td>Element which will be fullscreen</td>
|
||
<td>
|
||
<code>null</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>preventScrollClassName</code>
|
||
</td>
|
||
<td>Disable scroll</td>
|
||
<td>
|
||
<code>.hs-fullscreen-on</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>toggleClassName</code>
|
||
</td>
|
||
<td>Class for target element</td>
|
||
<td>
|
||
<code>.hs-fullscreen</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>mainContainerSelector</code>
|
||
</td>
|
||
<td>Element for <code>preventScrollClassName</code></td>
|
||
<td>
|
||
<code>body</code>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="loading-state" class="hs-docs-heading">
|
||
Loading state <a class="anchorjs-link" href="#loading-state" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use Front's <code>hs-loading-state.js</code> plugin to show the loading state in your projects.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab31" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab31" href="#nav-result31" data-bs-toggle="pill" data-bs-target="#nav-result31" role="tab" aria-controls="nav-result31" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab31" href="#nav-html31" data-bs-toggle="pill" data-bs-target="#nav-html31" role="tab" aria-controls="nav-html31" aria-selected="false">HTML</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab31" href="#nav-js31" data-bs-toggle="pill" data-bs-target="#nav-js31" role="tab" aria-controls="nav-js31" aria-selected="false">JS</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark card-alert" role="alert">
|
||
This example uses <span class="fw-semi-bold">Loading state</span> library.
|
||
</div>
|
||
<!-- End Alert -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent31">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result31" role="tabpanel" aria-labelledby="nav-resultTab31">
|
||
<!-- Card -->
|
||
<div id="cardLoadingEg" class="card card-centered">
|
||
<div class="card-header card-header-content-between">
|
||
<h3 class="card-header-title">Loading state card</h3>
|
||
<a class="js-loading-state-invoker btn btn-ghost-secondary btn-icon btn-sm btn-no-focus rounded-circle" href="javascript:;"
|
||
data-hs-loading-state-options='{
|
||
"targetEl": "#cardLoadingEg",
|
||
"loaderMode": "with-text",
|
||
"loaderExtendedClassNames": "text-dark"
|
||
}'>
|
||
<i class="bi-arrow-clockwise" data-bs-toggle="tooltip" data-bs-placement="top" title="Reload"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="default">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations-light/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="dark">
|
||
<p>This is a loading state card body text.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html31" role="tabpanel" aria-labelledby="nav-htmlTab31">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div id="cardLoadingEg" class="card card-centered">
|
||
<div class="card-header card-header-content-between">
|
||
<h3 class="card-header-title">Loading state card</h3>
|
||
<a class="js-loading-state-invoker btn btn-ghost-secondary btn-icon btn-sm btn-no-focus rounded-circle" href="javascript:;"
|
||
data-hs-loading-state-options='{
|
||
"targetEl": "#cardLoadingEg",
|
||
"loaderMode": "with-text",
|
||
"loaderExtendedClassNames": "text-dark"
|
||
}'>
|
||
<i class="bi-arrow-clockwise" data-bs-toggle="tooltip" data-bs-placement="top" title="Reload"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/oc-megaphone.svg" alt="Image Description">
|
||
<p>This is a fullscreen card body text.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js31" role="tabpanel" aria-labelledby="nav-jsTab31">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- JS Implementing Plugins -->
|
||
<!-- bundlejs:vendor [..] -->
|
||
<script src="../assets/vendor/hs-loading-state/dist/hs-loading-state.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF LOADING STATE
|
||
// =======================================================
|
||
new HSLoadingState('.js-loading-state-invoker')
|
||
})()
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<p>Tabbable example:</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab32" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab32" href="#nav-result32" data-bs-toggle="pill" data-bs-target="#nav-result32" role="tab" aria-controls="nav-result32" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab32" href="#nav-html32" data-bs-toggle="pill" data-bs-target="#nav-html32" role="tab" aria-controls="nav-html32" aria-selected="false">HTML</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab32" href="#nav-js32" data-bs-toggle="pill" data-bs-target="#nav-js32" role="tab" aria-controls="nav-js32" aria-selected="false">JS</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark card-alert" role="alert">
|
||
This example uses <span class="fw-semi-bold">Loading state</span> library.
|
||
</div>
|
||
<!-- End Alert -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent32">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result32" role="tabpanel" aria-labelledby="nav-resultTab32">
|
||
<!-- Card -->
|
||
<div class="card card-centered">
|
||
<div class="card-header card-header-content-between">
|
||
<h3 class="card-header-title">Loading state card</h3>
|
||
|
||
<!-- Nav -->
|
||
<div class="text-center">
|
||
<ul class="nav nav-segment" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="js-loading-state-invoker nav-link active" id="nav-one-eg1-tab" data-bs-toggle="pill" href="#nav-one-eg1" role="tab" aria-controls="nav-one-eg1" aria-selected="true"
|
||
data-hs-loading-state-options='{
|
||
"targetEl": "#nav-one-eg1"
|
||
}'>Tab One</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="js-loading-state-invoker nav-link" id="nav-two-eg1-tab" data-bs-toggle="pill" href="#nav-two-eg1" role="tab" aria-controls="nav-two-eg1" aria-selected="false"
|
||
data-hs-loading-state-options='{
|
||
"targetEl": "#nav-two-eg1"
|
||
}'>Tab two</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Nav -->
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<!-- Tab Content -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane fade show active" id="nav-one-eg1" role="tabpanel" aria-labelledby="nav-one-eg1-tab">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="default">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations-light/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="dark">
|
||
<p>Tab one</p>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-two-eg1" role="tabpanel" aria-labelledby="nav-two-eg1-tab">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="default">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations-light/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="dark">
|
||
<p>Tab two</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html32" role="tabpanel" aria-labelledby="nav-htmlTab32">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div class="card card-centered">
|
||
<div class="card-header card-header-content-between">
|
||
<h3 class="card-header-title">Loading state card</h3>
|
||
|
||
<!-- Nav -->
|
||
<div class="text-center">
|
||
<ul class="nav nav-segment" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="js-loading-state-invoker nav-link active" id="nav-one-eg1-tab" data-bs-toggle="pill" href="#nav-one-eg1" role="tab" aria-controls="nav-one-eg1" aria-selected="true"
|
||
data-hs-loading-state-options='{
|
||
"targetEl": "#nav-one-eg1"
|
||
}'>Tab One</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="js-loading-state-invoker nav-link" id="nav-two-eg1-tab" data-bs-toggle="pill" href="#nav-two-eg1" role="tab" aria-controls="nav-two-eg1" aria-selected="false"
|
||
data-hs-loading-state-options='{
|
||
"targetEl": "#nav-two-eg1"
|
||
}'>Tab two</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Nav -->
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<!-- Tab Content -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane fade show active" id="nav-one-eg1" role="tabpanel" aria-labelledby="nav-one-eg1-tab">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/oc-megaphone.svg" alt="Image Description">
|
||
<p>Tab one</p>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-two-eg1" role="tabpanel" aria-labelledby="nav-two-eg1-tab">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/oc-megaphone.svg" alt="Image Description">
|
||
<p>Tab two</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js32" role="tabpanel" aria-labelledby="nav-jsTab32">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- JS Implementing Plugins -->
|
||
<!-- bundlejs:vendor [..] -->
|
||
<script src="../assets/vendor/hs-loading-state/dist/hs-loading-state.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF LOADING STATE
|
||
// =======================================================
|
||
new HSLoadingState('.js-loading-state-invoker')
|
||
})()
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="loading-state-methods" class="hs-docs-heading">
|
||
Loading state methods <a class="anchorjs-link" href="#loading-state-methods" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Table -->
|
||
<div class="table-responsive">
|
||
<table class="table table-thead-bordered card-table">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th>Parameters</th>
|
||
<th style="width: 50%;">Description</th>
|
||
<th class="text-nowrap">Default value</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<code>targetEl</code>
|
||
</td>
|
||
<td>Сontainer inside which will be loading</td>
|
||
<td>
|
||
<code>null</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>targetElStyles</code>
|
||
</td>
|
||
<td>Optional styles for target el container</td>
|
||
<td>
|
||
<code>{ position: '' }</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>eventType</code>
|
||
</td>
|
||
<td>Set trigger event<br>
|
||
Available options:
|
||
<ul>
|
||
<li><code>click</code></li>
|
||
<li><code>mouseenter</code></li>
|
||
</ul>
|
||
</td>
|
||
<td>
|
||
<code>click</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>loaderMode</code>
|
||
</td>
|
||
<td>
|
||
Available options:
|
||
<ul>
|
||
<li><code>simple</code></li>
|
||
<li><code>with-text</code></li>
|
||
</ul>
|
||
</td>
|
||
<td>
|
||
<code>simple</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>loaderText</code>
|
||
</td>
|
||
<td>Appears a text you enter if set to <code>with-text</code></td>
|
||
<td>
|
||
<code>Loading...</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>removeLoaderDelay</code>
|
||
</td>
|
||
<td>Delay for hide overlay</td>
|
||
<td>
|
||
<code>1500</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>loaderContainerClassNames</code>
|
||
</td>
|
||
<td>Classes for container</td>
|
||
<td>
|
||
<code>hs-loader-wrapper</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>loaderContainerExtendedClassNames</code>
|
||
</td>
|
||
<td>Optional classes for container</td>
|
||
<td>
|
||
<code>null</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>loaderClassNames</code>
|
||
</td>
|
||
<td>Classes for wrapper on simple mode</td>
|
||
<td>
|
||
<code>hs-loader</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>loaderExtendedClassNames</code>
|
||
</td>
|
||
<td>Optional classes for wrapper on simple mode</td>
|
||
<td>
|
||
<code>null</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>loaderWithTextClassNames</code>
|
||
</td>
|
||
<td>Classes for wrapper on <code>with-text</code> mode</td>
|
||
<td>
|
||
<code>hs-loader-with-text</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>loaderIconClassNames</code>
|
||
</td>
|
||
<td>Classes for loader icon</td>
|
||
<td>
|
||
<code>.spinner-border .spinner-border-sm .text-primary</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>loaderIconExtendedClassNames</code>
|
||
</td>
|
||
<td>Optional classes for loader icon</td>
|
||
<td>
|
||
<code>null</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>loaderTextClassNames</code>
|
||
</td>
|
||
<td>Classes for loader text (<code>with-text</code> mode)</td>
|
||
<td>
|
||
<code>hs-loader-text</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>loaderTextExtendedClassNames</code>
|
||
</td>
|
||
<td>Optional classes for loader text (<code>with-text</code> mode)</td>
|
||
<td>
|
||
<code>null</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>beforeLoading</code>
|
||
</td>
|
||
<td>Callback function</td>
|
||
<td>
|
||
<code>null</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>afterLoading</code>
|
||
</td>
|
||
<td>Callback function</td>
|
||
<td>
|
||
<code>null</code>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="remove-element" class="hs-docs-heading">
|
||
Remove element <a class="anchorjs-link" href="#remove-element" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Use Front's <code>hs-remove-element.js</code> plugin to add delete elements.</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab33" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab33" href="#nav-result33" data-bs-toggle="pill" data-bs-target="#nav-result33" role="tab" aria-controls="nav-result33" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab33" href="#nav-html33" data-bs-toggle="pill" data-bs-target="#nav-html33" role="tab" aria-controls="nav-html33" aria-selected="false">HTML</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab33" href="#nav-js33" data-bs-toggle="pill" data-bs-target="#nav-js33" role="tab" aria-controls="nav-js33" aria-selected="false">JS</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark card-alert" role="alert">
|
||
This example uses <span class="fw-semi-bold">Remove element</span> library.
|
||
</div>
|
||
<!-- End Alert -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent33">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result33" role="tabpanel" aria-labelledby="nav-resultTab33">
|
||
<!-- Card -->
|
||
<div id="removableCardEg" class="card card-centered">
|
||
<div class="card-header card-header-content-between">
|
||
<h3 class="card-header-title">Remove element card</h3>
|
||
<a class="js-remove-element-invoker btn btn-ghost-secondary btn-icon btn-sm btn-no-focus rounded-circle" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove"
|
||
data-hs-remove-element-options='{
|
||
"targetEl": "#removableCardEg"
|
||
}'>
|
||
<i class="bi-x-lg"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="default">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations-light/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="dark">
|
||
<p>This is a remove element card body text.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html33" role="tabpanel" aria-labelledby="nav-htmlTab33">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card -->
|
||
<div id="removableCardEg" class="card card-centered">
|
||
<div class="card-header card-header-content-between">
|
||
<h3 class="card-header-title">Remove element card</h3>
|
||
<a class="js-remove-element-invoker btn btn-ghost-secondary btn-icon btn-sm btn-no-focus rounded-circle" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove"
|
||
data-hs-remove-element-options='{
|
||
"targetEl": "#removableCardEg"
|
||
}'>
|
||
<i class="bi-x-lg"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<img class="avatar avatar-xxl mb-3" src="../assets/svg/illustrations/oc-megaphone.svg" alt="Image Description">
|
||
<p>This is a remove element card body text.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js33" role="tabpanel" aria-labelledby="nav-jsTab33">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- JS Implementing Plugins -->
|
||
<!-- bundlejs:vendor [..] -->
|
||
<script src="../assets/vendor/hs-remove-element/dist/hs-remove-element.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF REMOVE ELEMENT
|
||
// =======================================================
|
||
document.querySelectorAll('.js-remove-element-invoker').forEach(item => {
|
||
new HSRemoveElement(item).init()
|
||
})
|
||
})()
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="remove-element-methods" class="hs-docs-heading">
|
||
Remove element methods <a class="anchorjs-link" href="#remove-element-methods" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Table -->
|
||
<div class="table-responsive">
|
||
<table class="table table-thead-bordered card-table">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th>Parameters</th>
|
||
<th style="width: 50%;">Description</th>
|
||
<th class="text-nowrap">Default value</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<code>targetEl</code>
|
||
</td>
|
||
<td>Element which will be deleted</td>
|
||
<td>
|
||
<code>null</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>beforeDelete</code>
|
||
</td>
|
||
<td>Callback function</td>
|
||
<td>
|
||
<code>null</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code>afterDelete</code>
|
||
</td>
|
||
<td>Callback function</td>
|
||
<td>
|
||
<code>null</code>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="other-classes-to-note" class="hs-docs-heading">
|
||
Other classes to note <a class="anchorjs-link" href="#other-classes-to-note" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Table -->
|
||
<div class="table-responsive">
|
||
<table class="table table-thead-bordered card-table">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th style="width: 40%;">Class</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td><code>.card-dropdown-filter-centered</code></td>
|
||
<td>Used to fix the sizing and positioning of the "Filter" dropdown card in the <a href="../users.html">Users</a> page on smaller devices.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td><code>.card-avatar-group</code></td>
|
||
<td>Fixes z-index issue where in card used a <code>.stretched-link</code> class.<br>Example: Cards with three dots icon on top right corner of a card in <a href="../user-profile-projects.html">User Profile Projects</a>.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td><code>.card-dropdown-btn</code></td>
|
||
<td>Fixes z-index issue where in card used a <code>.stretched-link</code> class.<br>Example: Cards with "More" button on top right corner of a card in <a href="../apps-file-manager.html">Apps file manager</a>.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td><code>.card-nav-vertical</code></td>
|
||
<td>Can be used to make sizing smaller and to change <code>flex-direction: row;</code> to <code>column</code> in a card where <code>.nav</code> component is utilized.<br>Example: "Teams" section in <a href="../user-profile.html">User profile</a>.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td><code>.card-navbar-nav</code></td>
|
||
<td>Sets width of the card to <code>100%</code> and adds extra <code>padding-top</code> and <code>padding-bottom</code> spaces.<br>Example: Left side navigation panel in <a href="../account-settings.html">Account settings</a>.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Content -->
|
||
</main>
|
||
<!-- ========== END MAIN CONTENT ========== -->
|
||
|
||
|
||
<!-- ========== SECONDARY CONTENTS ========== -->
|
||
<!-- Go To -->
|
||
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
||
data-hs-go-to-options='{
|
||
"offsetTop": 700,
|
||
"position": {
|
||
"init": {
|
||
"right": "2rem"
|
||
},
|
||
"show": {
|
||
"bottom": "2rem"
|
||
},
|
||
"hide": {
|
||
"bottom": "-2rem"
|
||
}
|
||
}
|
||
}'>
|
||
<i class="bi-chevron-up"></i>
|
||
</a>
|
||
<!-- ========== END SECONDARY CONTENTS ========== -->
|
||
|
||
<!-- JS Global Compulsory hs-builder:build-delete -->
|
||
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<!-- bundlejs:vendor [..] -->
|
||
<script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
||
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
||
<script src="../node_modules/list.js/dist/list.min.js"></script>
|
||
<script src="../assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
||
<script src="../assets/vendor/prism/prism.js"></script>
|
||
<script src="../assets/vendor/hs-fullscreen/dist/hs-fullscreen.min.js"></script>
|
||
<script src="../assets/vendor/hs-loading-state/dist/hs-loading-state.min.js"></script>
|
||
<script src="../assets/vendor/hs-remove-element/dist/hs-remove-element.min.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<!-- bundlejs:theme [..] -->
|
||
<script src="../assets/js/hs.core.js"></script>
|
||
<script src="../assets/js/hs.list.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF HEADER
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
|
||
|
||
// INITIALIZATION OF NAV SCROLLER
|
||
// =======================================================
|
||
new HsNavScroller('.js-nav-scroller', {
|
||
delay: 400,
|
||
offset: 140
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF LISTJS COMPONENT
|
||
// =======================================================
|
||
HSCore.components.HSList.init('#docsSearch');
|
||
const docsSearch = HSCore.components.HSList.getItem('docsSearch');
|
||
|
||
|
||
// GET JSON FILE RESULTS
|
||
// =======================================================
|
||
fetch('../assets/json/docs-search.json')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
docsSearch.add(data)
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF GO TO
|
||
// =======================================================
|
||
new HSGoTo('.js-go-to')
|
||
|
||
|
||
// INITIALIZATION OF FULLSCREEN
|
||
// =======================================================
|
||
new HSFullscreen('.js-fullscreen-invoker')
|
||
|
||
|
||
// INITIALIZATION OF LOADING STATE
|
||
// =======================================================
|
||
new HSLoadingState('.js-loading-state-invoker')
|
||
|
||
|
||
// INITIALIZATION OF REMOVE ELEMENT
|
||
// =======================================================
|
||
new HSRemoveElement('.js-remove-element-invoker')
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|