Filter

Ready Added in 2.0.0

Filter or sort items in any given layout by metadata.

The Filter component is often used together with the Grid component, especially the masonry grid, but it’s not bound to it. Any layout can be filtered or sorted no matter how the items are positioned. Items fade and move with smooth transitions between the different filtering and sorting states.

Usage

To apply this component, you need a container element with the gls-filter="target: SELECTOR" attribute. Inside this container create a list of filter controls as well as the layout items you want to filter. Use the target: SELECTOR option to select the element containing the layout items.

<div gls-filter="target: .js-filter">

    <!-- Filter controls -->
    <ul>
        <li><a href="#"></a></li>
    </ul>

    <!-- Layout items -->
    <ul class="js-filter">
        <li></li>
    </ul>

</div>

Next, we need to define the metadata for each layout item, for example which category the item belongs to. Use any HTML class or attribute to do so.

To apply a filter control, add the gls-filter-control attribute. To define the metadata that should be filtered, use the filter: SELECTOR option. The selector can be any CSS selector like an HTML class or an attribute you define for the layout items.

<div gls-filter="target: .js-filter">

    <ul>
        <li gls-filter-control="filter: .tag-primary"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li class="tag-primary"></li>
    </ul>

</div>

If target is the only option in the gls-filter attribute value, you can also use gls-filter="SELECTOR". The same applies to the filter control. If filter is the only option in the gls-filter-control attribute value, you can also use gls-filter-control="SELECTOR".

<div gls-filter=".js-filter">

    <ul>
        <li gls-filter-control=".tag-primary"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li class="tag-primary"></li>
    </ul>

</div>
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
  • <div gls-filter="target: .js-filter">

    <ul class="gls-subnav gls-subnav-pill">
        <li gls-filter-control=".tag-default"><a href="#">Default</a></li>
        <li gls-filter-control=".tag-primary"><a href="#">Primary</a></li>
        <li gls-filter-control=".tag-secondary"><a href="#">Secondary</a></li>
    </ul>

    <ul class="js-filter gls-child-width-1-2 gls-child-width-1-3@m gls-text-center" gls-grid>
        <li class="tag-default">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li class="tag-primary">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li class="tag-default">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li class="tag-default">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li class="tag-secondary">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li class="tag-secondary">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li class="tag-primary">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li class="tag-secondary">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li class="tag-primary">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li class="tag-default">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li class="tag-primary">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li class="tag-secondary">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
    </ul>

</div>

The Filter component comes unstyled, which allows you to use any of the other Gloss components to create the filter controls and layout items. For example, the Nav, Subnav and Tab components can be used to style the filter controls. Usually, the Grid component is used to create the item layout.

Animations

By default, the filter uses a slide animation for the items between the different filtering states. To apply a different animation, just add the animation option to the attribute.

Animation Description
slide Fade items out and in or slide them to their new position.
fade Fade all items out and in.
delayed-fade Fade items slightly delayed out and in. 
<div gls-filter="animation: fade">...</div>

<div gls-filter="target: .js-filter; animation: fade">

    <ul class="gls-subnav gls-subnav-pill">
        <li gls-filter-control=".tag-white"><a href="#">White</a></li>
        <li gls-filter-control=".tag-blue"><a href="#">Blue</a></li>
        <li gls-filter-control=".tag-black"><a href="#">Black</a></li>
    </ul>

    <ul class="js-filter gls-child-width-1-2 gls-child-width-1-3@m gls-text-center" gls-grid>
        <li class="tag-white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li class="tag-blue">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li class="tag-white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li class="tag-white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li class="tag-black">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li class="tag-black">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li class="tag-blue">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li class="tag-black">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li class="tag-blue">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li class="tag-white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li class="tag-blue">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li class="tag-black">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
    </ul>

</div>

Active state

Add the .gls-active class to a filter control, and the filter will be applied initially.

