<span class="lozenge lozenge--programme lozenge--programme__theatre">Theatre</span>
<span class="{{ class|join(' ') }}">{{ text }}</span>
{
  "text": "Theatre",
  "class": [
    "lozenge",
    "lozenge--programme",
    "lozenge--programme__theatre"
  ]
}
  • Content:
    .lozenge {
      display: inline-block;
      background-color: $gray-200;
      padding: 0.125rem 0.5rem;
      border-bottom-right-radius: 0.5rem;
      border-top-left-radius: 0.5rem;
    
      &--programme {
        font-size: 0.8rem;
        text-transform: uppercase;
    
        @each $name, $hex in $genre-colours {
          &__#{$name} {
            background-color: $hex;
            color: $white;
          }
        }
    
        &__family {
          color: inherit;
        }
      }
    
      &--content {
        background-color: $primary;
      }
    }
  • URL: /components/raw/lozenge/lozenge.scss
  • Filesystem Path: src/components/01-elements/lozenge/lozenge.scss
  • Size: 473 Bytes
  • Handle: @lozenge--programme-theatre
  • Preview:
  • Filesystem Path: src/components/01-elements/lozenge/lozenge.html.twig

No notes defined.