Skip to main content

Display and styles

Common display and style options​

  1. List - (Default) Basic list style, supports many checkbox options and more
  2. Button - Styles Border, Background and Rounded
  3. Color Swatch - Square and Round display color swatch with settable size
  4. Thumbnail Swatch - Square and Round display thumbnail/image swatch settable size
  5. Select Box - HTML5 select box
  6. Native Select - Native select box
  7. Live Select - Live select box, an input with typed in values and search results for terms

List (Default)​

List looks like a one columned table having rows of checkboxes and terms. When a term is clicked it'll be marked as active. Term checkbox will appear checked and title will go bold.

Lists can be in two, three columns or can have inline terms. Lists can have hierarchy, multiselect, term count and more.

Button​

If you don't want to use checkboxes and need some buttons instead, use this style type. Buttons have configurable display and style and can easily adjust to your website style.

Buttons can be set to two, three columns or can be inline. Buttons support hierarchy fully, but display is more efficient with lists. Multiselect, term count and more are available for any display type, so for buttons too.

Color Swatch​

Color swatches are ususaly used for color attributes. They are configured with a color option. Design can be square or rounded, and you can set the size of the swatch. Interestin option is to activate Show labels. That way colors will not be shown as inline swatches, but more like a block list of colors with their names.

Colors are usualy square ratio, but you can choose two or three columned filter to get them to that size. Multiselect, term count and more are available for any display type, so here too.

Thumbnail Swatch​

Thumbnails are very versitile. Use any images and set the thumbnails. Design can be square or rounded, and you can set the size of the swatch. Interestin option is to activate Show labels. That way colors will not be shown as inline swatches, but more like a block list of thumbnails with their names. Also, ratio of the image is respected, so if the images are 100x50px they will appear in 2:1 ratio and not square.

tip

Use small resolution images here. Anything like 64x64px, 128x128px and similar works.

Select Box​

If you use this style you'll get a nice version of the HTML5 select box. HTML5 select box can have hierarchy, multiselect, term count and more.

Native Select​

The native select element is available. This is a common element in any operating system and is displayed as is nativly. Native select box can have hierarchy, multiselect, term count and more.

Live Select​

This select box is a basic input with type in search for the terms. It can be used if you have a truly large list of terms of if you just like that style. The Live Select can have hierarchy, multiselect, term count and more.