763 lines
34 KiB
HTML
763 lines
34 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>Introduction - Snippets | Front - Multipurpose Responsive Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="@@autopath/favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="@@vars.themeFont" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<!-- bundlecss:vendor [@@autopath] -->
|
|
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<!-- bundlecss:theme [@@autopath] @@vars.version -->
|
|
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
|
|
<link rel="stylesheet" href="@@autopath/assets/css/snippets.css">
|
|
</head>
|
|
|
|
<body class="navbar-sidebar-aside-lg">
|
|
<!-- ========== HEADER ========== -->
|
|
@@include("@@autopath/partials/docs/snippets-navbar.html")
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main">
|
|
<!-- Navbar -->
|
|
@@include("@@autopath/partials/docs/snippets-sidebar.html", {
|
|
"category": "",
|
|
"link": "index.html"
|
|
})
|
|
<!-- End Navbar -->
|
|
|
|
<!-- Content -->
|
|
<div class="navbar-sidebar-aside-content content-space-t-3 content-space-b-2 px-lg-5 px-xl-10">
|
|
<div class="row justify-content-md-between align-items-md-center mb-10">
|
|
<div class="col-md-6 col-xl-5">
|
|
<div class="mb-4">
|
|
<h1 class="display-5 mb-3">Sleek <span class="text-primary text-highlight-warning">components</span> to execute any idea.</h1>
|
|
<p class="lead">Snippets is a collection of elements and combined components that you will find on demo pages.</p>
|
|
</div>
|
|
|
|
<span class="badge bg-soft-dark text-dark rounded-pill ps-3 pe-1 me-1 mb-2">Navbars <span class="d-inline-block bg-soft-dark p-2 rounded-pill ms-1" style="min-width: 2rem;">24</span></span>
|
|
<span class="badge bg-soft-dark text-dark rounded-pill ps-3 pe-1 me-1 mb-2">Hero Sections <span class="d-inline-block bg-soft-dark p-2 rounded-pill ms-1" style="min-width: 2rem;">36</span></span>
|
|
<span class="badge bg-soft-dark text-dark rounded-pill ps-3 pe-1 me-1 mb-2">Content <span class="d-inline-block bg-soft-dark p-2 rounded-pill ms-1" style="min-width: 2rem;">175+</span></span>
|
|
<span class="badge bg-soft-dark text-dark rounded-pill ps-3 pe-1 me-1 mb-2">Forms <span class="d-inline-block bg-soft-dark p-2 rounded-pill ms-1" style="min-width: 2rem;">39</span></span>
|
|
<span class="badge bg-soft-dark text-dark rounded-pill ps-3 pe-1 me-1 mb-2">Footer <span class="d-inline-block bg-soft-dark p-2 rounded-pill ms-1" style="min-width: 2rem;">15</span></span>
|
|
<span class="badge bg-soft-dark text-dark rounded-pill ps-3 pe-1 me-1 mb-2">Contact Sections <span class="d-inline-block bg-soft-dark p-2 rounded-pill ms-1" style="min-width: 2rem;">5</span></span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-6 col-xl-6">
|
|
<img class="img-fluid" src="@@autopath/assets/svg/illustrations/oc-building-apps.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-3 mb-5 mb-sm-0">
|
|
<h4>Navbar/Hero Sections</h4>
|
|
</div>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="row row-cols-sm-2 row-cols-md-3">
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/navbar.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-navbar.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Headers (Navbar)</h5>
|
|
<p class="card-text small text-body">26 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/hero-sections.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-hero-sections.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Hero Sections</h5>
|
|
<p class="card-text small text-body">34 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<hr class="mb-5">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-3 mb-5 mb-sm-0">
|
|
<h4>Content</h4>
|
|
</div>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="row row-cols-sm-2 row-cols-md-3">
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/features-general.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-features-general.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Features General</h5>
|
|
<p class="card-text small text-body">10 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/features-stats.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-features-stats.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Features Stats</h5>
|
|
<p class="card-text small text-body">6 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/features-step.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-features-step.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Features Step</h5>
|
|
<p class="card-text small text-body">3 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/features-navs.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-features-navs.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Features Navs (Tabs)</h5>
|
|
<p class="card-text small text-body">3 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/icon-blocks.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-icon-blocks.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Icon Blocks</h5>
|
|
<p class="card-text small text-body">11 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/cards-grid.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-cards-grid.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Cards (Grid)</h5>
|
|
<p class="card-text small text-body">22 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/cards-list.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-cards-list.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Cards (List)</h5>
|
|
<p class="card-text small text-body">2 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/directory-grid.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-directory-grid.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Directory (Grid)</h5>
|
|
<p class="card-text small text-body">10 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/directory-list.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-directory-list.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Directory (List)</h5>
|
|
<p class="card-text small text-body">6 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/testimonials.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-testimonials.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Testimonials</h5>
|
|
<p class="card-text small text-body">13 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/blogs-grid.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-blogs-grid.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Blogs (Grid)</h5>
|
|
<p class="card-text small text-body">4 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/blogs-list.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-blogs-list.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Blogs (List)</h5>
|
|
<p class="card-text small text-body">3 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/tables.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-tables.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Tables</h5>
|
|
<p class="card-text small text-body">1 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/ecommerce.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-ecommerce.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">E-commerce</h5>
|
|
<p class="card-text small text-body">4 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/pricing.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-pricing.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Pricing</h5>
|
|
<p class="card-text small text-body">7 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/team-sections.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-team-sections.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Team Sections</h5>
|
|
<p class="card-text small text-body">2 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/breadcrumb.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-breadcrumb.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Breadcrumb</h5>
|
|
<p class="card-text small text-body">3 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/cta.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-cta.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Call-to-Action (CTA)</h5>
|
|
<p class="card-text small text-body">6 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/modals.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-modals.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Modals</h5>
|
|
<p class="card-text small text-body">2 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/portfolio.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-portfolio.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Portfolio</h5>
|
|
<p class="card-text small text-body">25 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/gallery.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-gallery.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Gallery</h5>
|
|
<p class="card-text small text-body">5 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/clients.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-clients.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Clients</h5>
|
|
<p class="card-text small text-body">6 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/countdown.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-countdown.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Countdown</h5>
|
|
<p class="card-text small text-body">1 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/faq.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-faq.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">FAQ</h5>
|
|
<p class="card-text small text-body">3 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/lists.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-lists.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Lists</h5>
|
|
<p class="card-text small text-body">2 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/collapse-accordion.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-collapse-accordion.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Collapse/Accordion</h5>
|
|
<p class="card-text small text-body">1 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/comments.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-comments.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Comments</h5>
|
|
<p class="card-text small text-body">2 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/feedback-and-reviews.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-feedback-and-reviews.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Feedback & Reviews</h5>
|
|
<p class="card-text small text-body">2 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/user-profile.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-user-profile.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">User Profile</h5>
|
|
<p class="card-text small text-body">6 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/sidebar-examples.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-sidebar-examples.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Sidebar Examples</h5>
|
|
<p class="card-text small text-body">7 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/calendar-view.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-calendar-view.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Calendar View</h5>
|
|
<p class="card-text small text-body">1 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/notification.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-notification.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Notification</h5>
|
|
<p class="card-text small text-body">1 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/content-sections.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-content-sections.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Content Sections</h5>
|
|
<p class="card-text small text-body">20 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<hr class="mb-5">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-3 mb-5 mb-sm-0">
|
|
<h4>Forms</h4>
|
|
</div>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="row row-cols-sm-2 row-cols-md-3">
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/forms-authentication.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-forms-authentication.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Authentication</h5>
|
|
<p class="card-text small text-body">5 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/forms-feedback.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-forms-feedback.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Feedback</h5>
|
|
<p class="card-text small text-body">4 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/forms-filters.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-forms-filters.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Filters</h5>
|
|
<p class="card-text small text-body">9 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/forms-search.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-forms-search.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Search</h5>
|
|
<p class="card-text small text-body">3 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/forms-directory.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-forms-directory.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Directory</h5>
|
|
<p class="card-text small text-body">3 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/forms-subscribe.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-forms-subscribe.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Subscribe</h5>
|
|
<p class="card-text small text-body">2 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/forms-account.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-forms-account.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Account</h5>
|
|
<p class="card-text small text-body">11 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/forms-wizard-and-steps.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-forms-wizard-and-steps.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Wizard & Steps</h5>
|
|
<p class="card-text small text-body">2 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<hr class="mb-5">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-3 mb-5 mb-sm-0">
|
|
<h4>Contact/Footer</h4>
|
|
</div>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="row row-cols-sm-2 row-cols-md-3">
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/contact-sections.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-contact-sections.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Contact Sections</h5>
|
|
<p class="card-text small text-body">5 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-transition h-100" href="@@autopath/snippets/footer.html" data-aos="fade-up">
|
|
<img class="card-img p-2" src="@@autopath/assets/svg/design-system/snippets-footer.svg" alt="Image Description">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-inherit">Footer</h5>
|
|
<p class="card-text small text-body">15 components</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Go To -->
|
|
@@include("@@autopath/partials/layouts-components/go-to.html")
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
<!-- JS Global Compulsory @@deleteLine:build -->
|
|
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<!-- bundlejs:vendor [@@autopath] -->
|
|
<script src="@@autopath/assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
|
<script src="@@autopath/node_modules/list.js/dist/list.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/prism/prism.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<!-- bundlejs:theme [@@autopath] -->
|
|
<script src="@@autopath/assets/js/hs.core.js"></script>
|
|
<script src="@@autopath/assets/js/hs.list.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF HEADER
|
|
// =======================================================
|
|
new HSHeader('#header').init()
|
|
|
|
|
|
// INITIALIZATION OF LISTJS COMPONENT
|
|
// =======================================================
|
|
HSCore.components.HSList.init('#snippetsSearch')
|
|
const snippetsSearch = HSCore.components.HSList.getItem('snippetsSearch')
|
|
|
|
|
|
// GET JSON FILE RESULTS
|
|
// =======================================================
|
|
fetch('@@autopath/assets/json/snippets-search.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
snippetsSearch.add(data)
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|