Bricks Design Set

Library

Bricks Design Set

Bricks Design Set

Border radius

Use utilities like rounded-sm, rounded, or rounded-lg to apply different border radius sizes to an element.

var(--radius-xs)

var(--radius-s)

var(--radius-m)

var(--radius-l)

var(--radius-xl)

var(--radius-full)

Buttons

Action

.btn

Action

.btn-outline

Text link

.text-link

Fluid Font Size

var(--text-xs)

The quick brown fox jumps over the lazy dog.

var(--text-s)

The quick brown fox jumps over the lazy dog.

var(--text-m)

The quick brown fox jumps over the lazy dog.

var(--text-l)

The quick brown fox jumps over the lazy dog.

var(--text-xl)

The quick brown fox jumps over the lazy dog.

var(--text-2xl)

The quick brown fox jumps over the lazy dog.

var(--text-3xl)

The quick brown fox jumps over the lazy dog.

var(--text-4xl)

The quick brown fox jumps over the lazy dog.

var(--text-5xl)

The quick brown fox jumps over the lazy dog.

var(--text-6xl)

The quick brown fox jumps over the lazy dog.

Fluid Spacing

var(--space-4xs)

var(--space-3xs)

var(--space-2xs)

var(--space-xs)

var(--space-s)

var(--space-m)

var(--space-l)

var(--space-xl)

var(--space-2xl)

var(--space-3xl)

var(--space-4xl)

var(--space-5xl)

Basic Animation

Fade In

fade in up

fade in down

fade in left

fade in right

Zoom in

Zoom in

Wobble

Wobble

<script>
   const copyButtons = document.querySelectorAll(".ds-copy");

   copyButtons.forEach(function(button) {
       // Store the original text of the button in an attribute
       button.setAttribute("data-original-text", button.textContent);

       button.addEventListener("click", function() {
           // Create a new textarea element to copy the text to
           const textarea = document.createElement("textarea");
           textarea.value = button.textContent;

           // Add a unique id to the textarea
           textarea.id = "temporary-copy-textarea";

           // Add the textarea element to the DOM
           document.body.appendChild(textarea);

           // Copy the content of the textarea element to the clipboard
           textarea.select();
           document.execCommand("copy");

           // Remove the textarea element
           document.body.removeChild(textarea);

           // Show the message that the value has been copied in the button
           button.textContent = "Copied!";

           // Hide the message after one second and restore the original text of the button
           setTimeout(function() {
               button.textContent = button.getAttribute("data-original-text");
           }, 2000);
       });
   });
</script>

Close

Bricks Design Set b

<script>
   const copyButtons = document.querySelectorAll(".ds-copy");

   copyButtons.forEach(function(button) {
       // Store the original text of the button in an attribute
       button.setAttribute("data-original-text", button.textContent);

       button.addEventListener("click", function() {
           // Create a new textarea element to copy the text to
           const textarea = document.createElement("textarea");
           textarea.value = button.textContent;

           // Add a unique id to the textarea
           textarea.id = "temporary-copy-textarea";

           // Add the textarea element to the DOM
           document.body.appendChild(textarea);

           // Copy the content of the textarea element to the clipboard
           textarea.select();
           document.execCommand("copy");

           // Remove the textarea element
           document.body.removeChild(textarea);

           // Show the message that the value has been copied in the button
           button.textContent = "Copied!";

           // Hide the message after one second and restore the original text of the button
           setTimeout(function() {
               button.textContent = button.getAttribute("data-original-text");
           }, 2000);
       });
   });
</script>

Bricks Design Set