Wesentlichkeitsanzeiger 

.materiality-indicator {
    border-radius: 1em;
    display: inline-block;
    height: 1.2em;
    text-indent: -200vw;
    width: 1.2em;
}

@each $color, $value in $theme-colors {
    .materiality-indicator--#{$color} {
        background-color: $value;
    }
}

Varianten

Standard

Wesentlich Unwesentlich Offen 
<span class="materiality-indicator materiality-indicator--material" title="Wesentlich">
    Wesentlich
</span>

<span class="materiality-indicator materiality-indicator--not-material" title="Unwesentlich">
    Unwesentlich
</span>

<span class="materiality-indicator materiality-indicator--open-material" title="Offen">
    Offen
</span>

Varianten