UI.BlueStack.io - Component Library

Label Component

Preview Code

Copy

Basic Labels

Email Address Password * Phone Number (Optional) Company Name Disabled Label

<div class="space-y-4">
  <div>
    <h4 class="text-sm font-medium mb-2 text-gray-600">Basic Labels</h4>
    <div class="flex gap-4 flex-wrap items-center">
      <label class="kc-label">Email Address</label>
      <label class="kc-label">Password <span class="kc-required">*</span></label>
      <label class="kc-label">
        Phone Number
        <span class="kc-optional">(Optional)</span>
      </label>
      <label class="kc-label">
        Company Name
        <i class="ri-information-fill kc-label-icon"></i>
      </label>
      <label class="kc-label kc-label--disabled">Disabled Label</label>
    </div>
  </div>
</div>

Content Label - Medium Size (40px)

Preview Code

Copy

Label (Sublabel)

Insert the content description here.

Label (Sublabel)

Insert the content description here.

Label (Sublabel)

Insert the content description here.

Label (Sublabel)

Insert the content description here.

Label (Sublabel)

Insert the content description here.

<div class="flex gap-3 flex-wrap items-center">
  <div class="kc-content-label">
    <div class="kc-content-label-text">
      <div class="kc-content-label-title">
        <span class="kc-content-label-name">Label</span>
        <span class="kc-content-label-sublabel">(Sublabel)</span>
      </div>
      <p class="kc-content-label-description">Insert the content description here.</p>
    </div>
  </div>

  <div class="kc-content-label">
    <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--gray kc-key-icon--md">
      <i class="ri-user-6-line"></i>
    </div>
    <div class="kc-content-label-text">
      <div class="kc-content-label-title">
        <span class="kc-content-label-name">Label</span>
        <span class="kc-content-label-sublabel">(Sublabel)</span>
      </div>
      <p class="kc-content-label-description">Insert the content description here.</p>
    </div>
  </div>

  <div class="kc-content-label">
    <div class="kc-avatar kc-avatar--md">
      <img
        src="data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23335CFF'/%3E%3C/svg%3E"
        alt="Avatar"
      />
    </div>
    <div class="kc-content-label-text">
      <div class="kc-content-label-title">
        <span class="kc-content-label-name">Label</span>
        <span class="kc-content-label-sublabel">(Sublabel)</span>
      </div>
      <p class="kc-content-label-description">Insert the content description here.</p>
    </div>
  </div>

  <div class="kc-content-label">
    <div class="kc-brand-icon">
      <i class="ri-spotify-fill"></i>
    </div>
    <div class="kc-content-label-text">
      <div class="kc-content-label-title">
        <span class="kc-content-label-name">Label</span>
        <span class="kc-content-label-sublabel">(Sublabel)</span>
      </div>
      <p class="kc-content-label-description">Insert the content description here.</p>
    </div>
  </div>

  <div class="kc-content-label">
    <div class="kc-company-icon">
      <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
        <rect width="40" height="40" rx="20" fill="#F05023" />
      </svg>
    </div>
    <div class="kc-content-label-text">
      <div class="kc-content-label-title">
        <span class="kc-content-label-name">Label</span>
        <span class="kc-content-label-sublabel">(Sublabel)</span>
      </div>
      <p class="kc-content-label-description">Insert the content description here.</p>
    </div>
  </div>
</div>

<div class="flex gap-3 flex-wrap items-center">
                
                <div class="kc-content-label">
                    <div class="kc-content-label-text">
                        <div class="kc-content-label-title">
                            <span class="kc-content-label-name">Label</span>
                            <span class="kc-content-label-sublabel">(Sublabel)</span>
                        </div>
                        <p class="kc-content-label-description">Insert the content description here.</p>
                    </div>
                </div>

<div class="kc-content-label">
                    <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--gray kc-key-icon--md">
                        <i class="ri-user-6-line"></i>
                    </div>
                    <div class="kc-content-label-text">
                        <div class="kc-content-label-title">
                            <span class="kc-content-label-name">Label</span>
                            <span class="kc-content-label-sublabel">(Sublabel)</span>
                        </div>
                        <p class="kc-content-label-description">Insert the content description here.</p>
                    </div>
                </div>

