Can I use "Nordic Slate Micro-Interactive Control Panel" 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.

Nordic Slate Micro-Interactive Control Panel — Free Other Snippet (Bootstrap 5)

Loading…

Source Code

1<section class="gs-stage">
2  <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
3  <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
4  <div class="gs-grid-overlay" aria-hidden="true"></div>
5  <div class="gs-card">
6    <div class="gs-card-inner">
7      <h2 class="gs-title">Control Panel</h2>
8      <p class="gs-description">Efficiently manage your tasks with style.</p>
9      <div class="gs-buttons">
10        <button class="gs-btn gs-primary">Start Task</button>
11        <button class="gs-btn gs-secondary">Pause Task</button>
12      </div>
13      <ul class="gs-task-list">
14        <li class="gs-task-item">
15          <svg fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12l5 5 10-10" stroke="#F1F5F9" stroke-width="2"></path></svg>
16          Update Database - <span>Due: 2023-10-12</span>
17        </li>
18        <li class="gs-task-item">
19          <svg fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12l5 5 10-10" stroke="#F1F5F9" stroke-width="2"></path></svg>
20          Send Reports - <span>Due: 2023-10-15</span>
21        </li>
22      </ul>
23    </div>
24  </div>
25</section>

Nordic Slate Micro-Interactive Control Panel

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