Component documentation

Basics

Components

Objects

Utilities

Filter pill

<div style="min-height: 36rem;">
    <button class="c-filter-pill" type="button" data-popover="filter-example" data-popover-placement="bottom-start">
        <span class="c-filter-pill__label">Label</span>
        <span class="c-filter-pill__counter">2</span>
        <div class="o-svg-icon o-svg-icon-caret-down  ">
            <svg width="12" height="24" viewBox="0 0 12 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11 10L6 16L1 10H11Z" fill="#595959" />
            </svg>
        </div>
    </button>
    <div class="c-popover" role="popover" id="filter-example">
        <h4 class="c-h4">Label</h4>
        <div class="u-padding-vertical-s">
            <div class="o-form-group-layout o-form-group-layout--standard">
                <div class="o-form-group">
                    <div class="o-form-group__controls">
                        <div class="c-checkbox-group">
                            <div class="c-checkbox">
                                <label>
                                    <input type="checkbox" />Checkbox
                                </label>
                            </div>
                            <div class="c-checkbox">
                                <label>
                                    <input type="checkbox" checked="checked" />Checkbox
                                </label>
                            </div>
                            <div class="c-checkbox">
                                <label>
                                    <input type="checkbox" checked="checked" />Checkbox
                                </label>
                            </div>
                            <div class="c-checkbox">
                                <label>
                                    <input type="checkbox" />Checkbox
                                </label>
                            </div>
                            <div class="c-checkbox">
                                <label>
                                    <input type="checkbox" />Checkbox
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-toolbar c-toolbar--auto">
            <div class="c-toolbar__right">
                <div class="c-toolbar__item">
                    <div class="c-button-toolbar">
                        <button class="c-button c-button--secondary" type="button">
                            <span class="c-button__content">
                                <span class="c-button__label">Reset</span>
                            </span>
                        </button>
                        <button class="c-button c-button--primary" type="button">
                            <span class="c-button__content">
                                <span class="c-button__label">Apply filter</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

div(style="min-height: 36rem;")
    +c-filter-pill({counter: '2'})(data-popover="filter-example" data-popover-placement="bottom-start") Label

    .c-popover(role="popover" id="filter-example")
        h4.c-h4 Label

        .u-padding-vertical-s
            .o-form-group-layout.o-form-group-layout--standard
                .o-form-group
                    .o-form-group__controls
                        .c-checkbox-group
                            .c-checkbox
                                label
                                    input(type="checkbox")
                                    | Checkbox
                            .c-checkbox
                                label
                                    input(type="checkbox" checked)
                                    | Checkbox
                            .c-checkbox
                                label
                                    input(type="checkbox" checked)
                                    | Checkbox
                            .c-checkbox
                                label
                                    input(type="checkbox")
                                    | Checkbox
                            .c-checkbox
                                label
                                    input(type="checkbox")
                                    | Checkbox

        .c-toolbar.c-toolbar--auto
            .c-toolbar__right
                .c-toolbar__item
                    .c-button-toolbar
                        +c-button({}) Reset
                        +c-button({skin: 'primary'}) Apply filter

Filter pill list

<ul class="c-filter-pill-list">
    <li class="c-filter-pill-list__item">
        <button class="c-filter-pill" type="button">
            <span class="c-filter-pill__label">Label</span>
            <div class="o-svg-icon o-svg-icon-caret-down  ">
                <svg width="12" height="24" viewBox="0 0 12 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11 10L6 16L1 10H11Z" fill="#595959" />
                </svg>
            </div>
        </button>
    </li>
    <li class="c-filter-pill-list__item">
        <button class="c-filter-pill" type="button">
            <span class="c-filter-pill__label">Label</span>
            <span class="c-filter-pill__counter">2</span>
            <div class="o-svg-icon o-svg-icon-caret-down  ">
                <svg width="12" height="24" viewBox="0 0 12 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11 10L6 16L1 10H11Z" fill="#595959" />
                </svg>
            </div>
        </button>
    </li>
    <li class="c-filter-pill-list__item">
        <button class="c-filter-pill" type="button">
            <span class="c-filter-pill__label">Label</span>
            <div class="o-svg-icon o-svg-icon-caret-down  ">
                <svg width="12" height="24" viewBox="0 0 12 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11 10L6 16L1 10H11Z" fill="#595959" />
                </svg>
            </div>
        </button>
    </li>
</ul>

ul.c-filter-pill-list
    li.c-filter-pill-list__item
        +c-filter-pill({}) Label
    li.c-filter-pill-list__item
        +c-filter-pill({counter: '2'}) Label
    li.c-filter-pill-list__item
        +c-filter-pill({}) Label