<div class="kc-content-label">
                    <div class="kc-avatar kc-avatar--md">
                        <img src="data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23335CFF'/%3E%3C/svg%3E" alt="Avatar">
                    </div>
                    <div class="kc-content-label-text">
                        <div class="kc-content-label-title">
                            <span class="kc-content-label-name">Label</span>
                            <span class="kc-content-label-sublabel">(Sublabel)</span>
                        </div>
                        <p class="kc-content-label-description">Insert the content description here.</p>
                    </div>
                </div>

<div class="kc-content-label">
                    <div class="kc-brand-icon">
                        <i class="ri-spotify-fill"></i>
                    </div>
                    <div class="kc-content-label-text">
                        <div class="kc-content-label-title">
                            <span class="kc-content-label-name">Label</span>
                            <span class="kc-content-label-sublabel">(Sublabel)</span>
                        </div>
                        <p class="kc-content-label-description">Insert the content description here.</p>
                    </div>
                </div>

<div class="kc-content-label">
                    <div class="kc-company-icon">
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                            <rect width="40" height="40" rx="20" fill="#F05023"/>
                        </svg>
                    </div>
                    <div class="kc-content-label-text">
                        <div class="kc-content-label-title">
                            <span class="kc-content-label-name">Label</span>
                            <span class="kc-content-label-sublabel">(Sublabel)</span>
                        </div>
                        <p class="kc-content-label-description">Insert the content description here.</p>
                    </div>
                </div>
            </div>

Content Label - Large Size (48px)

Preview Code

Copy

Label (Sublabel)

Insert the content description here.

Label (Sublabel)

Insert the content description here.

<div class="flex gap-3 flex-wrap items-center">
  <div class="kc-content-label kc-content-label--lg">
    <div class="kc-content-label-text">
      <div class="kc-content-label-title">
        <span class="kc-content-label-name">Label</span>
        <span class="kc-content-label-sublabel">(Sublabel)</span>
      </div>
      <p class="kc-content-label-description">Insert the content description here.</p>
    </div>
  </div>

  <div class="kc-content-label kc-content-label--lg">
    <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--gray kc-key-icon--lg">
      <i class="ri-user-6-line"></i>
    </div>
    <div class="kc-content-label-text">
      <div class="kc-content-label-title">
        <span class="kc-content-label-name">Label</span>
        <span class="kc-content-label-sublabel">(Sublabel)</span>
      </div>
      <p class="kc-content-label-description">Insert the content description here.</p>
    </div>
  </div>
</div>

<div class="flex gap-3 flex-wrap items-center">
                
                <div class="kc-content-label kc-content-label--lg">
                    <div class="kc-content-label-text">
                        <div class="kc-content-label-title">
                            <span class="kc-content-label-name">Label</span>
                            <span class="kc-content-label-sublabel">(Sublabel)</span>
                        </div>
                        <p class="kc-content-label-description">Insert the content description here.</p>
                    </div>
                </div>

<div class="kc-content-label kc-content-label--lg">
                    <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--gray kc-key-icon--lg">
                        <i class="ri-user-6-line"></i>
                    </div>
                    <div class="kc-content-label-text">
                        <div class="kc-content-label-title">
                            <span class="kc-content-label-name">Label</span>
                            <span class="kc-content-label-sublabel">(Sublabel)</span>
                        </div>
                        <p class="kc-content-label-description">Insert the content description here.</p>
                    </div>
                </div>
            </div>

Content Card

Preview Code

Copy

Label (Sublabel) NEW

Insert the content description here.

Label (Sublabel) NEW

Insert the content description here.

Label (Sublabel) NEW

