Additional color and size options for labels

Inspect the full details and code of a selected snippet

<div class="uk-flex-1 uk-flex">
  <div class="uk-container uk-container-small uk-flex-1 uk-flex uk-flex-column uk-margin-medium-top uk-margin-medium-bottom">
    <div class="uk-flex-1 uk-flex uk-flex-column uk-flex-center">
      <div class="uk-width-1-1">
        <div class="uk-text-small uk-text-muted uk-text-uppercase uk-text-semibold uk-margin-small-bottom">Additional color and size options for label</div>
        <div class="uk-card uk-card-default uk-box-shadow-remove uk-padding-small uk-border-rounded">
          
          <div class="uk-margin-small-top uk-text-bold">Default</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-child-width-1-6@l uk-child-width-1-3@m uk-child-width-1-2 uk-grid-small uk-text-center" uk-grid>
              <div><span class="uk-label">Default</span></div>
              <div><span class="uk-label uk-label-primary">Primary</span></div>
              <div><span class="uk-label uk-label-secondary">Secondary</span></div>
              <div><span class="uk-label uk-label-success">Success</span></div>
              <div><span class="uk-label uk-label-warning">Warning</span></div>
              <div><span class="uk-label uk-label-danger">Danger</span></div>
            </div>          
          </div>
          <div class="uk-margin-small-top uk-text-bold">Outline</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-child-width-1-6@l uk-child-width-1-3@m uk-child-width-1-2 uk-grid-small uk-text-center" uk-grid>
              <div><span class="uk-label uk-label-outline">Default</span></div>
              <div><span class="uk-label uk-label-primary-outline">Primary</span></div>
              <div><span class="uk-label uk-label-secondary-outline">Secondary</span></div>
              <div><span class="uk-label uk-label-success-outline">Success</span></div>
              <div><span class="uk-label uk-label-warning-outline">Warning</span></div>
              <div><span class="uk-label uk-label-danger-outline">Danger</span></div>
            </div>
          </div>
          <div class="uk-margin-small-top uk-text-bold">Size (small & mini)</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-child-width-1-6@l uk-child-width-1-3@m uk-child-width-1-2 uk-grid-small uk-text-center" uk-grid>
              <div><span class="uk-label uk-label-small">Default</span></div>
              <div><span class="uk-label uk-label-small uk-label-primary">Primary</span></div>
              <div><span class="uk-label uk-label-small uk-label-secondary">Secondary</span></div>
              <div><span class="uk-label uk-label-mini uk-label-success">Success</span></div>
              <div><span class="uk-label uk-label-mini uk-label-warning">Warning</span></div>
              <div><span class="uk-label uk-label-mini uk-label-danger">Danger</span></div>
            </div>
          </div>
          
        </div>
      </div>
      <div class="uk-text-mini uk-text-right">made by <b>Antonius</b></div>
    </div>
  </div>
</div>

/* Snippets style */
body { background-color: #ebebeb; }
.uk-box-shadow-remove { box-shadow: none; }
.uk-text-mini { font-size: 8px; }
/* Style */
:root {
  --color-disabled: #d1d5db;
  --color-default: #6b7280;
  --color-default-active: #374151;
  --color-primary: #3b82f6;
  --color-primary-active: #1d4ed8;
  --color-secondary: #6366f1;
  --color-secondary-active: #4338ca;
  --color-success: #22c55e;
  --color-success-active: #15803d;
  --color-warning: #f59e0b;
  --color-warning-active: #b45309;
  --color-danger: #ef4444;
  --color-danger-active: #b91c1c;
}
/* Size */
.uk-label-small {
  font-size: 0.75rem;
  line-height: 1.5;
}
.uk-label-mini {
  font-size: 0.65rem;
  line-height: 1.5;
}
/* Default style*/
.uk-label {
  background-color: var(--color-default) !important;
}
.uk-label-primary {
  background-color: var(--color-primary) !important;
}
.uk-label-secondary {
  background-color: var(--color-secondary) !important;
}
.uk-label-success {
  background-color: var(--color-success) !important;
}
.uk-label-warning {
  background-color: var(--color-warning) !important;
}
.uk-label-danger {
  background-color: var(--color-danger) !important;
}
/* Outline */
span[class*="-outline"] {
  background: #FFFFFF !important;
}
.uk-label-outline {
  color: var(--color-default) !important;
  border: solid 1px var(--color-default) !important;
}
.uk-label-primary-outline {
  color: var(--color-primary) !important;
  border: solid 1px var(--color-primary) !important;
}
.uk-label-secondary-outline {
  color: var(--color-secondary) !important;
  border: solid 1px var(--color-secondary) !important;
}
.uk-label-success-outline {
  color: var(--color-success) !important;
  border: solid 1px var(--color-success) !important;
}
.uk-label-warning-outline {
  color: var(--color-warning) !important;
  border: solid 1px var(--color-warning) !important;
}
.uk-label-danger-outline {
  color: var(--color-danger) !important;
  border: solid 1px var(--color-danger) !important;
}

Information

Detailed overview of a selected code snippet

antonius

20.03.2025, 01:39:33

28.03.2025, 11:14:12

uk-border, uk-box, uk-card, uk-child, uk-container, uk-flex, uk-grid, uk-label, uk-margin, uk-padding, uk-placeholder, uk-text, uk-width

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!