<div class="popular-searches">
    <section class="popular-searches-group">
        <h6>Popular searches</h6>
        <div class="popular-searches-item">
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link three has a lot of text</a></li>
                <li><a href="#">Link 4 text goes here</a></li>
                <li><a href="#">Finally, Link 5</a></li>
            </ul>
        </div>
    </section>
</div>
<div class="popular-searches">
    <section class="popular-searches-group">
        <h6>{{ title }}</h6>
        <div class="popular-searches-item">
            <ul>
            {% for link in links %}
                <li><a href="{{ link.href }}">{{ link.label }}</a></li>
            {% endfor %}
            </ul>
        </div>
    </section>
</div>
{
  "filterGroups": [
    {
      "title": "Filter by result type",
      "filters": [
        {
          "label": "Course",
          "count": 2,
          "checked": true,
          "tag": "result-type-course"
        },
        {
          "label": "News",
          "count": 2,
          "tag": "result-type-news"
        },
        {
          "label": "Online",
          "count": 10,
          "tag": "result-type-online"
        },
        {
          "label": "Foundation",
          "count": null,
          "tag": "result-type-foundation"
        },
        {
          "label": "Part-time",
          "count": 2,
          "tag": "result-type-part-time"
        }
      ]
    },
    {
      "title": "Filter by result type",
      "id": "result-type",
      "type": "dropdown",
      "filters": [
        {
          "label": "Course",
          "count": 2,
          "checked": true,
          "tag": "result-type-course"
        },
        {
          "label": "News",
          "count": 2,
          "tag": "result-type-news"
        },
        {
          "label": "Online",
          "count": 10,
          "tag": "result-type-online"
        },
        {
          "label": "Foundation",
          "count": null,
          "tag": "result-type-foundation"
        },
        {
          "label": "Part-time",
          "count": 2,
          "tag": "result-type-part-time"
        }
      ]
    },
    {
      "title": "Filter by result type",
      "id": "result-type",
      "type": "radio",
      "filters": [
        {
          "label": "Course",
          "count": 2,
          "checked": true,
          "tag": "result-type-course"
        },
        {
          "label": "News",
          "count": 2,
          "tag": "result-type-news"
        },
        {
          "label": "Online",
          "count": 10,
          "tag": "result-type-online"
        },
        {
          "label": "Foundation",
          "count": null,
          "tag": "result-type-foundation"
        },
        {
          "label": "Part-time",
          "count": 2,
          "tag": "result-type-part-time"
        }
      ]
    },
    {
      "title": "Filter group title",
      "filters": [
        {
          "label": "Filter selected",
          "count": 2,
          "checked": true,
          "tag": "result-group-selected"
        },
        {
          "label": "Filter unselected with title that wraps to new line",
          "count": 10,
          "tag": "result-group-long"
        },
        {
          "label": "Online",
          "count": 10,
          "tag": "result-group-online"
        },
        {
          "label": "No matching results",
          "count": null,
          "tag": "result-group-no-matching"
        }
      ]
    },
    {
      "title": "Filter by study option",
      "filters": [
        {
          "label": "Undergraduate",
          "count": 2,
          "checked": true,
          "tag": "result-study-option-undergrad"
        },
        {
          "label": "Postgraduate",
          "count": 2,
          "tag": "result-study-option-postgrad"
        },
        {
          "label": "Online",
          "count": 10,
          "tag": "result-study-option-online"
        },
        {
          "label": "Foundation",
          "count": null,
          "tag": "result-study-option-foundation"
        },
        {
          "label": "Part-time",
          "count": 2,
          "tag": "result-study-option-part-time"
        }
      ]
    }
  ],
  "title": "Popular searches",
  "links": [
    {
      "label": "Link 1",
      "href": "#"
    },
    {
      "label": "Link 2",
      "href": "#"
    },
    {
      "label": "Link three has a lot of text",
      "href": "#"
    },
    {
      "label": "Link 4 text goes here",
      "href": "#"
    },
    {
      "label": "Finally, Link 5",
      "href": "#"
    }
  ]
}
  • Content:
    .popular-searches {
        @include full-bleed-inset;
        display: none;
        font-family: $header-font;
        font-size: 16px;
        @include for-tablet-landscape-up {
            display: block;
            padding: 0;
        }
        
        &-group {
            margin-bottom: px-to-em(10, 16);
            background: $light-grey;
            padding: px-to-em(20, 16);
        }
    
        &-item {
    
            ul {
                margin: 0;
                padding: 0;
            }
            
            li {
                margin: 0 0 px-to-em(12);
                list-style-type: none;
    
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
    
  • URL: /components/raw/popular-searches/popular-searches.scss
  • Filesystem Path: components/components/search-results/popular-searches/popular-searches.scss
  • Size: 619 Bytes
  • Handle: @popular-searches
  • Preview:
  • Filesystem Path: components/components/search-results/popular-searches/popular-searches.twig

Popular searches

Displays hyperlinks to other popular or related searches in the search results page. Designed as a panel to be displayed below the search result filters. Does not adapt its behaviour to different screen resolutions as the search filters do, and contains no javascript-based functionality or media queries.

Key Features

  • Displays a panel with a title and a series of links.

Properties

  • title [String]
  • links [Array of LinkObject]

LinkObject

  • label [required, string]
  • href [required, string]