Insert the content description here.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="kc-content-card">
    <div class="kc-content-card-main">
      <div class="kc-content-card-text">
        <div class="kc-content-card-title">
          <span class="kc-content-card-name">Label</span>
          <span class="kc-content-card-sublabel">(Sublabel)</span>
          <span class="kc-badge-sm kc-badge-sm--blue">NEW</span>
        </div>
        <p class="kc-content-card-description">Insert the content description here.</p>
      </div>
    </div>
    <button class="kc-content-card-close">
      <i class="ri-close-line"></i>
    </button>
  </div>

  <div class="kc-content-card">
    <div class="kc-content-card-main">
      <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--gray kc-key-icon--md">
        <i class="ri-user-6-line"></i>
      </div>
      <div class="kc-content-card-text">
        <div class="kc-content-card-title">
          <span class="kc-content-card-name">Label</span>
          <span class="kc-content-card-sublabel">(Sublabel)</span>
          <span class="kc-badge-sm kc-badge-sm--blue">NEW</span>
        </div>
        <p class="kc-content-card-description">Insert the content description here.</p>
      </div>
    </div>
    <button class="kc-content-card-close">
      <i class="ri-close-line"></i>
    </button>
  </div>

  <div class="kc-content-card">
    <div class="kc-content-card-main">
      <div class="kc-avatar kc-avatar--md">
        <img
          src="data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23335CFF'/%3E%3C/svg%3E"
          alt="Avatar"
        />
      </div>
      <div class="kc-content-card-text">
        <div class="kc-content-card-title">
          <span class="kc-content-card-name">Label</span>
          <span class="kc-content-card-sublabel">(Sublabel)</span>
          <span class="kc-badge-sm kc-badge-sm--blue">NEW</span>
        </div>
        <p class="kc-content-card-description">Insert the content description here.</p>
      </div>
    </div>
    <button class="kc-content-card-close">
      <i class="ri-close-line"></i>
    </button>
  </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                
                <div class="kc-content-card">
                    <div class="kc-content-card-main">
                        <div class="kc-content-card-text">
                            <div class="kc-content-card-title">
                                <span class="kc-content-card-name">Label</span>
                                <span class="kc-content-card-sublabel">(Sublabel)</span>
                                <span class="kc-badge-sm kc-badge-sm--blue">NEW</span>
                            </div>
                            <p class="kc-content-card-description">Insert the content description here.</p>
                        </div>
                    </div>
                    <button class="kc-content-card-close">
                        <i class="ri-close-line"></i>
                    </button>
                </div>

<div class="kc-content-card">
                    <div class="kc-content-card-main">
                        <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--gray kc-key-icon--md">
                            <i class="ri-user-6-line"></i>
                        </div>
                        <div class="kc-content-card-text">
                            <div class="kc-content-card-title">
                                <span class="kc-content-card-name">Label</span>
                                <span class="kc-content-card-sublabel">(Sublabel)</span>
                                <span class="kc-badge-sm kc-badge-sm--blue">NEW</span>
                            </div>
                            <p class="kc-content-card-description">Insert the content description here.</p>
                        </div>
                    </div>
                    <button class="kc-content-card-close">
                        <i class="ri-close-line"></i>
                    </button>
                </div>

<div class="kc-content-card">
                    <div class="kc-content-card-main">
                        <div class="kc-avatar kc-avatar--md">
                            <img src="data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23335CFF'/%3E%3C/svg%3E" alt="Avatar">
                        </div>
                        <div class="kc-content-card-text">
                            <div class="kc-content-card-title">
                                <span class="kc-content-card-name">Label</span>
                                <span class="kc-content-card-sublabel">(Sublabel)</span>
                                <span class="kc-badge-sm kc-badge-sm--blue">NEW</span>
                            </div>
                            <p class="kc-content-card-description">Insert the content description here.</p>
                        </div>
                    </div>
                    <button class="kc-content-card-close">
                        <i class="ri-close-line"></i>
                    </button>
                </div>
            </div>

Hint Text States

Preview Code

Copy

This is a hint text to help user.

<div class="flex gap-4 flex-wrap items-center">
  <div class="kc-hint-text kc-hint-text--default">
    <i class="ri-information-fill"></i>
    <span>This is a hint text to help user.</span>
  </div>
  <div class="kc-hint-text kc-hint-text--error">
    <i class="ri-information-fill"></i>
    <span>This is a hint text to help user.</span>
  </div>
  <div class="kc-hint-text kc-hint-text--disabled">
    <i class="ri-information-fill"></i>
    <span>This is a hint text to help user.</span>
  </div>
