Files
front/dist/snippets/lists.html
2021-12-28 13:34:18 +01:00

1054 lines
50 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>Lists - Snippets | 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 -->
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
<!-- CSS Front Template -->
<link rel="stylesheet" href="../assets/css/theme.min.css">
<link rel="stylesheet" href="../assets/css/snippets.min.css">
</head>
<body class="navbar-sidebar-aside-lg">
<!-- ========== HEADER ========== -->
<header id="header" class="navbar navbar-expand navbar-fixed 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="../snippets/index.html" aria-label="Space">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<a href="../documentation/changelog.html">
<span class="badge bg-soft-primary text-primary">v4.1</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="snippetsSearch" 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 snippets" aria-label="Search in snippets">
<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 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" style="width: 10rem;">
<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 -->
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" 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="h6 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>
<!-- 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="../snippets/index.html" aria-label="Space">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<a class="navbar-brand-badge" href="../documentation/changelog.html">
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
</a>
</div>
<!-- End Default Logo -->
<!-- Nav -->
<ul class="nav nav-segment nav-fill nav-justified">
<li class="nav-item">
<a class="nav-link" href="../documentation/index.html">Docs</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="../snippets/index.html">Snippets</a>
</li>
</ul>
<!-- End Nav -->
</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">Snippets</span>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/index.html">Introduction</a>
</li>
<li class="nav-item my-2 my-lg-5"></li>
<li class="nav-item">
<span class="nav-subtitle">Navbar / Heroes</span>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/navbar.html">Headers (Navbar)</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/hero-sections.html">Hero Sections</a>
</li>
<li class="nav-item my-2 my-lg-5"></li>
<li class="nav-item">
<span class="nav-subtitle">Content</span>
</li>
<li class="nav-item ">
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavFeaturesCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavFeaturesCollapse">Features</a>
<div id="snippetsSidebarNavFeaturesCollapse" class="nav-collapse collapse ">
<a class="nav-link " href="features-general.html">General</a>
<a class="nav-link " href="features-stats.html">Stats</a>
<a class="nav-link " href="features-step.html">Step</a>
<a class="nav-link " href="features-navs.html">Navs (Tabs)</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/icon-blocks.html">Icon Blocks</a>
</li>
<li class="nav-item ">
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavCardsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavCardsCollapse">Cards</a>
<div id="snippetsSidebarNavCardsCollapse" class="nav-collapse collapse ">
<a class="nav-link " href="cards-grid.html">Grid</a>
<a class="nav-link " href="cards-list.html">List</a>
</div>
</li>
<li class="nav-item ">
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavDirectoryCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavDirectoryCollapse">Directory</a>
<div id="snippetsSidebarNavDirectoryCollapse" class="nav-collapse collapse ">
<a class="nav-link " href="directory-grid.html">Grid</a>
<a class="nav-link " href="directory-list.html">List</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/testimonials.html">Testimonials</a>
</li>
<li class="nav-item ">
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavBlogsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavBlogsCollapse">Blogs</a>
<div id="snippetsSidebarNavBlogsCollapse" class="nav-collapse collapse ">
<a class="nav-link " href="blogs-grid.html">Grid</a>
<a class="nav-link " href="blogs-list.html">List</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/tables.html">Tables</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/ecommerce.html">E-commerce</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/pricing.html">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/team-sections.html">Team Sections</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/breadcrumb.html">Breadcrumb</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/cta.html">Call-to-Action (CTA)</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/modals.html">Modals</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/clients.html">Clients</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/countdown.html">Countdown</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/faq.html">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="../snippets/lists.html">Lists</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/collapse-accordion.html">Collapse/Accordion</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/comments.html">Comments</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/feedback-and-reviews.html">Feedback &amp; Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/user-profile.html">User Profile</a>
</li>
<li class="nav-item">
<a class="nav-link " href="sidebar-examples.html">Sidebar Examples</a>
</li>
<li class="nav-item">
<a class="nav-link " href="calendar-view.html">Calendar View</a>
</li>
<li class="nav-item">
<a class="nav-link " href="notification.html">Notification</a>
</li>
<li class="nav-item">
<a class="nav-link " href="content-sections.html">Content Sections</a>
</li>
<li class="nav-item my-2 my-lg-5"></li>
<li class="nav-item">
<small class="nav-subtitle">Forms</small>
</li>
<li class="nav-item">
<a class="nav-link " href="forms-authentication.html">Authentication</a>
</li>
<li class="nav-item">
<a class="nav-link " href="forms-feedback.html">Feedback</a>
</li>
<li class="nav-item">
<a class="nav-link " href="forms-filters.html">Filters</a>
</li>
<li class="nav-item">
<a class="nav-link " href="forms-search.html">Search</a>
</li>
<li class="nav-item">
<a class="nav-link " href="forms-directory.html">Directory</a>
</li>
<li class="nav-item">
<a class="nav-link " href="forms-subscribe.html">Subscribe</a>
</li>
<li class="nav-item">
<a class="nav-link " href="forms-account.html">Account</a>
</li>
<li class="nav-item">
<a class="nav-link " href="forms-wizard-and-steps.html">Wizard &amp; Steps</a>
</li>
<li class="nav-item my-2 my-lg-5"></li>
<li class="nav-item">
<small class="nav-subtitle">Contact / Footer</small>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/contact-sections.html">Contact Sections</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../snippets/footer.html">Footer</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">Lists</h1>
</div>
</div>
</div>
<!-- End Page Header -->
<!-- Heading -->
<h2 id="component-1" class="hs-docs-heading">
Component #1 <a class="anchorjs-link" href="#component-1" aria-label="Anchor" data-anchorjs-icon="#"></a>
</h2>
<!-- End Heading -->
<!-- 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">
<!-- Careers -->
<div class="container content-space-1">
<div class="w-lg-75 mx-lg-auto mb-5 mb-md-7">
<!-- Heading -->
<div class="w-lg-75 text-center mx-auto mb-5 mb-sm-9">
<h2 class="h1">We are hiring</h2>
</div>
<!-- End Heading -->
<!-- List Striped -->
<ul class="list-group list-group-lg">
<li class="list-group-item">
<div class="row">
<div class="col-sm-4 mb-2 mb-sm-0">
<span class="h6">Android Engineer</span>
</div>
<!-- End Col -->
<div class="col-sm-2 mb-2 mb-sm-0">
<span>London</span>
</div>
<!-- End Col -->
<div class="col-sm-4 mb-2 mb-sm-0">
<span>Software Development</span>
</div>
<!-- End Col -->
<div class="col-sm-2 text-sm-end">
<a href="../page-careers-overview.html">Apply <i class="bi-chevron-right small ms-1 small ms-1"></i></a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</li>
<li class="list-group-item">
<div class="row">
<div class="col-sm-4 mb-2 mb-sm-0">
<span class="h6">Sales Account Executive</span>
</div>
<!-- End Col -->
<div class="col-sm-2 mb-2 mb-sm-0">
<span>Remote</span>
</div>
<!-- End Col -->
<div class="col-sm-4 mb-2 mb-sm-0">
<span>Sales</span>
</div>
<!-- End Col -->
<div class="col-sm-2 text-sm-end">
<a href="../page-careers-overview.html">Apply <i class="bi-chevron-right small ms-1 small ms-1"></i></a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</li>
<li class="list-group-item">
<div class="row">
<div class="col-sm-4 mb-2 mb-sm-0">
<span class="h6">Software Developer (Full Stack)</span>
</div>
<!-- End Col -->
<div class="col-sm-2 mb-2 mb-sm-0">
<span>London</span>
</div>
<!-- End Col -->
<div class="col-sm-4 mb-2 mb-sm-0">
<span>Software Development</span>
</div>
<!-- End Col -->
<div class="col-sm-2 text-sm-end">
<a href="../page-careers-overview.html">Apply <i class="bi-chevron-right small ms-1 small ms-1"></i></a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</li>
<li class="list-group-item">
<div class="row">
<div class="col-sm-4 mb-2 mb-sm-0">
<span class="h6">Business Strategy Manager</span>
</div>
<!-- End Col -->
<div class="col-sm-2 mb-2 mb-sm-0">
<span>San Francisco</span>
</div>
<!-- End Col -->
<div class="col-sm-4 mb-2 mb-sm-0">
<span>Business strategy</span>
</div>
<!-- End Col -->
<div class="col-sm-2 text-sm-end">
<a href="../page-careers-overview.html">Apply <i class="bi-chevron-right small ms-1 small ms-1"></i></a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</li>
<li class="list-group-item">
<div class="row">
<div class="col-sm-4 mb-2 mb-sm-0">
<span class="h6">Product Designer</span>
</div>
<!-- End Col -->
<div class="col-sm-2 mb-2 mb-sm-0">
<span>San Francisco</span>
</div>
<!-- End Col -->
<div class="col-sm-4 mb-2 mb-sm-0">
<span>Design</span>
</div>
<!-- End Col -->
<div class="col-sm-2 text-sm-end">
<a href="../page-careers-overview.html">Apply <i class="bi-chevron-right small ms-1 small ms-1"></i></a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</li>
</ul>
<!-- End List Striped -->
</div>
<div class="w-lg-65 text-center mx-lg-auto mt-7">
<p>Don't worry if you don't see any roles you want to apply for now. Register your interest to be notified of any roles that come along that meet your criteria.</p>
<a class="btn btn-outline-primary" href="../page-contacts-agency.html">Register your interest</a>
</div>
</div>
<!-- End Careers -->
</div>
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
<pre>
<code class="language-markup" data-lang="html">
&lt;!-- Careers --&gt;
&lt;div class="container content-space-2 content-space-lg-3"&gt;
&lt;div class="w-lg-75 mx-lg-auto mb-5 mb-md-7"&gt;
&lt;!-- Heading --&gt;
&lt;div class="w-lg-75 text-center mx-auto mb-5 mb-sm-9"&gt;
&lt;h2 class="h1"&gt;We are hiring&lt;/h2&gt;
&lt;/div&gt;
&lt;!-- End Heading --&gt;
&lt;!-- List Striped --&gt;
&lt;ul class="list-group list-group-lg"&gt;
&lt;li class="list-group-item"&gt;
&lt;div class="row"&gt;
&lt;div class="col-sm-4 mb-2 mb-sm-0"&gt;
&lt;span class="h6"&gt;Android Engineer&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-2 mb-2 mb-sm-0"&gt;
&lt;span&gt;London&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-4 mb-2 mb-sm-0"&gt;
&lt;span&gt;Software Development&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-2 text-sm-end"&gt;
&lt;a href="../page-careers-overview.html"&gt;Apply &lt;i class="bi-chevron-right small ms-1 small ms-1"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;/div&gt;
&lt;!-- End Row --&gt;
&lt;/li&gt;
&lt;li class="list-group-item"&gt;
&lt;div class="row"&gt;
&lt;div class="col-sm-4 mb-2 mb-sm-0"&gt;
&lt;span class="h6"&gt;Sales Account Executive&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-2 mb-2 mb-sm-0"&gt;
&lt;span&gt;Remote&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-4 mb-2 mb-sm-0"&gt;
&lt;span&gt;Sales&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-2 text-sm-end"&gt;
&lt;a href="../page-careers-overview.html"&gt;Apply &lt;i class="bi-chevron-right small ms-1 small ms-1"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;/div&gt;
&lt;!-- End Row --&gt;
&lt;/li&gt;
&lt;li class="list-group-item"&gt;
&lt;div class="row"&gt;
&lt;div class="col-sm-4 mb-2 mb-sm-0"&gt;
&lt;span class="h6"&gt;Software Developer (Full Stack)&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-2 mb-2 mb-sm-0"&gt;
&lt;span&gt;London&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-4 mb-2 mb-sm-0"&gt;
&lt;span&gt;Software Development&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-2 text-sm-end"&gt;
&lt;a href="../page-careers-overview.html"&gt;Apply &lt;i class="bi-chevron-right small ms-1 small ms-1"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;/div&gt;
&lt;!-- End Row --&gt;
&lt;/li&gt;
&lt;li class="list-group-item"&gt;
&lt;div class="row"&gt;
&lt;div class="col-sm-4 mb-2 mb-sm-0"&gt;
&lt;span class="h6"&gt;Business Strategy Manager&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-2 mb-2 mb-sm-0"&gt;
&lt;span&gt;San Francisco&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-4 mb-2 mb-sm-0"&gt;
&lt;span&gt;Business strategy&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-2 text-sm-end"&gt;
&lt;a href="../page-careers-overview.html"&gt;Apply &lt;i class="bi-chevron-right small ms-1 small ms-1"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;/div&gt;
&lt;!-- End Row --&gt;
&lt;/li&gt;
&lt;li class="list-group-item"&gt;
&lt;div class="row"&gt;
&lt;div class="col-sm-4 mb-2 mb-sm-0"&gt;
&lt;span class="h6"&gt;Product Designer&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-2 mb-2 mb-sm-0"&gt;
&lt;span&gt;San Francisco&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-4 mb-2 mb-sm-0"&gt;
&lt;span&gt;Design&lt;/span&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-2 text-sm-end"&gt;
&lt;a href="../page-careers-overview.html"&gt;Apply &lt;i class="bi-chevron-right small ms-1 small ms-1"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;/div&gt;
&lt;!-- End Row --&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- End List Striped --&gt;
&lt;/div&gt;
&lt;div class="w-lg-65 text-center mx-lg-auto mt-7"&gt;
&lt;p&gt;Don't worry if you don't see any roles you want to apply for now. Register your interest to be notified of any roles that come along that meet your criteria.&lt;/p&gt;
&lt;a class="btn btn-outline-primary" href="../page-contacts-agency.html"&gt;Register your interest&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- End Careers --&gt;
</code>
</pre>
</div>
</div>
<!-- End Tab Content -->
</div>
<!-- End Card -->
<!-- Heading -->
<h2 id="component-2" class="hs-docs-heading">
Component #2 <a class="anchorjs-link" href="#component-2" aria-label="Anchor" data-anchorjs-icon="#"></a>
</h2>
<!-- End Heading -->
<!-- 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">
<!-- Lists -->
<div class="container content-space-1">
<div class="row">
<div class="col-sm-6 col-md-4 mb-5 mb-md-0">
<span class="svg-icon text-primary mb-4">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M12 20.0217L8.47345 21.7285L6.86905 18.1542L3.07048 17.1949L4.13894 13.4256L1.84573 10.249L5.0871 8.04825L5.37225 4.14081L9.2699 4.5385L12 1.72852L14.7301 4.5385L18.6277 4.14081L18.9129 8.04825L22.1542 10.249L19.861 13.4256L20.9295 17.1949L17.1309 18.1542L15.5265 21.7285L12 20.0217Z" fill="#008060"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 15.006L10.0463 16.0332C9.81245 16.1561 9.5232 16.0662 9.40025 15.8324C9.3513 15.7393 9.33445 15.6326 9.3522 15.5289L9.72535 13.3533L8.1447 11.8126C7.9555 11.6282 7.95165 11.3253 8.13605 11.1361C8.2095 11.0608 8.3057 11.0118 8.4098 10.9967L10.5942 10.6792L11.5711 8.69985C11.6881 8.46295 11.9749 8.3657 12.2118 8.4826C12.3061 8.52915 12.3825 8.60555 12.4291 8.69985L13.4059 10.6792L15.5903 10.9967C15.8518 11.0346 16.0329 11.2774 15.9949 11.5388C15.9798 11.6429 15.9308 11.7392 15.8555 11.8126L14.2748 13.3533L14.6479 15.5289C14.6926 15.7893 14.5177 16.0366 14.2573 16.0812C14.1537 16.099 14.047 16.0821 13.9539 16.0332L12.0001 15.006Z" fill="#008060"/>
</svg>
</span>
<div class="mb-4">
<h4>Featured articles</h4>
</div>
<!-- List -->
<ul class="list-unstyled list-pointer">
<li class="list-pointer-item">
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">What is Front?</a>
</li>
<li class="list-pointer-item">
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Getting started for workspace creators</a>
</li>
<li class="list-pointer-item">
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Edit your profile</a>
</li>
<li class="list-pointer-item">
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">View and download invoices</a>
</li>
</ul>
<!-- End List -->
<a class="link" href="../demo-help-desk/listing.html">See all articles <i class="bi-chevron-right small ms-1"></i></a>
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-5 mb-md-0">
<span class="svg-icon text-primary mb-4">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M4 4L11.6314 2.56911C11.875 2.52343 12.125 2.52343 12.3686 2.56911L20 4V11.9033C20 15.696 18.0462 19.2211 14.83 21.2313L12.53 22.6687C12.2057 22.8714 11.7943 22.8714 11.47 22.6687L9.17001 21.2313C5.95382 19.2211 4 15.696 4 11.9033L4 4Z" fill="#035A4B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.175 14.75C10.9354 14.75 10.6958 14.6542 10.5042 14.4625L8.58749 12.5458C8.20415 12.1625 8.20415 11.5875 8.58749 11.2042C8.97082 10.8208 9.59374 10.8208 9.92915 11.2042L11.175 12.45L14.3375 9.2875C14.7208 8.90417 15.2958 8.90417 15.6792 9.2875C16.0625 9.67083 16.0625 10.2458 15.6792 10.6292L11.8458 14.4625C11.6542 14.6542 11.4146 14.75 11.175 14.75Z" fill="#035A4B"/>
</svg>
</span>
<div class="mb-4">
<h4>Most helpful articles</h4>
</div>
<!-- List -->
<ul class="list-unstyled list-pointer">
<li class="list-pointer-item">
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Working in Front</a>
</li>
<li class="list-pointer-item">
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Delete a page</a>
</li>
<li class="list-pointer-item">
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Add an app to your workspace</a>
</li>
<li class="list-pointer-item">
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">What is Item Support?</a>
</li>
</ul>
<!-- End List -->
<a class="link" href="../demo-help-desk/listing.html">See all articles <i class="bi-chevron-right small ms-1"></i></a>
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4">
<span class="svg-icon text-primary mb-4">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M5 15L3 21.5L9.5 19.5L5 15Z" fill="#035A4B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 21C18.7467 21 23 16.7467 23 11.5C23 6.2533 18.7467 2 13.5 2C8.2533 2 4 6.2533 4 11.5C4 16.7467 8.2533 21 13.5 21ZM13.5 14.0061L11.5463 15.0332C11.3124 15.1562 11.0232 15.0663 10.9003 14.8324C10.8513 14.7393 10.8344 14.6326 10.8522 14.5289L11.2254 12.3533L9.6447 10.8126C9.4555 10.6282 9.45165 10.3254 9.63605 10.1362C9.7095 10.0609 9.8057 10.0118 9.9098 9.9967L12.0942 9.67925L13.0711 7.69985C13.1881 7.46295 13.4749 7.3657 13.7118 7.4826C13.8061 7.52915 13.8825 7.60555 13.9291 7.69985L14.9059 9.67925L17.0903 9.9967C17.3517 10.0347 17.5329 10.2774 17.4949 10.5388C17.4798 10.6429 17.4307 10.7392 17.3554 10.8126L15.7748 12.3533L16.1479 14.5289C16.1926 14.7893 16.0177 15.0366 15.7573 15.0813C15.6537 15.0991 15.5469 15.0822 15.4538 15.0332L13.5 14.0061Z" fill="#035A4B"/>
</svg>
</span>
<div class="mb-4">
<h4>Popular forum topics</h4>
</div>
<!-- List -->
<ul class="list-unstyled list-pointer">
<li class="list-pointer-item">
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Getting started for new members</a>
</li>
<li class="list-pointer-item">
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Invite new members to your workspace</a>
</li>
<li class="list-pointer-item">
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Bundled Plugins</a>
</li>
</ul>
<!-- End List -->
<a class="link" href="../demo-help-desk/listing.html">See all articles <i class="bi-chevron-right small ms-1"></i></a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Lists -->
</div>
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
<pre>
<code class="language-markup" data-lang="html">
&lt;!-- Lists --&gt;
&lt;div class="container content-space-2 content-space-lg-3"&gt;
&lt;div class="row"&gt;
&lt;div class="col-sm-6 col-md-4 mb-5 mb-md-0"&gt;
&lt;span class="svg-icon text-primary mb-4"&gt;
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M12 20.0217L8.47345 21.7285L6.86905 18.1542L3.07048 17.1949L4.13894 13.4256L1.84573 10.249L5.0871 8.04825L5.37225 4.14081L9.2699 4.5385L12 1.72852L14.7301 4.5385L18.6277 4.14081L18.9129 8.04825L22.1542 10.249L19.861 13.4256L20.9295 17.1949L17.1309 18.1542L15.5265 21.7285L12 20.0217Z" fill="#008060"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 15.006L10.0463 16.0332C9.81245 16.1561 9.5232 16.0662 9.40025 15.8324C9.3513 15.7393 9.33445 15.6326 9.3522 15.5289L9.72535 13.3533L8.1447 11.8126C7.9555 11.6282 7.95165 11.3253 8.13605 11.1361C8.2095 11.0608 8.3057 11.0118 8.4098 10.9967L10.5942 10.6792L11.5711 8.69985C11.6881 8.46295 11.9749 8.3657 12.2118 8.4826C12.3061 8.52915 12.3825 8.60555 12.4291 8.69985L13.4059 10.6792L15.5903 10.9967C15.8518 11.0346 16.0329 11.2774 15.9949 11.5388C15.9798 11.6429 15.9308 11.7392 15.8555 11.8126L14.2748 13.3533L14.6479 15.5289C14.6926 15.7893 14.5177 16.0366 14.2573 16.0812C14.1537 16.099 14.047 16.0821 13.9539 16.0332L12.0001 15.006Z" fill="#008060"/>
</svg>
&lt;/span&gt;
&lt;div class="mb-4"&gt;
&lt;h4&gt;Featured articles&lt;/h4&gt;
&lt;/div&gt;
&lt;!-- List --&gt;
&lt;ul class="list-unstyled list-pointer"&gt;
&lt;li class="list-pointer-item"&gt;
&lt;a class="link link-secondary" href="../demo-help-desk/article-overview.html"&gt;What is Front?&lt;/a&gt;
&lt;/li&gt;
&lt;li class="list-pointer-item"&gt;
&lt;a class="link link-secondary" href="../demo-help-desk/article-overview.html"&gt;Getting started for workspace creators&lt;/a&gt;
&lt;/li&gt;
&lt;li class="list-pointer-item"&gt;
&lt;a class="link link-secondary" href="../demo-help-desk/article-overview.html"&gt;Edit your profile&lt;/a&gt;
&lt;/li&gt;
&lt;li class="list-pointer-item"&gt;
&lt;a class="link link-secondary" href="../demo-help-desk/article-overview.html"&gt;View and download invoices&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- End List --&gt;
&lt;a class="link" href="../demo-help-desk/listing.html"&gt;See all articles &lt;i class="bi-chevron-right small ms-1"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-6 col-md-4 mb-5 mb-md-0"&gt;
&lt;span class="svg-icon text-primary mb-4"&gt;
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M4 4L11.6314 2.56911C11.875 2.52343 12.125 2.52343 12.3686 2.56911L20 4V11.9033C20 15.696 18.0462 19.2211 14.83 21.2313L12.53 22.6687C12.2057 22.8714 11.7943 22.8714 11.47 22.6687L9.17001 21.2313C5.95382 19.2211 4 15.696 4 11.9033L4 4Z" fill="#035A4B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.175 14.75C10.9354 14.75 10.6958 14.6542 10.5042 14.4625L8.58749 12.5458C8.20415 12.1625 8.20415 11.5875 8.58749 11.2042C8.97082 10.8208 9.59374 10.8208 9.92915 11.2042L11.175 12.45L14.3375 9.2875C14.7208 8.90417 15.2958 8.90417 15.6792 9.2875C16.0625 9.67083 16.0625 10.2458 15.6792 10.6292L11.8458 14.4625C11.6542 14.6542 11.4146 14.75 11.175 14.75Z" fill="#035A4B"/>
</svg>
&lt;/span&gt;
&lt;div class="mb-4"&gt;
&lt;h4&gt;Most helpful articles&lt;/h4&gt;
&lt;/div&gt;
&lt;!-- List --&gt;
&lt;ul class="list-unstyled list-pointer"&gt;
&lt;li class="list-pointer-item"&gt;
&lt;a class="link link-secondary" href="../demo-help-desk/article-overview.html"&gt;Working in Front&lt;/a&gt;
&lt;/li&gt;
&lt;li class="list-pointer-item"&gt;
&lt;a class="link link-secondary" href="../demo-help-desk/article-overview.html"&gt;Delete a page&lt;/a&gt;
&lt;/li&gt;
&lt;li class="list-pointer-item"&gt;
&lt;a class="link link-secondary" href="../demo-help-desk/article-overview.html"&gt;Add an app to your workspace&lt;/a&gt;
&lt;/li&gt;
&lt;li class="list-pointer-item"&gt;
&lt;a class="link link-secondary" href="../demo-help-desk/article-overview.html"&gt;What is Item Support?&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- End List --&gt;
&lt;a class="link" href="../demo-help-desk/listing.html"&gt;See all articles &lt;i class="bi-chevron-right small ms-1"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm-6 col-md-4"&gt;
&lt;span class="svg-icon text-primary mb-4"&gt;
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M5 15L3 21.5L9.5 19.5L5 15Z" fill="#035A4B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 21C18.7467 21 23 16.7467 23 11.5C23 6.2533 18.7467 2 13.5 2C8.2533 2 4 6.2533 4 11.5C4 16.7467 8.2533 21 13.5 21ZM13.5 14.0061L11.5463 15.0332C11.3124 15.1562 11.0232 15.0663 10.9003 14.8324C10.8513 14.7393 10.8344 14.6326 10.8522 14.5289L11.2254 12.3533L9.6447 10.8126C9.4555 10.6282 9.45165 10.3254 9.63605 10.1362C9.7095 10.0609 9.8057 10.0118 9.9098 9.9967L12.0942 9.67925L13.0711 7.69985C13.1881 7.46295 13.4749 7.3657 13.7118 7.4826C13.8061 7.52915 13.8825 7.60555 13.9291 7.69985L14.9059 9.67925L17.0903 9.9967C17.3517 10.0347 17.5329 10.2774 17.4949 10.5388C17.4798 10.6429 17.4307 10.7392 17.3554 10.8126L15.7748 12.3533L16.1479 14.5289C16.1926 14.7893 16.0177 15.0366 15.7573 15.0813C15.6537 15.0991 15.5469 15.0822 15.4538 15.0332L13.5 14.0061Z" fill="#035A4B"/>
</svg>
&lt;/span&gt;
&lt;div class="mb-4"&gt;
&lt;h4&gt;Popular forum topics&lt;/h4&gt;
&lt;/div&gt;
&lt;!-- List --&gt;
&lt;ul class="list-unstyled list-pointer"&gt;
&lt;li class="list-pointer-item"&gt;
&lt;a class="link link-secondary" href="../demo-help-desk/article-overview.html"&gt;Getting started for new members&lt;/a&gt;
&lt;/li&gt;
&lt;li class="list-pointer-item"&gt;
&lt;a class="link link-secondary" href="../demo-help-desk/article-overview.html"&gt;Invite new members to your workspace&lt;/a&gt;
&lt;/li&gt;
&lt;li class="list-pointer-item"&gt;
&lt;a class="link link-secondary" href="../demo-help-desk/article-overview.html"&gt;Bundled Plugins&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- End List --&gt;
&lt;a class="link" href="../demo-help-desk/listing.html"&gt;See all articles &lt;i class="bi-chevron-right small ms-1"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;/div&gt;
&lt;!-- End Row --&gt;
&lt;/div&gt;
&lt;!-- End Lists --&gt;
</code>
</pre>
</div>
</div>
<!-- End Tab Content -->
</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 -->
<script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- JS Implementing Plugins -->
<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="../assets/vendor/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>
<!-- JS Front -->
<script src="../assets/js/theme.min.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('#snippetsSearch')
const snippetsSearch = HSCore.components.HSList.getItem('snippetsSearch')
// GET JSON FILE RESULTS
// =======================================================
fetch('../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>