<li class="gls-active" gls-filter-control="[data-color='blue']">...</li>
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
  • <div gls-filter="target: .js-filter">

    <ul class="gls-subnav gls-subnav-pill">
        <li class="gls-active" gls-filter-control="[data-color='white']"><a href="#">Default</a></li>
        <li gls-filter-control="[data-color='blue']"><a href="#">Primary</a></li>
        <li gls-filter-control="[data-color='black']"><a href="#">Secondary</a></li>
    </ul>

    <ul class="js-filter gls-child-width-1-2 gls-child-width-1-3@m gls-text-center" gls-grid>
        <li data-color="white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li data-color="white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li data-color="white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li data-color="white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
    </ul>

</div>

Reset filter

To reset the filter and target all items, use the gls-filter-control attribute without any specified selector.

<li gls-filter-control>...</li>
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
  • <div gls-filter="target: .js-filter">

    <ul class="gls-subnav gls-subnav-pill">
        <li class="gls-active" gls-filter-control><a href="#">All</a></li>
        <li gls-filter-control="[data-color='white']"><a href="#">Default</a></li>
        <li gls-filter-control="[data-color='blue']"><a href="#">Primary</a></li>
        <li gls-filter-control="[data-color='black']"><a href="#">Secondary</a></li>
    </ul>

    <ul class="js-filter gls-child-width-1-2 gls-child-width-1-3@m gls-text-center" gls-grid>
        <li data-color="white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li data-color="white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li data-color="white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li data-color="white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
    </ul>

</div>

Metadata

Items can have different metadata for filtering. You just need to define the HTML classes or data attributes and create the corresponding CSS selectors for the filter controls. This example uses data attributes for the filter instead of HTML classes.

<div gls-filter="target: .js-filter">

    <ul>
        <li gls-filter-control="[data-tags*='blue']"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li data-tags="blue dark"></li>
    </ul>

</div>
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
  • <div gls-filter="target: .js-filter">

    <ul class="gls-subnav gls-subnav-pill">
        <li gls-filter-control="[data-tags*='white']"><a href="#">Default</a></li>
        <li gls-filter-control="[data-tags*='blue']"><a href="#">Primary</a></li>
        <li gls-filter-control="[data-tags*='black']"><a href="#">Secondary</a></li>
        <li gls-filter-control="[data-tags*='dark']"><a href="#">Dark Colors</a></li>
    </ul>

    <ul class="js-filter gls-child-width-1-2 gls-child-width-1-3@m gls-text-center" gls-grid>
        <li data-tags="white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li data-tags="blue dark">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li data-tags="white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li data-tags="white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li data-tags="black dark">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li data-tags="black dark">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li data-tags="blue dark">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li data-tags="black dark">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
        <li data-tags="blue dark">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li data-tags="white">
            <div class="gls-card gls-card-default gls-card-body">Item</div>
        </li>
        <li data-tags="blue dark">
            <div class="gls-card gls-card-primary gls-card-body">Item</div>
        </li>
        <li data-tags="black dark">
            <div class="gls-card gls-card-secondary gls-card-body">Item</div>
        </li>
    </ul>

</div>

Multiple Filters

Define different types of metadata and add any number of controls to filter them. The filter controls are exclusive, meaning just one criteria is filtered at a time.

<div gls-filter="target: .js-filter">

    <ul>
        <li gls-filter-control="[data-color='blue']"><a href="#"></a></li>
    </ul>

    <ul>
        <li gls-filter-control="[data-size='small']"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li data-color="blue" data-size="small"></li>
    </ul>