</div>

Password Strength Indicators

Preview Code

Copy

Empty State

Must contain at least;

At least 1 uppercase

At least 1 number

At least 8 characters

Weak Password

Must contain at least;

At least 1 uppercase

At least 1 number

At least 8 characters

Moderate Password

Must contain at least;

At least 1 uppercase

At least 1 number

At least 8 characters

Strong Password

Must contain at least;

At least 1 uppercase

At least 1 number

At least 8 characters

<div class="space-y-4">
  <div>
    <h4 class="text-sm font-medium mb-2 text-gray-600">Empty State</h4>
    <div class="kc-password-strength" data-strength="empty">
      <div class="kc-password-strength-bars">
        <div class="kc-password-strength-bar"></div>
        <div class="kc-password-strength-bar"></div>
        <div class="kc-password-strength-bar"></div>
      </div>
      <p class="kc-password-strength-text">Must contain at least;</p>
      <div class="kc-password-strength-requirements">
        <div class="kc-password-requirement">
          <i class="ri-checkbox-blank-circle-line"></i>
          <span>At least 1 uppercase</span>
        </div>
        <div class="kc-password-requirement">
          <i class="ri-checkbox-blank-circle-line"></i>
          <span>At least 1 number</span>
        </div>
        <div class="kc-password-requirement">
          <i class="ri-checkbox-blank-circle-line"></i>
          <span>At least 8 characters</span>
        </div>
      </div>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-medium mb-2 text-gray-600">Weak Password</h4>
    <div class="kc-password-strength" data-strength="weak">
      <div class="kc-password-strength-bars">
        <div class="kc-password-strength-bar kc-password-strength-bar--active"></div>
        <div class="kc-password-strength-bar"></div>
        <div class="kc-password-strength-bar"></div>
      </div>
      <p class="kc-password-strength-text">Must contain at least;</p>
      <div class="kc-password-strength-requirements">
        <div class="kc-password-requirement kc-password-requirement--met">
          <i class="ri-checkbox-blank-circle-line"></i>
          <span>At least 1 uppercase</span>
        </div>
        <div class="kc-password-requirement kc-password-requirement--unmet">
          <i class="ri-close-circle-fill"></i>
          <span>At least 1 number</span>
        </div>
        <div class="kc-password-requirement kc-password-requirement--unmet">
          <i class="ri-close-circle-fill"></i>
          <span>At least 8 characters</span>
        </div>
      </div>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-medium mb-2 text-gray-600">Moderate Password</h4>
    <div class="kc-password-strength" data-strength="moderate">
      <div class="kc-password-strength-bars">
        <div class="kc-password-strength-bar kc-password-strength-bar--active"></div>
        <div class="kc-password-strength-bar kc-password-strength-bar--active"></div>
        <div class="kc-password-strength-bar"></div>
      </div>
      <p class="kc-password-strength-text">Must contain at least;</p>
      <div class="kc-password-strength-requirements">
        <div class="kc-password-requirement kc-password-requirement--met">
          <i class="ri-checkbox-blank-circle-line"></i>
          <span>At least 1 uppercase</span>
        </div>
        <div class="kc-password-requirement kc-password-requirement--met">
          <i class="ri-checkbox-blank-circle-line"></i>
          <span>At least 1 number</span>
        </div>
        <div class="kc-password-requirement kc-password-requirement--unmet">
          <i class="ri-close-circle-fill"></i>
          <span>At least 8 characters</span>
        </div>
      </div>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-medium mb-2 text-gray-600">Strong Password</h4>
    <div class="kc-password-strength" data-strength="strong">
      <div class="kc-password-strength-bars">
        <div class="kc-password-strength-bar kc-password-strength-bar--active"></div>
        <div class="kc-password-strength-bar kc-password-strength-bar--active"></div>
        <div class="kc-password-strength-bar kc-password-strength-bar--active"></div>
      </div>
      <p class="kc-password-strength-text">Must contain at least;</p>
      <div class="kc-password-strength-requirements">
        <div class="kc-password-requirement kc-password-requirement--met">
          <i class="ri-checkbox-blank-circle-line"></i>
          <span>At least 1 uppercase</span>
        </div>
        <div class="kc-password-requirement kc-password-requirement--met">
          <i class="ri-checkbox-blank-circle-line"></i>
          <span>At least 1 number</span>
        </div>
        <div class="kc-password-requirement kc-password-requirement--met">
          <i class="ri-checkbox-blank-circle-line"></i>
          <span>At least 8 characters</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="space-y-4">
                
                <div>
                    <h4 class="text-sm font-medium mb-2 text-gray-600">Empty State</h4>
                    <div class="kc-password-strength" data-strength="empty">
                        <div class="kc-password-strength-bars">
                            <div class="kc-password-strength-bar"></div>
                            <div class="kc-password-strength-bar"></div>
                            <div class="kc-password-strength-bar"></div>
                        </div>
                        <p class="kc-password-strength-text">Must contain at least;</p>
                        <div class="kc-password-strength-requirements">
                            <div class="kc-password-requirement">
                                <i class="ri-checkbox-blank-circle-line"></i>
                                <span>At least 1 uppercase</span>
                            </div>
                            <div class="kc-password-requirement">
                                <i class="ri-checkbox-blank-circle-line"></i>
                                <span>At least 1 number</span>
                            </div>
                            <div class="kc-password-requirement">
                                <i class="ri-checkbox-blank-circle-line"></i>
                                <span>At least 8 characters</span>
                            </div>
                        </div>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-medium mb-2 text-gray-600">Weak Password</h4>
                    <div class="kc-password-strength" data-strength="weak">
                        <div class="kc-password-strength-bars">
                            <div class="kc-password-strength-bar kc-password-strength-bar--active"></div>
                            <div class="kc-password-strength-bar"></div>
                            <div class="kc-password-strength-bar"></div>
                        </div>
                        <p class="kc-password-strength-text">Must contain at least;</p>
                        <div class="kc-password-strength-requirements">
                            <div class="kc-password-requirement kc-password-requirement--met">
                                <i class="ri-checkbox-blank-circle-line"></i>
                                <span>At least 1 uppercase</span>
                            </div>
                            <div class="kc-password-requirement kc-password-requirement--unmet">
                                <i class="ri-close-circle-fill"></i>
                                <span>At least 1 number</span>
                            </div>
                            <div class="kc-password-requirement kc-password-requirement--unmet">
                                <i class="ri-close-circle-fill"></i>
                                <span>At least 8 characters</span>
                            </div>
                        </div>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-medium mb-2 text-gray-600">Moderate Password</h4>
                    <div class="kc-password-strength" data-strength="moderate">
                        <div class="kc-password-strength-bars">
                            <div class="kc-password-strength-bar kc-password-strength-bar--active"></div>
                            <div class="kc-password-strength-bar kc-password-strength-bar--active"></div>
                            <div class="kc-password-strength-bar"></div>
                        </div>
                        <p class="kc-password-strength-text">Must contain at least;</p>
                        <div class="kc-password-strength-requirements">
                            <div class="kc-password-requirement kc-password-requirement--met">
                                <i class="ri-checkbox-blank-circle-line"></i>
                                <span>At least 1 uppercase</span>
                            </div>
                            <div class="kc-password-requirement kc-password-requirement--met">
                                <i class="ri-checkbox-blank-circle-line"></i>
                                <span>At least 1 number</span>
                            </div>
                            <div class="kc-password-requirement kc-password-requirement--unmet">
                                <i class="ri-close-circle-fill"></i>
                                <span>At least 8 characters</span>
                            </div>
                        </div>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-medium mb-2 text-gray-600">Strong Password</h4>
                    <div class="kc-password-strength" data-strength="strong">
                        <div class="kc-password-strength-bars">
                            <div class="kc-password-strength-bar kc-password-strength-bar--active"></div>
                            <div class="kc-password-strength-bar kc-password-strength-bar--active"></div>
                            <div class="kc-password-strength-bar kc-password-strength-bar--active"></div>
                        </div>
                        <p class="kc-password-strength-text">Must contain at least;</p>
                        <div class="kc-password-strength-requirements">
                            <div class="kc-password-requirement kc-password-requirement--met">
                                <i class="ri-checkbox-blank-circle-line"></i>
                                <span>At least 1 uppercase</span>
                            </div>
                            <div class="kc-password-requirement kc-password-requirement--met">
                                <i class="ri-checkbox-blank-circle-line"></i>
                                <span>At least 1 number</span>
                            </div>
                            <div class="kc-password-requirement kc-password-requirement--met">
                                <i class="ri-checkbox-blank-circle-line"></i>
                                <span>At least 8 characters</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Key Icons - Stroke Style

