Reminder: Web Accessibility Compliance Law in effect

The new Colorado accessibility law, HB21-1110, affects university websites and went into effect July 1, 2024. This means that university website owners/content managers must ensure your website content meets the minimum web accessibility standards.

Learn how to meet accessibility standards

Search and Filter Content Type


The search and filter content type provides a versatile way to display a lot of information using a list, card, or accordion design with flexible content fields, search, and filter options. This robust content type is designed to meet a variety of website editor needs for displaying information, similar to a knowledge base.

To use this content type, you will first need to build search and filter items in the Content tab of Sitefinity. Then, you will use the search and filter widget to display the items on a page.

Design


There are three design options for displaying the search and filter content type. Examples of the design templates are below:

Search and filter list

Search programs

Filter results by:

Program 1

Area of Interest: Math Science Grade Level: High School Location: Denver
Web Services | websitehelp@ucdenver.edu
Lorem ipsum odor amet, consectetuer adipiscing elit. Volutpat dui pulvinar turpis habitasse hendrerit sed. Maximus dapibus laoreet sit montes eget justo. Dui pellentesque mattis mus nunc nostra donec felis. Potenti iaculis platea vestibulum lorem ad nibh. Elit lacus ullamcorper est malesuada erat rutrum ultrices.
Program info

Program 2

Area of Interest: Fitness Health Cost: Free Location: CU Anschutz Medical Campus
Lorem ipsum odor amet, consectetuer adipiscing elit. Cursus rutrum at primis eget sagittis nascetur leo. Class lacus curabitur iaculis mus ex; aenean magna.
See full details

Program 3

Area of Interest: Science Grade Level: High School Cost: $
Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate justo sapien adipiscing porta varius nec. Vulputate semper rutrum mattis; platea est nulla aenean placerat odio. Leo cubilia justo arcu inceptos nisi tempor. Blandit cursus nisl volutpat vehicula viverra ridiculus leo nisi.

Search and filter card

Search studies

Filter results by:

Stock photo of universe

Study 1

Topic: Space Types of Research: Theoretical Principal Investigator: Tarah Dykeman
Instantaneous astral travel to any point in the universe is now possible via the implementation of stabilized vibrational resonance, in sympathetic resonance with intrinsic healing frequencies to elicit astral holographic projection.
Study info
Example photo of a student using lab equipment

Study 2

Topic: Science Types of Research: Medicine
Lorem ipsum odor amet, consectetuer adipiscing elit. Aelementum aliquet curabitur; mus egestas felis.
Study info

Study 3

Topic: Health Science Types of Research: Academic
Lorem ipsum odor amet, consectetuer adipiscing elit. Accumsan velit posuere vel rhoncus ultrices eget torquent class. Integer vulputate class auctor, suspendisse et dis eleifend primis nunc. Aliquet luctus cras duis vestibulum amet.
See full details

Search and filter accordion

Search

Filter results by:

Web Services | websitehelp@ucdenver.edu
Lorem ipsum odor amet, consectetuer adipiscing elit. Volutpat dui pulvinar turpis habitasse hendrerit sed. Maximus dapibus laoreet sit montes eget justo. Dui pellentesque mattis mus nunc nostra donec felis. Potenti iaculis platea vestibulum lorem ad nibh. Elit lacus ullamcorper est malesuada erat rutrum ultrices.
Program info
Lorem ipsum odor amet, consectetuer adipiscing elit. Cursus rutrum at primis eget sagittis nascetur leo. Class lacus curabitur iaculis mus ex; aenean magna.
Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate justo sapien adipiscing porta varius nec. Vulputate semper rutrum mattis; platea est nulla aenean placerat odio. Leo cubilia justo arcu inceptos nisi tempor. Blandit cursus nisl volutpat vehicula viverra ridiculus leo nisi.

How to


To use the search and filter content type, you will first need to build search and filter items in the Content tab in Sitefinity. Then, you will add the search and filter widget to a page to display the items.

Create search and filter items

1. Open the Content tab at the top of Sitefinity and select "Search and Filter".

2. Select the "Create a search and filter" button at the top right of the page.

3. Enter the title for your item.

4. Under Type, select the plus button and pick your item type.

Select an item type from the available options after clicking plus button under Type field

5. Fill out the remainder of the fields as applicable, such as:

  • Subtitle
  • Description
  • Add an image
  • Call to action button
  • Add a document/file

6. Once you get to the Filters and Tagging section, select the plus button under each filter category to pick an existing tag or add a new one.

Select plus button under filter options to select or add new tags

To add a new tag, type out the name of your tag and then enter/return on your keyboard.

Example tag

Note: If the filter category options aren't meeting your needs, try out a different item type (see step 4). If none of the item types meet your needs, please let us know what's missing at websitehelp@ucdenver.edu.

7. Repeat steps 2-6 until all of your search and filter items have been created.

Use the widget

Now that you have added search and filter content, you can add the items to your webpage using the search and filter widget.

1. Go to the Pages tab at the top of Sitefinity and select a page to edit.

2. Drag the search and filter widget from the content panel onto the page.

Search and filter widget in content panel of page editing view

3. Select "Edit" at the top right of the search and filter widget.

4. By default, all of your site's search and filter items will display in the widget. Instead, you can select specific search and filter items.

Use the

5. Next, go to the List Settings tab at the top of the window. Here you can adjust the pagination, the sort order of the items, and the template. 

The "search and filter" template allows you to choose between list and card designs. Or you can use the "search and filter accordion" template.

List settings window displaying pagination, sort order, and list template options

6. Select the "List Options" button to add a custom search box label, select the search and filter type, and adjust which fields are displayed.

List options window with the option to enter a search box label, select the content type, select fields to display and additional options.

7. Select the "Filter" button at the bottom of the window for the following settings:

  • Enable the search box
  • Select the search and filter type and which filters to display
  • Select the position of the filter (at the top or to the side of the widget)
  • Display the widget as a list or card design template by default
Filter settings window displaying options to enable text search, select the content type and which filters to display, where to position the filters, and which design template to load

8. Save your changes.

CMS Login