<span class="lozenge lozenge--programme lozenge--programme__musicals-and-opera">Musicals and Opera</span>
<span class="{{ class|join(' ') }}">{{ text }}</span>
{
"text": "Musicals and Opera",
"class": [
"lozenge",
"lozenge--programme",
"lozenge--programme__musicals-and-opera"
]
}
.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;
}
}
No notes defined.