Preview Code

Copy

<div class="flex gap-4 flex-wrap items-center justify-center">
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--gray kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--blue kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--orange kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--red kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--green kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--yellow kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--purple kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--pink kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--teal kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
</div>

Key Icons - Lighter Style

Preview Code

Copy

<div class="flex gap-4 flex-wrap items-center justify-center">
  <div class="kc-key-icon kc-key-icon--lighter kc-key-icon--gray kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--lighter kc-key-icon--blue kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--lighter kc-key-icon--orange kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--lighter kc-key-icon--red kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--lighter kc-key-icon--green kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--lighter kc-key-icon--yellow kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--lighter kc-key-icon--purple kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--lighter kc-key-icon--pink kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--lighter kc-key-icon--teal kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
</div>

Key Icons - Size Variants

Preview Code

Copy

<div class="flex gap-4 flex-wrap items-center justify-center">
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--blue kc-key-icon--2xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--blue kc-key-icon--xl">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--blue kc-key-icon--lg">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--blue kc-key-icon--md">
    <i class="ri-user-6-line"></i>
  </div>
  <div class="kc-key-icon kc-key-icon--stroke kc-key-icon--blue kc-key-icon--sm">
    <i class="ri-user-6-line"></i>
  </div>
</div>

Payment Icons

Preview Code

