Lozenge

<span class="lozenge">feature</span>
<span class="lozenge">{{ lozenge.text }}</span>
{
  "lozenge": {
    "text": "feature"
  }
}
  • Content:
    /*
      Lozenge
    */
    .lozenge {
      display: inline;
      padding: .25rem .5rem .2rem;
      margin: 0 .2rem 0 0;
      list-style: none;
      border-radius: .599609375rem; 
      font-style: normal;
      font-size: .625rem;
      font-family: $font-stack-sans;
      line-height: 1;
      letter-spacing: .6px;
      text-transform: uppercase;
      background: #e0e5ee;
      color: rgba(0,0,0,.6);
    }
    
    
  • URL: /components/raw/lozenge/_sass.scss
  • Filesystem Path: components/02-modules/text/lozenge/_sass.scss
  • Size: 352 Bytes

Lozenge

Use lozenges for label and tags.