Pills

Status pills

Status pills .pill with (optional) icons and statuscolors.

Default

<span class="pill">Default</span>

.pill.pill--success

Success

<span class="pill pill--success"><i class="bicon bicon-check-circle" aria-hidden="true"></i> Success</span>

.pill.pill--success.pill--inverted

Success

<span class="pill pill--success pill--inverted"><i class="bicon bicon-check-circle" aria-hidden="true"></i> Success</span>

.pill.pill--error

Error

<span class="pill pill--error"><i class="bicon bicon-times-circle" aria-hidden="true"></i> Error</span>

.pill.pill--error.pill--inverted

Error

<span class="pill pill--error pill--inverted"><i class="bicon bicon-times-circle" aria-hidden="true"></i> Error</span>

.pill.pill--info

Info

<span class="pill pill--info"><i class="bicon bicon-info-circle" aria-hidden="true"></i> Info</span>

.pill.pill--info.pill--inverted

Info

<span class="pill pill--info pill--inverted"><i class="bicon bicon-info-circle" aria-hidden="true"></i> Info</span>

.pill.pill--message

Message

<span class="pill pill--message"><i class="bicon bicon-info-circle" aria-hidden="true"></i> Message</span>

.pill.pill--message.pill--inverted

Message

<span class="pill pill--message pill--inverted"><i class="bicon bicon-info-circle" aria-hidden="true"></i> Message</span>

Filterpills

Filterpills are bigger than status pills and have a fixed active color.

Filter active dismissible

    <span class="pill pill--filter pill--big active">
        Filter active dismissible
        <a href="#link_to_target_page" class="pill-remove" aria-label="Filter ‚Filter active dismissible‘ entfernen">
            <i class="bicon bicon-times filter-close" aria-hidden="true"></i>
        </a>
    </span>

Filter disabled

    <span class="pill pill--filter pill--big">
        Filter disabled
    </span>