</div>
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
  • <div gls-filter="target: .js-filter">

    <div class="gls-grid-small gls-grid-divider gls-child-width-auto" gls-grid>
        <div>
            <ul class="gls-subnav gls-subnav-pill" gls-margin>
                <li class="gls-active" gls-filter-control><a href="#">All</a></li>
            </ul>
        </div>
        <div>
            <ul class="gls-subnav gls-subnav-pill" gls-margin>
                <li gls-filter-control="[data-color='white']"><a href="#">Default</a></li>
                <li gls-filter-control="[data-color='blue']"><a href="#">Primary</a></li>
                <li gls-filter-control="[data-color='black']"><a href="#">Secondary</a></li>
            </ul>
        </div>
        <div>
            <ul class="gls-subnav gls-subnav-pill" gls-margin>
                <li gls-filter-control="[data-size='small']"><a href="#">Small</a></li>
                <li gls-filter-control="[data-size='medium']"><a href="#">Medium</a></li>
                <li gls-filter-control="[data-size='large']"><a href="#">Large</a></li>
            </ul>
        </div>
    </div>

    <ul class="js-filter gls-child-width-1-2 gls-child-width-1-3@m gls-text-center" gls-grid="masonry: true">
        <li data-color="white" data-size="large">
            <div class="gls-card gls-card-default gls-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="small">
            <div class="gls-card gls-card-primary gls-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="white" data-size="medium">
            <div class="gls-card gls-card-default gls-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="white" data-size="small">
            <div class="gls-card gls-card-default gls-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="medium">
            <div class="gls-card gls-card-secondary gls-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="small">
            <div class="gls-card gls-card-secondary gls-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium">
            <div class="gls-card gls-card-primary gls-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="large">
            <div class="gls-card gls-card-secondary gls-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="large">
            <div class="gls-card gls-card-primary gls-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="white" data-size="large">
            <div class="gls-card gls-card-default gls-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium">
            <div class="gls-card gls-card-primary gls-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="small">
            <div class="gls-card gls-card-secondary gls-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
    </ul>

</div>

Groups

To filter items by multiple criteria at the same time, the filter controls need to be grouped. Just add the group: NAME option to the gls-filter-control attribute and define group names for the metadata.

<div gls-filter="target: .js-filter">

    <ul>
        <li gls-filter-control="filter: [data-color='blue']; group: color"><a href="#"></a></li>
        <li gls-filter-control="filter: [data-color='white']; group: color"><a href="#"></a></li>
    </ul>

    <ul>
        <li gls-filter-control="filter: [data-size='small']; group: size"><a href="#"></a></li>
        <li gls-filter-control="filter: [data-size='large']; group: size"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li data-color="blue" data-size="small"></li>
    </ul>

</div>
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
  • <div gls-filter="target: .js-filter">

    <div class="gls-grid-small gls-grid-divider gls-child-width-auto" gls-grid>
        <div>
            <ul class="gls-subnav gls-subnav-pill" gls-margin>
                <li class="gls-active" gls-filter-control><a href="#">All</a></li>
            </ul>
        </div>
        <div>
            <ul class="gls-subnav gls-subnav-pill" gls-margin>
                <li gls-filter-control="filter: [data-color='white']; group: data-color"><a href="#">Default</a></li>
                <li gls-filter-control="filter: [data-color='blue']; group: data-color"><a href="#">Primary</a></li>
                <li gls-filter-control="filter: [data-color='black']; group: data-color"><a href="#">Secondary</a></li>
            </ul>
        </div>
        <div>
            <ul class="gls-subnav gls-subnav-pill" gls-margin>
                <li gls-filter-control="filter: [data-size='small']; group: size"><a href="#">Small</a></li>
                <li gls-filter-control="filter: [data-size='medium']; group: size"><a href="#">Medium</a></li>
                <li gls-filter-control="filter: [data-size='large']; group: size"><a href="#">Large</a></li>
            </ul>
        </div>
    </div>

    <ul class="js-filter gls-child-width-1-2 gls-child-width-1-3@m gls-text-center" gls-grid="masonry: true">
        <li data-color="white" data-size="large">
            <div class="gls-card gls-card-default gls-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="small">
            <div class="gls-card gls-card-primary gls-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="white" data-size="medium">
            <div class="gls-card gls-card-default gls-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="white" data-size="small">
            <div class="gls-card gls-card-default gls-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="medium">
            <div class="gls-card gls-card-secondary gls-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="small">
            <div class="gls-card gls-card-secondary gls-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium">
            <div class="gls-card gls-card-primary gls-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="large">
            <div class="gls-card gls-card-secondary gls-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="large">
            <div class="gls-card gls-card-primary gls-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="white" data-size="large">
            <div class="gls-card gls-card-default gls-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium">
            <div class="gls-card gls-card-primary gls-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="small">
            <div class="gls-card gls-card-secondary gls-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="gls-position-center">Item</div>
            </div>
        </li>
    </ul>

