Facets/Pills are used to filter information based on predefined groups or aspects of the data, e.g. to quickly see only unread messages or messages from today. Facets groups containing several facets for a given attribute are usually used together with grids and simple search for fast access to predefined filters. They allow the users to narrow the information space by selecting a desired facet of the information.

Common facets groups in Visma are e.g. Document type (All/Invoices/Expenses/Time sheets), Status (Active/Inactive/All), and Date (Last week/Last month/Last year/All). Read more about facets in the UX Guidelines.

Use when

  • Users need to filter large amounts of data in predefined ways.
  • Filtering or sorting on a single column is not enough (e.g. ”View open issues” that would show both ”Open” and ”Unresolved” issues in an issue tracker system)


Default state - .nav.nav-pills

Primary state - .nav.nav-pills.nav-pills-primary

<!-- Default state - .nav.nav-pills -->
<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Active</a></li>
  <li role="presentation"><a href="#">Normal</a></li>
  <li role="presentation"><a href="#">Normal</a></li>
  <li role="presentation" class="disabled"><a href="#">Disabled</a></li>

<!-- Primary state - .nav.nav-pills.nav-pills-primary -->
<ul class="nav nav-pills nav-pills-primary">