Can I use "Molten Copper Search Results with Interactive Filter Rail" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Molten Copper Search Results with Interactive Filter Rail — Free Other Snippet (Bootstrap 5)

Loading…

Source Code

1
2
3<section class="gs-stage">
4  <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
5  <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
6  <div class="gs-grid-overlay" aria-hidden="true"></div>
7  <div class="gs-card">
8    <div class="gs-card-inner">
9      <header class="gs-card-header">
10        <h1 class="text-center">Search Results</h1>
11      </header>
12      <div class="d-flex">
13        <aside class="gs-filter-rail">
14          <h2>Filter by Type</h2>
15          <ul class="list-unstyled">
16            <li>
17              <button class="btn btn-filter">Images</button>
18            </li>
19            <li>
20              <button class="btn btn-filter">Videos</button>
21            </li>
22            <li>
23              <button class="btn btn-filter">Articles</button>
24            </li>
25          </ul>
26        </aside>
27        <main class="gs-results-container">
28          <ul class="gs-results-list">
29            <li class="gs-result-item">
30              <div class="gs-result-type-icon">
31                <svg xmlns="http://www.w3.org/2000/svg" fill="none">
32                  <rect></rect>
33                  <line></line>
34                </svg>
35              </div>
36              <div class="gs-result-content">
37                <h3>Image Collection</h3>
38                <p>Capture the world through vibrant lenses. See the stunning visuals captured around you.</p>
39              </div>
40            </li>
41            <li class="gs-result-item">
42              <div class="gs-result-type-icon">
43                <svg xmlns="http://www.w3.org/2000/svg" fill="none">
44                  <circle></circle>
45                  <polygon></polygon>
46                </svg>
47              </div>
48              <div class="gs-result-content">
49                <h3>Latest Video</h3>
50                <p>Tune into the latest visual stories and immersive experiences curated just for you.</p>
51              </div>
52            </li>
53            <li class="gs-result-item">
54              <div class="gs-result-type-icon">
55                <svg xmlns="http://www.w3.org/2000/svg" fill="none">
56                  <path d="M19 21v-7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7"></path>
57                  <path d="M9 7h6M12 3v4m0 0v2m0-6h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2"></path>
58                </svg>
59              </div>
60              <div class="gs-result-content">
61                <h3>Article Insight</h3>
62                <p>Dive deep into articles that provide insightful perspectives and knowledge.</p>
63              </div>
64            </li>
65          </ul>
66        </main>
67      </div>
68    </div>
69  </div>
70</section>

Molten Copper Search Results with Interactive Filter Rail

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Other snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery