Get started with shards-ui CDN

MIT licensed

Modern, customizable Vue.js component library: Shards-UI .

Tags:
  • ui
  • kit
  • ui kit
  • free
  • bootstrap 4

Stable version

Copied!

How to start using shards-ui CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with shards-ui CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shards-ui@3.0.0/dist/css/shards.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shards-ui@3.0.0/dist/css/shards-icons.min.css">
    <script src="https://cdn.cdnhub.io/shards-ui/3.0.0/js/shards.min.js"></script>
</head>
<body>
    <div class="container-fluid p-0">
        <nav class="bg-light border-bottom">
            <div class="container-fluid d-flex align-items-center justify-content-between py-3">
                <a href="#" class="d-flex align-items-center text-dark text-decoration-none">
                    <span class="fs-4 fw-bold">Shards-UI</span>
                </a>
                <button class="btn btn-sm btn-outline-secondary" type="button">Sign In</button>
            </div>
        </nav>
        <main class="py-4">
            <div class="container-fluid px-4">
                <h1 class="mb-4">Welcome to Shards-UI Example</h1>
                <button class="btn btn-primary mb-3" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>

                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header border-0 p-4 bg-light">
                                <h5 id="exampleModalLabel" class="modal-title text-start">Modal title</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body p-5 text-center">
                                <i class="bi bi-emoji-exclamation modal-icon"></i>
                                <h4 class="modal-heading mb-4">Oh snap! You got an error!</h4>
                                <p>Change a few things up and try submitting again.</p>
                                <button type="button" class="btn btn-link btn-lg px-4" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions