360Giving Design System - Components

Tag Element 

<span class="tag tag--data-wrangling tag--large" title="Data Wrangling">Data Wrangling</span>
 
<span class="tag tag--{{ tag.slug }}{% if tag.variant %} tag--{{ tag.variant }}{% endif %}" title="{{ tag.category }}">{{ tag.category }}</span>
 
{
  "tag": {
    "category": "Data Wrangling",
    "slug": "data-wrangling",
    "variant": "large"
  }
}
  • Content: 
    .tag {
  --tag-border-hsl: var(--base-hsl);
  --tag-text-hsl: var(--base-hsl);
  --tag-bg-hsl: var(--white-hsl);

  color: hsla(var(--tag-text-hsl), 1);
  border: 2px solid hsla(var(--tag-border-hsl), 1);
  display: inline-block;
  padding: 2px 24px 4px;
  border-radius: 24px;
  font-size: 1rem;
  font-weight: 400;
  background-color: hsla(var(--tag-bg-hsl), 1);
}

.tag:hover { cursor: pointer; }

.tag--large {
  padding: 4px 24px 6px;
  font-weight: 600;

  &:hover {
    --tag-text-hsl:   var(--white-hsl);
    --tag-bg-hsl:     var(--base-hsl);
  }

  &.tag--data-wrangling:hover { 
    --tag-bg-hsl: var(--teal-hsl); 
  }
  
  &.tag--data-literacy:hover {
    --tag-bg-hsl: var(--orange-hsl); 
  }
  
  &.tag--human-centered-design:hover { 
    --tag-bg-hsl: var(--red-hsl); 
  }
}

.tag--selected {
  --tag-border-hsl: var(--white-hsl);
  --tag-bg-hsl:     var(--base-hsl);

  &.tag--data-wrangling        { --tag-bg-hsl: var(--teal-dark-hsl); }
  &.tag--data-literacy         { --tag-bg-hsl: var(--orange-dark-hsl); }
  &.tag--human-centered-design { --tag-bg-hsl: var(--red-hsl); }
}

.tag--data-wrangling { 
  --tag-text-hsl: var(--teal-dark-hsl);
  --tag-border-hsl: var(--teal-hsl); 
}
.tag--data-literacy { 
  --tag-text-hsl: var(--orange-dark-hsl);
  --tag-border-hsl: var(--orange-hsl); 
}
.tag--human-centered-design {
  --tag-text-hsl: var(--red-hsl); 
  --tag-border-hsl: var(--red-hsl); 
}
  • URL: /components/raw/tag/tag.scss
  • Filesystem Path: src/components/02-elements/tag/tag.scss
  • Size: 1.4 KB

No notes defined.