Copy

<div class="flex gap-4 flex-wrap items-center justify-center">
  <div class="kc-payment-icon kc-payment-icon--water">
    <i class="ri-drop-fill"></i>
  </div>
  <div class="kc-payment-icon kc-payment-icon--gas">
    <i class="ri-fire-fill"></i>
  </div>
  <div class="kc-payment-icon kc-payment-icon--electricity">
    <i class="ri-lightbulb-flash-fill"></i>
  </div>
  <div class="kc-payment-icon kc-payment-icon--donate">
    <i class="ri-heart-fill"></i>
  </div>
  <div class="kc-payment-icon kc-payment-icon--internet">
    <i class="ri-wifi-fill"></i>
  </div>
  <div class="kc-payment-icon kc-payment-icon--phone">
    <i class="ri-smartphone-fill"></i>
  </div>
  <div class="kc-payment-icon kc-payment-icon--rent">
    <i class="ri-home-smile-fill"></i>
  </div>
  <div class="kc-payment-icon kc-payment-icon--tax">
    <i class="ri-file-list-fill"></i>
  </div>
</div>

Chart Legends

Preview Code

Copy

Gray Legend

Light Gray

Blue Legend

Orange Legend

Red Legend

Green Legend

Yellow Legend

Purple Legend

Sky Legend

Pink Legend

Teal Legend