</div>

Sorting

To sort items alphanumerically, just add the sort: ATTRIBUTE option to the gls-filter-control attribute and define the metadata attribute by which the items should be sorted. By default, items are sorted in ascending order. Add the order: desc to sort items in descending order.

<div gls-filter="target: .js-filter">

    <ul>
        <li gls-filter-control="sort: data-color"><a href="#"></a></li>
        <li gls-filter-control="sort: data-color; order: desc"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li data-color="blue"></li>
    </ul>

</div>
    • 2016-06-01
    • 2016-12-13
    • 2017-05-20
    • 2017-09-17
    • 2017-11-03
    • 2017-12-25
    • 2018-01-30
    • 2018-02-01
    • 2018-03-11
    • 2018-06-13
    • 2018-10-27
    • 2018-12-02
  • <div gls-filter="target: .js-filter">

    <ul class="gls-subnav gls-subnav-pill">
        <li class="gls-active" gls-filter-control="sort: data-date"><a href="#">Ascending</a></li>
        <li gls-filter-control="sort: data-date; order: desc"><a href="#">Descending</a></li>
    </ul>

    <ul class="js-filter gls-child-width-1-2 gls-child-width-1-3@m gls-text-center" gls-grid>
        <li data-date="2016-06-01">
            <div class="gls-card gls-card-default gls-card-body">2016-06-01</div>
        </li>
        <li data-date="2016-12-13">
            <div class="gls-card gls-card-primary gls-card-body">2016-12-13</div>
        </li>
        <li data-date="2017-05-20">
            <div class="gls-card gls-card-default gls-card-body">2017-05-20</div>
        </li>
        <li data-date="2017-09-17">
            <div class="gls-card gls-card-default gls-card-body">2017-09-17</div>
        </li>
        <li data-date="2017-11-03">
            <div class="gls-card gls-card-secondary gls-card-body">2017-11-03</div>
        </li>
        <li data-date="2017-12-25">
            <div class="gls-card gls-card-secondary gls-card-body">2017-12-25</div>
        </li>
        <li data-date="2018-01-30">
            <div class="gls-card gls-card-primary gls-card-body">2018-01-30</div>
        </li>
        <li data-date="2018-02-01">
            <div class="gls-card gls-card-secondary gls-card-body">2018-02-01</div>
        </li>
        <li data-date="2018-03-11">
            <div class="gls-card gls-card-primary gls-card-body">2018-03-11</div>
        </li>
        <li data-date="2018-06-13">
            <div class="gls-card gls-card-default gls-card-body">2018-06-13</div>
        </li>
        <li data-date="2018-10-27">
            <div class="gls-card gls-card-primary gls-card-body">2018-10-27</div>
        </li>
        <li data-date="2018-12-02">
            <div class="gls-card gls-card-secondary gls-card-body">2018-12-02</div>
        </li>
    </ul>

</div>

Masonry Grid

A filter is often applied to a Masonry grid. The filter transition works perfectly with any kind of layout no matter how the items are positioned. It even works with the Parallax option from the grid.

