Search
What does it do?
- Allows the user to search for information across the West Midlands Combined Authority website
When to use it?
- When a user needs to find the information they need, which they cannot find through the main navigation
How it works
- Users should only be able to access the search function through the header by hovering or selecting the magnifying glass icon
- The search bar will appear in a dropdown along with the ‘I want to…’ feature, where users can access popular search queries
- Once a user submits their search query, they will be able to view the search results. They can sort and filter the search results on the search results page
Search bar
Component example
HTML Markup
<form class="wmre-search-bar">
<input aria-label="Search" type="search" class="wmre-search-bar__input wmre-fe-input" placeholder="Site search...">
<button class="wmre-search-bar__btn" types="submit">
<svg><title>Search</title><use xlink:href="#wmre-general-search" href="#wmre-general-search"></use></svg>
</button>
</form>
Sort
What does it do?
- This gives the user the option to sort search results by relevance or when a page was last updated
Component example
HTML Markup
<div class="wmre-search-sort wmre-fe-group">
<label class="wmre-fe-label" for="dropdown">
<h3>Sort by</h3>
</label>
<div class="wmre-fe-dropdown">
<select class="wmre-fe-dropdown__select" id="dropdown" name="dropdown">
<option value="" selected="selected">Choose from list</option>
<option value="1">Relevance</option>
<option value="2">Most recent</option>
<option value="3">Oldest</option>
</select>
</div>
</div>
Filter
What does it do?
- This gives the user the option to filter search results using a predetermined set of filters
When to use it?
- The filters will narrow down the search results by displaying pages which only match the filter criteria
- On mobile, the filter options will appear when a user clicks on the ‘Filter your results button’. This will trigger an overlay where users can select and apply filters. This is to reduce page size on smaller devices
Component example
HTML Markup
<!-- Mobile show filter button -->
<div class="wmre-hide-desktop">
<button class="wmre-btn wmre-btn--primary wmre-btn--block " id="show_filter_btn" aria-controls="search_filter" aria-expanded="false">
Filter your results
</button>
</div>
<div id="search_filter" class="wmre-search-filter">
<div class="wmre-search-filter__header">
<h3 class="wmre-search-filter__header-title">Filter</h3>
<a href="#" class="wmre-search-filter__clear-all wmre-hide-desktop">Clear all</a>
<a href="#" id="hide_filter_btn" class="wmre-search-filter__close">
<svg>
<title>Close</title>
<use xlink:href="#wmre-general-cross" href="#wmre-general-cross"></use>
</svg>
</a>
</div>
<div class="wmre-accordion">
<button aria-controls="accordion-Topic" class="wmre-accordion__summary-wrapper" aria-expanded="false">
<!-- accordion summary -->
<div class="wmre-accordion__summary">
<h4 class="wmre-accordion__summary-title wmre-m-b-none">Topic</h4>
</div>
<!-- plus icon -->
<svg class="wmre-accordion__icon">
<use xlink:href="#wmre-general-expand" href="#wmre-general-expand"></use>
</svg>
<!-- minus icon -->
<svg class="wmre-accordion__icon wmre-accordion__icon--minimise">
<use xlink:href="#wmre-general-minimise" href="#wmre-general-minimise"></use>
</svg>
</button>
<!-- accordion content -->
<div class="wmre-accordion__content" id="accordion-Topic">
<fieldset class="wmre-fe-fieldset">
<div class="wmre-fe-checkboxes">
<label class="wmre-fe-checkboxes__container">
Tickets
<input class="wmre-fe-checkboxes__input" value="Tickets" type="checkbox"/>
<span class="wmre-fe-checkboxes__checkmark">
<svg class="wmre-fe-checkboxes__icon">
<use xlink:href="#wmre-general-checkmark" href="#wmre-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmre-fe-checkboxes__container">
Travel advice
<input class="wmre-fe-checkboxes__input" value="Travel advice" type="checkbox"/>
<span class="wmre-fe-checkboxes__checkmark">
<svg class="wmre-fe-checkboxes__icon">
<use xlink:href="#wmre-general-checkmark" href="#wmre-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmre-fe-checkboxes__container">
Planning a journey
<input class="wmre-fe-checkboxes__input" value="Planning a journey" type="checkbox"/>
<span class="wmre-fe-checkboxes__checkmark">
<svg class="wmre-fe-checkboxes__icon">
<use xlink:href="#wmre-general-checkmark" href="#wmre-general-checkmark"></use>
</svg>
</span>
</label>
</div>
</fieldset>
</div>
</div>
<div class="wmre-accordion">
<button aria-controls="accordion-Page type" class="wmre-accordion__summary-wrapper" aria-expanded="false">
<!-- accordion summary -->
<div class="wmre-accordion__summary">
<h4 class="wmre-accordion__summary-title wmre-m-b-none">Page type</h4>
</div>
<!-- plus icon -->
<svg class="wmre-accordion__icon">
<use xlink:href="#wmre-general-expand" href="#wmre-general-expand"></use>
</svg>
<!-- minus icon -->
<svg class="wmre-accordion__icon wmre-accordion__icon--minimise">
<use xlink:href="#wmre-general-minimise" href="#wmre-general-minimise"></use>
</svg>
</button>
<!-- accordion content -->
<div class="wmre-accordion__content" id="accordion-Page type">
<fieldset class="wmre-fe-fieldset">
<div class="wmre-fe-checkboxes">
<label class="wmre-fe-checkboxes__container">
Services
<input class="wmre-fe-checkboxes__input" value="Services" type="checkbox"/>
<span class="wmre-fe-checkboxes__checkmark">
<svg class="wmre-fe-checkboxes__icon">
<use xlink:href="#wmre-general-checkmark" href="#wmre-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmre-fe-checkboxes__container">
News
<input class="wmre-fe-checkboxes__input" value="News" type="checkbox"/>
<span class="wmre-fe-checkboxes__checkmark">
<svg class="wmre-fe-checkboxes__icon">
<use xlink:href="#wmre-general-checkmark" href="#wmre-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmre-fe-checkboxes__container">
Bus routes
<input class="wmre-fe-checkboxes__input" value="Bus routes" type="checkbox"/>
<span class="wmre-fe-checkboxes__checkmark">
<svg class="wmre-fe-checkboxes__icon">
<use xlink:href="#wmre-general-checkmark" href="#wmre-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmre-fe-checkboxes__container">
Timetables
<input class="wmre-fe-checkboxes__input" value="Timetables" type="checkbox"/>
<span class="wmre-fe-checkboxes__checkmark">
<svg class="wmre-fe-checkboxes__icon">
<use xlink:href="#wmre-general-checkmark" href="#wmre-general-checkmark"></use>
</svg>
</span>
</label>
<label class="wmre-fe-checkboxes__container">
Offers and promotions
<input class="wmre-fe-checkboxes__input" value="Offers and promotions" type="checkbox"/>
<span class="wmre-fe-checkboxes__checkmark">
<svg class="wmre-fe-checkboxes__icon">
<use xlink:href="#wmre-general-checkmark" href="#wmre-general-checkmark"></use>
</svg>
</span>
</label>
</div>
</fieldset>
</div>
</div>
<div class="wmre-search-filter__mobile-filter-update wmre-hide-desktop">
<button id="show_results_btn" class="wmre-btn wmre-btn--block">Show 80 results</button>
</div>
<a href="#" class="wmre-search-filter__clear-all wmre-hide-mobile">
<svg>
<title>Close</title>
<use xlink:href="#wmre-general-cross" href="#wmre-general-cross"></use>
</svg> Clear all filters
</a>
</div>
Search result
What does it do?
- This is how a matching page will display in the search results page
How it works
- Each page result will show the page breadcrumbs on desktop. On mobile, breadcrumbs are not shown. This is to reduce page size on smaller devices
- The page description will display main body copy which is highest on the page. The description will be a maximum of 150 characters. Any descriptions longer than 150 characters will be truncated.
- If the user’s search query is in the page description, it will be highlighted in bold. This is to help them understand the context of the page
- The horizontal rule at the bottom of a search result is to make the results list easier to scan.
Component example
Swift: The smarter way to travel
Swift is the easy and flexible way to travel around the West Midlands. find the swift card for you. How do you travel? bus…
HTML Markup
<div class="wmre-search-result">
<h2 class="wmre-m-b-none"><a href="#" class="h2 wmre-search-result__title">Swift: The smarter way to travel</a></h2>
<p class="wmre-search-result__date"></p>
<p class="wmre-search-result__excerpt"><strong>Swift</strong> is the easy and flexible way to travel around the West Midlands. find the <strong>swift</strong> card for you. How do you travel? bus…</p>
</div>
Pagination links
What does it do?
- Allows the user to navigate through search results.
Component example
HTML Markup
<div class="wmre-pagination wmre-m-t-xl">
<ol class="wmre-pagination__nav">
<li class="wmre-pagination__item wmre-pagination__item--active">
1
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">2</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">3</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">4</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">5</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">6</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">7</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">8</a>
</li>
</ol>
<a href="#" target="_self" class="wmre-pagination__next wmre-link wmre-link--with-chevron" >
Next page <svg class="wmre-link__chevron wmre-link__chevron--right">
<use xlink:href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use>
</svg>
</a>
</div>
<div class="wmre-pagination wmre-m-t-xl">
<ol class="wmre-pagination__nav">
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">1</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">2</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">3</a>
</li>
<li class="wmre-pagination__item wmre-pagination__item--previous">
<a class="wmre-link" href="#">4</a>
</li>
<li class="wmre-pagination__item wmre-pagination__item--active">
5
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">6</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">7</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">8</a>
</li>
</ol>
<a href="#" target="_self" class="wmre-pagination__prev wmre-link wmre-link--with-chevron" >
<svg class="wmre-link__chevron wmre-link__chevron--left">
<use xlink:href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use>
</svg> Previous page
</a>
<a href="#" target="_self" class="wmre-pagination__next wmre-link wmre-link--with-chevron" >
Next page <svg class="wmre-link__chevron wmre-link__chevron--right">
<use xlink:href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use>
</svg>
</a>
</div>
<div class="wmre-pagination wmre-m-t-xl">
<ol class="wmre-pagination__nav">
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">1</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">2</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">3</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">4</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">5</a>
</li>
<li class="wmre-pagination__item">
<a class="wmre-link" href="#">6</a>
</li>
<li class="wmre-pagination__item wmre-pagination__item--previous">
<a class="wmre-link" href="#">7</a>
</li>
<li class="wmre-pagination__item wmre-pagination__item--active">
8
</li>
</ol>
<a href="#" target="_self" class="wmre-pagination__prev wmre-link wmre-link--with-chevron" >
<svg class="wmre-link__chevron wmre-link__chevron--left">
<use xlink:href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use>
</svg> Previous page
</a>
</div>