Disabled

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
  <div class="kc-chart-legend">
    <span class="kc-chart-dot kc-chart-dot--gray"></span>
    <span class="kc-chart-legend-text">Gray Legend</span>
  </div>
  <div class="kc-chart-legend">
    <span class="kc-chart-dot kc-chart-dot--light-gray"></span>
    <span class="kc-chart-legend-text">Light Gray</span>
  </div>
  <div class="kc-chart-legend">
    <span class="kc-chart-dot kc-chart-dot--blue"></span>
    <span class="kc-chart-legend-text">Blue Legend</span>
  </div>
  <div class="kc-chart-legend">
    <span class="kc-chart-dot kc-chart-dot--orange"></span>
    <span class="kc-chart-legend-text">Orange Legend</span>
  </div>
  <div class="kc-chart-legend">
    <span class="kc-chart-dot kc-chart-dot--red"></span>
    <span class="kc-chart-legend-text">Red Legend</span>
  </div>
  <div class="kc-chart-legend">
    <span class="kc-chart-dot kc-chart-dot--green"></span>
    <span class="kc-chart-legend-text">Green Legend</span>
  </div>
  <div class="kc-chart-legend">
    <span class="kc-chart-dot kc-chart-dot--yellow"></span>
    <span class="kc-chart-legend-text">Yellow Legend</span>
  </div>
  <div class="kc-chart-legend">
    <span class="kc-chart-dot kc-chart-dot--purple"></span>
    <span class="kc-chart-legend-text">Purple Legend</span>
  </div>
  <div class="kc-chart-legend">
    <span class="kc-chart-dot kc-chart-dot--sky"></span>
    <span class="kc-chart-legend-text">Sky Legend</span>
  </div>
  <div class="kc-chart-legend">
    <span class="kc-chart-dot kc-chart-dot--pink"></span>
    <span class="kc-chart-legend-text">Pink Legend</span>
  </div>
  <div class="kc-chart-legend">
    <span class="kc-chart-dot kc-chart-dot--teal"></span>
    <span class="kc-chart-legend-text">Teal Legend</span>
  </div>
  <div class="kc-chart-legend kc-chart-legend--disabled">
    <span class="kc-chart-dot kc-chart-dot--disabled"></span>
    <span class="kc-chart-legend-text">Disabled</span>
  </div>
</div>

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                <div class="kc-chart-legend">
                    <span class="kc-chart-dot kc-chart-dot--gray"></span>
                    <span class="kc-chart-legend-text">Gray Legend</span>
                </div>
                <div class="kc-chart-legend">
                    <span class="kc-chart-dot kc-chart-dot--light-gray"></span>
                    <span class="kc-chart-legend-text">Light Gray</span>
                </div>
                <div class="kc-chart-legend">
                    <span class="kc-chart-dot kc-chart-dot--blue"></span>
                    <span class="kc-chart-legend-text">Blue Legend</span>
                </div>
                <div class="kc-chart-legend">
                    <span class="kc-chart-dot kc-chart-dot--orange"></span>
                    <span class="kc-chart-legend-text">Orange Legend</span>
                </div>
                <div class="kc-chart-legend">
                    <span class="kc-chart-dot kc-chart-dot--red"></span>
                    <span class="kc-chart-legend-text">Red Legend</span>
                </div>
                <div class="kc-chart-legend">
                    <span class="kc-chart-dot kc-chart-dot--green"></span>
                    <span class="kc-chart-legend-text">Green Legend</span>
                </div>
                <div class="kc-chart-legend">
                    <span class="kc-chart-dot kc-chart-dot--yellow"></span>
                    <span class="kc-chart-legend-text">Yellow Legend</span>
                </div>
                <div class="kc-chart-legend">
                    <span class="kc-chart-dot kc-chart-dot--purple"></span>
                    <span class="kc-chart-legend-text">Purple Legend</span>
                </div>
                <div class="kc-chart-legend">
                    <span class="kc-chart-dot kc-chart-dot--sky"></span>
                    <span class="kc-chart-legend-text">Sky Legend</span>
                </div>
                <div class="kc-chart-legend">
                    <span class="kc-chart-dot kc-chart-dot--pink"></span>
                    <span class="kc-chart-legend-text">Pink Legend</span>
                </div>
                <div class="kc-chart-legend">
                    <span class="kc-chart-dot kc-chart-dot--teal"></span>
                    <span class="kc-chart-legend-text">Teal Legend</span>
                </div>
                <div class="kc-chart-legend kc-chart-legend--disabled">
                    <span class="kc-chart-dot kc-chart-dot--disabled"></span>
                    <span class="kc-chart-legend-text">Disabled</span>
                </div>
            </div>

key-components Component

Key Components

Label Component

Basic Labels

Content Label - Medium Size (40px)

Content Label - Large Size (48px)

Content Card

Hint Text States

Password Strength Indicators

Empty State

Weak Password

Moderate Password

Strong Password

Key Icons - Stroke Style

Key Icons - Lighter Style

Key Icons - Size Variants

Payment Icons

Chart Legends