Here is a comprehensive example with a masonry grid:

    • A
    • B
    • C
    • D
    • E
    • F
    • G
    • H
    • I
    • J
    • K
    • L
  • <div gls-filter="target: .js-filter">

    <div class="gls-grid-small gls-flex-middle" gls-grid>
        <div class="gls-width-expand">

            <div class="gls-grid-small gls-grid-divider gls-child-width-auto" gls-grid>
                <div>
                    <ul class="gls-subnav gls-subnav-pill" gls-margin>
                        <li class="gls-active" gls-filter-control><a href="#">All</a></li>
                    </ul>
                </div>
                <div>
                    <ul class="gls-subnav gls-subnav-pill" gls-margin>
                        <li gls-filter-control="[data-color='white']"><a href="#">Default</a></li>
                        <li gls-filter-control="[data-color='blue']"><a href="#">Primary</a></li>
                        <li gls-filter-control="[data-color='black']"><a href="#">Secondary</a></li>
                    </ul>
                </div>
                <div>
                    <ul class="gls-subnav gls-subnav-pill" gls-margin>
                        <li gls-filter-control="[data-size='small']"><a href="#">Small</a></li>
                        <li gls-filter-control="[data-size='medium']"><a href="#">Medium</a></li>
                        <li gls-filter-control="[data-size='large']"><a href="#">Large</a></li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="gls-width-auto gls-text-nowrap">


            <span class="gls-active" gls-filter-control="sort: data-name"><a class="gls-icon-link" href="#" gls-icon="icon: arrow-down"></a></span>
            <span gls-filter-control="sort: data-name; order: desc"><a class="gls-icon-link" href="#" gls-icon="icon: arrow-up"></a></span>

        </div>
    </div>

    <ul class="js-filter gls-child-width-1-2 gls-child-width-1-3@m gls-text-center" gls-grid="masonry: true">
        <li data-color="white" data-size="large" data-name="A">
            <div class="gls-card gls-card-default gls-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="gls-position-center">A</div>
            </div>
        </li>
        <li data-color="blue" data-size="small" data-name="B">
            <div class="gls-card gls-card-primary gls-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="gls-position-center">B</div>
            </div>
        </li>
        <li data-color="white" data-size="medium" data-name="C">
            <div class="gls-card gls-card-default gls-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="gls-position-center">C</div>
            </div>
        </li>
        <li data-color="white" data-size="small" data-name="D">
            <div class="gls-card gls-card-default gls-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="gls-position-center">D</div>
            </div>
        </li>
        <li data-color="black" data-size="medium" data-name="E">
            <div class="gls-card gls-card-secondary gls-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="gls-position-center">E</div>
            </div>
        </li>
        <li data-color="black" data-size="small" data-name="F">
            <div class="gls-card gls-card-secondary gls-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="gls-position-center">F</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium" data-name="G">
            <div class="gls-card gls-card-primary gls-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="gls-position-center">G</div>
            </div>
        </li>
        <li data-color="black" data-size="large" data-name="H">
            <div class="gls-card gls-card-secondary gls-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="gls-position-center">H</div>
            </div>
        </li>
        <li data-color="blue" data-size="large" data-name="I">
            <div class="gls-card gls-card-primary gls-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="gls-position-center">I</div>
            </div>
        </li>
        <li data-color="white" data-size="large" data-name="J">
            <div class="gls-card gls-card-default gls-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="gls-position-center">J</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium" data-name="K">
            <div class="gls-card gls-card-primary gls-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="gls-position-center">K</div>
            </div>
        </li>
        <li data-color="black" data-size="small" data-name="L">
            <div class="gls-card gls-card-secondary gls-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="gls-position-center">L</div>
            </div>
        </li>
    </ul>

</div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option Value Default Description
target String '' The targeted list on which to apply the filter to.
selActive String, Boolean false A selector for the initially active filter controls.
animation String, Boolean ‘slide’ Animation mode: slide, fade, delayed-fade or false.
duration Number 250 Animation duration in milliseconds.

target is the Primary option and its key may be omitted, if it’s the only option in the attribute value.

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.filter(element, options);

Events

The following events will be triggered on elements with this component attached:

Name Description
beforeFilter Fires before the filter is applied.
afterFilter Fires after the filter has been applied.