View on GitHub

Labels

The labels component in web design provides a framework to display small images within a structured box layout. It’s an efficient method for presenting visual content in a neat, organized, and easily navigable format.

On this page

Usage

html

<div class="labels">
  <div class="labels-item">
    <figure><img src="..." alt="..."></figure>
  </div>
  <div class="labels-item">
    <figure><img src="..." alt="..."></figure>
  </div>
  <div class="labels-item">
    <figure><img src="..." alt="..."></figure>
  </div>
  <span class="labels-label">+1</span>
</div>

CSS

Variables

src/scss/_labels.scss

--#{$prefix}labels-gap: #{$labels-gap};
--#{$prefix}labels-padding: #{$labels-padding};
--#{$prefix}labels-bg: #{$labels-bg};
--#{$prefix}labels-border-width: #{$labels-border-width};
--#{$prefix}labels-border-color: #{$labels-border-color};
--#{$prefix}labels-border-radius: #{$labels-border-radius};
--#{$prefix}labels-box-shadow: #{$labels-box-shadow};
--#{$prefix}labels-item-width: #{$labels-item-width};
--#{$prefix}labels-item-height: #{$labels-item-height};
--#{$prefix}labels-item-padding: #{$labels-item-padding};
--#{$prefix}labels-item-bg: #{$labels-item-bg};
--#{$prefix}labels-item-border-style: #{$labels-item-border-style};
--#{$prefix}labels-item-border-width: #{$labels-item-border-width};
--#{$prefix}labels-item-border-color: #{$labels-item-border-color};
--#{$prefix}labels-item-border-radius: #{$labels-item-border-radius};
--#{$prefix}labels-item-box-shadow: #{$labels-item-box-shadow};
--#{$prefix}labels-label-padding: #{$labels-label-padding};
--#{$prefix}labels-label-font-size: #{$labels-label-font-size};
--#{$prefix}labels-label-font-weight: #{$labels-label-font-weight};
--#{$prefix}labels-label-color: #{$labels-label-color};
--#{$prefix}labels-label-text-decoration: #{$labels-label-text-decoration};

Sass variables

src/scss/_variables.scss

$labels-gap: .25rem;
$labels-padding: .25rem;
$labels-bg: var(--#{$prefix}body-bg);
$labels-border-width: var(--#{$prefix}border-width);
$labels-border-color: var(--#{$prefix}border-color);
$labels-border-radius: var(--#{$prefix}border-radius);
$labels-box-shadow: var(--#{$prefix}box-shadow-sm);

$labels-item-padding: null;
$labels-item-bg: var(--#{$prefix}gray-100);
$labels-item-border-style: null;
$labels-item-border-width: null;
$labels-item-border-color: null;
$labels-item-border-radius: var(--#{$prefix}border-radius);
$labels-item-box-shadow: null;
$labels-item-width: 36px;
$labels-item-height: 36px;

$labels-label-padding: .5rem;
$labels-label-font-size: 1rem;
$labels-label-font-weight: 700;
$labels-label-color: null;
$labels-label-text-decoration: underline;