Tangible Pattern Library

Chip: Default 

<div class="c-chip">
    <p class="c-chip__text">Chip label for industry</p>
</div>
 
<div class="c-chip{% if modifier is defined %} {{ modifier }}{% endif %}">
  <p class="c-chip__text">{{ text }}</p>
</div>
 
{
  "text": "Chip label for industry",
  "url": "#"
}
  • Content: 
    .c-chip {
  display: inline-block;
  border-radius: radius(radius-24);
  background-color: useHSL(--geyser-blue);
  padding: spacing(space-8) spacing(space-16);
  color: useHSL(--primary-100);
  @include font-scale(level-2, $font-secondary, regular);
}

/*------------------------------------*
  Clickable
*------------------------------------*/
.c-chip--clickable {
  @include font-scale(level-1, $font-secondary, regular);
  padding: spacing(space-2) spacing(space-16) spacing(space-6);
  text-underline-offset: spacing(space-2);
}
  • URL: /components/raw/chip/_chip.scss
  • Filesystem Path: src/pattern-library/02-components/chip/_chip.scss
  • Size: 535 Bytes

No notes defined.