Search Page
A template for a search page
Open in a new tab
Desktop
Tablet
Mobile
Code example
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="styles.css" />
<style>
.gi-order-1 {
order: 1;
}
.gi-order-2 {
order: 2;
}
.gi-order-3 {
order: 3;
}
.py-14 {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.grow {
flex-grow: 1;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
.sm\:gi-gap-4 {
gap: 1rem;
}
}
@media (min-width: 768px) {
.md\:gi-order-1 {
order: 1;
}
.md\:gi-order-2 {
order: 2;
}
.md\:gi-col-span-1 {
grid-column: span 1 / span 1;
}
.md\:gi-col-span-2 {
grid-column: span 2 / span 2;
}
}
@media (min-width: 1280px) {
.xl\:gi-col-span-3 {
grid-column: span 3 / span 3;
}
.xl\:gi-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.xl\:gi-gap-12 {
gap: 3rem;
}
}
</style>
</head>
<body class="gieds-js">
<header id="GovieHeader" class="gi-header">
<div id="HeaderContainer" class="gi-layout-container">
<div class="gi-header-menu">
<div class="gi-flex gi-items-center">
<div class="gi-header-logo">
<a
href="/path"
aria-label="Go to the home page"
data-testid="logo-link"
>
Logo
</a>
</div>
<div class="gi-header-title"></div>
</div>
<div>
<ul class="gi-header-nav">
<li>
<a data-testid="nav-link-desktop-0" href="#">Departments</a>
</li>
<li>
<a data-testid="nav-link-desktop-1" href="#">Services</a>
</li>
</ul>
<div class="gi-header-separator"></div>
<div class="gi-flex">
<div class="gi-hidden sm:gi-flex">
<label for="SearchTrigger" class="gi-header-tool-item">
<input
class="gi-header-mobile-menu-trigger"
id="SearchTrigger"
data-testid="SearchTrigger"
type="checkbox"
/>
<span class="label">Search</span>
<span
data-testid="govie-icon"
role="presentation"
style="
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
"
class="material-symbols-outlined search-icon gi-block gi-text-[24px]"
>
search
</span>
<span
data-testid="govie-icon"
role="presentation"
style="
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
"
class="material-symbols-outlined gi-hidden close-icon"
>
close
</span></label
>
</div>
<a class="gi-header-tool-item" href="/item1">
<span class="label">Gaeilge</span>
</a>
<label
for="MobileMenuTrigger"
class="gi-header-tool-item lg:gi-hidden"
>
<input
id="MobileMenuTrigger"
class="gi-header-mobile-menu-trigger"
type="checkbox"
data-testid="header-mobile-menu"
/>
<span class="label">Menu</span>
<span
data-testid="govie-icon"
role="presentation"
style="
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
"
class="material-symbols-outlined gi-block gi-text-[24px]"
>menu</span
>
</label>
</div>
</div>
</div>
</div>
<div id="SearchContainer" class="gi-header-tool-container">
<form action="/search_page" class="gi-max-w-md gi-mx-auto">
<h4 class="gi-heading-sm">Search the website</h4>
<div class="gi-flex gi-items-end gi-mt-4">
<div class="gi-text-input-container gi-flex-auto">
<div class="gi-text-input-container-inner">
<input
placeholder="Enter search term"
id="search"
type="text"
data-testid="textbox"
class="gi-border-gray-950 gi-w-full gi-text-input"
name="search_query"
aria-label="Search the website"
/>
</div>
</div>
<button
data-testid="govieButton-undefined-undefined-undefined-"
class="gi-btn gi-btn-primary gi-btn-regular gi-ml-1 gi-flex-none"
>
Search<span
data-testid="govie-icon"
aria-label="Search"
role="img"
style="
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
"
class="material-symbols-outlined gi-block gi-text-[24px]"
>search</span
>
</button>
</div>
</form>
</div>
<div
id="HeaderMenuContainer"
class="gi-header-menu-container lg:gi-hidden"
>
<div>
<div class="gi-flex gi-items-center">
<label
for="MobileMenuTrigger"
class="gi-header-menu-mobile-trigger"
>
<span>Close</span>
<span
data-testid="govie-icon"
role="presentation"
style="
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
"
class="material-symbols-outlined gi-block gi-text-[24px]"
>close</span
>
</label>
</div>
</div>
<ul>
<li>
<a aria-label="Link 1" href="#" class="gi-header-menu-list-item">
<span class="gi-text-sm gi-ml-1 gi-font-bold">Link 1</span>
</a>
</li>
<li>
<a aria-label="Link 2" href="#" class="gi-header-menu-list-item">
<span class="gi-text-sm gi-ml-1 gi-font-bold">Link 2</span>
</a>
</li>
<li class="gi-mt-8 sm:gi-hidden">
<form action="/search_page" class="gi-max-w-md gi-mx-auto">
<h4 class="gi-heading-sm">Search the website</h4>
<div class="gi-flex gi-items-end gi-mt-4">
<div class="gi-text-input-container gi-flex-auto">
<div class="gi-text-input-container-inner">
<input
placeholder="Enter search term"
id="search"
type="text"
data-testid="textbox"
class="gi-border-gray-950 gi-w-full gi-text-input"
name="search_query"
aria-label="Search the website"
/>
</div>
</div>
<button
data-testid="govieButton-undefined-undefined-undefined-"
class="gi-btn gi-btn-primary gi-btn-regular gi-ml-1 gi-flex-none"
>
Search<span
data-testid="govie-icon"
aria-label="Search"
role="img"
style="
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
"
class="material-symbols-outlined gi-block gi-text-[24px]"
>search</span
>
</button>
</div>
</form>
</li>
</ul>
</div>
<div id="HeaderOverlayContainer" class="gi-header-overlay"></div>
</header>
<div class="gi-layout-container">
<div
class="gi-grid gi-grid-cols-3 xl:gi-grid-cols-4 sm:gi-gap-4 lg:gi-gap-12"
>
<div
class="gi-col-span-3 xl:gi-col-end-4 border-b-gray-150 border-b border-solid"
>
<div class="py-14">
<div class="gi-flex gi-flex-col gi-gap-7">
<div class="gi-flex sm:gi-gap-5 gi-items-end">
<div class="grow gi-gap-4 gi-flex gi-flex-col">
<h2 class="gi-heading-lg">Search</h2>
<div class="gi-text-input-container">
<div class="gi-text-input-container-inner {{ marginTop }}">
<input
id="search-input"
data-testid="textbox"
type="text"
autocomplete="on"
class="gi-border-gray-950 gi-w-full gi-text-input"
/>
</div>
</div>
</div>
<div class="gi-hidden sm:gi-block">
<button
data-testid="govieButton-default-primary-medium-notDisabled"
data-element="button-container"
data-module="gieds-button"
class="gi-btn gi-btn-primary gi-btn-regular"
>
Search
</button>
</div>
<div class="gi-block sm:gi-hidden">
<button
data-element="icon-button-container"
data-module="gieds-icon-button"
data-testid="govieIconButton-default-primary-medium-notDisabled"
class="gi-btn gi-btn-primary gi-icon-btn-regular"
>
<span
data-testid="govie-icon"
role="presentation"
style="
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
"
class="material-symbols-outlined gi-block gi-text-[16px]"
>
search
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="gi-grid gi-grid-cols-3 xl:gi-grid-cols-4 sm:gi-gap-4 xl:gi-gap-12"
>
<div
class="gi-col-span-3 md:gi-col-span-2 xl:gi-col-span-3 sm:mt-0 mt-6 gi-order-2 md:gi-order-1"
>
<div class="mb-6 gi-flex gi-justify-between gi-items-center">
<h4 class="gi-heading-sm">49357 Results</h4>
<div data-module="gieds-select">
<select
id="unique-id"
aria-label="unique-id"
class="gi-select {{ marginTop }}"
>
<option class="gi-select-option" value="value-1">
Sort: Recent
</option>
<option class="gi-select-option" value="value-2">
Sort: Oldest
</option>
<option class="gi-select-option" value="value-3">
Sort: Alphabetical
</option>
</select>
</div>
</div>
<div class="gi-flex gi-gap-4 mb-6">
<div class="gi-chip">
<span id="chip-description">Environment</span>
<div role="button" aria-label="remove chip">
<span
role="presentation"
class="material-symbols-outlined gi-block"
style="font-size: 16px"
>close
</span>
</div>
</div>
<div class="gi-chip">
<span id="chip-description">Marine</span>
<div role="button" aria-label="remove chip">
<span
role="presentation"
class="material-symbols-outlined gi-block"
style="font-size: 16px"
>close
</span>
</div>
</div>
<div class="gi-chip">
<span id="chip-description">Water Industry</span>
<div role="button" aria-label="remove chip">
<span
role="presentation"
class="material-symbols-outlined gi-block"
style="font-size: 16px"
>close
</span>
</div>
</div>
</div>
<div class="gi-flex gi-flex-col gi-gap-4">
<div
class="gi-card gi-card-horizontal gi-card-inset-none border-b-gray-150 border-b border-solid"
>
<div class="gi-card-content gi-card-inset-none">
<div class="gi-card-header">
<div class="gi-card-heading">
<div class="gi-card-title">
<a href="#" class="gi-link">
Discover the Beauty in ‘What Remains’ Exhibition at
Farmleigh, Dublin
</a>
</div>
<div class="gi-text-sm gi-card-subheading">
17 January 2025; Office of Public Works; Press release;
</div>
</div>
</div>
</div>
</div>
<div
class="gi-card gi-card-horizontal gi-card-inset-none border-b-gray-150 border-b border-solid"
>
<div class="gi-card-content gi-card-inset-none">
<div class="gi-card-header">
<div class="gi-card-heading">
<div class="gi-card-title">
<a href="#" class="gi-link">
Biophllia Talks return this January at the National
Botanic Gardens, Dublin
</a>
</div>
<div class="gi-text-sm gi-card-subheading">
16 January 2025; Office of Public Works; Press release;
</div>
</div>
</div>
</div>
</div>
<div
class="gi-card gi-card-horizontal gi-card-inset-none border-b-gray-150 border-b border-solid"
>
<div class="gi-card-content gi-card-inset-none">
<div class="gi-card-header">
<div class="gi-card-heading">
<div class="gi-card-title">
<a href="#" class="gi-link">
Taoiseach meets with newly elected Lord Mayor of Dublin,
Councillor Emma Blain
</a>
</div>
<div class="gi-text-sm gi-card-subheading">
13 January 2025; Department of the Taoiseach; Press
release;
</div>
</div>
</div>
</div>
</div>
<div
class="gi-card gi-card-horizontal gi-card-inset-none border-b-gray-150 border-b border-solid"
>
<div class="gi-card-content gi-card-inset-none">
<div class="gi-card-header">
<div class="gi-card-heading">
<div class="gi-card-title">
<a href="#" class="gi-link">
Ministers Ryan and Lawless welcome announcement of
additional Pembroke-Dublin daily sailing
</a>
</div>
<div class="gi-text-sm gi-card-subheading">
31 December 2024; Department of Transport; Press release;
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="gi-flex gi-flex-col gi-gap-8 gi-col-span-3 md:gi-col-span-1 gi-order-1 md:gi-order-2"
>
<h2 class="gi-heading-lg">Filters</h2>
<form
data-module="gieds-combobox"
action="#"
class="gi-combobox-container"
>
<div role="group" aria-label="Organisations dropdown">
<div data-module="gieds-dropdown-item">
<button
data-testid="combobox-toggle"
class="gi-combobox-toggle"
>
<div class="gi-combobox-toggle-content">
<p
class="gi-paragraph-md gi-text-start gi-whitespace-normal gi-max-w-prose"
>
Organisations
</p>
<div class="gi-hidden">
<strong class="gi-tag gi-tag-counter"> 0 </strong>
</div>
</div>
<span
data-testid="govie-icon"
role="presentation"
style="
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
"
class="material-symbols-outlined gi-block gi-text-[24px]"
>
keyboard_arrow_down
</span>
</button>
<div
data-testid="combobox-dropdown-container"
data-element="combobox-dropdown-container"
class="gi-combobox-dropdown-container-close"
>
<div class="gi-combobox-search">
<div
class="gi-text-input-container gi-combobox-search-input"
>
<div
class="gi-text-input-container-inner {{ marginTop }}"
>
<input
id="input-id"
placeholder="Search"
data-testid="textbox"
type="text"
autocomplete="on"
class="gi-border-gray-950 gi-w-full gi-text-input"
/>
</div>
</div>
<div class="gi-hidden">
<button
data-element="icon-button-container"
data-module="gieds-icon-button"
data-testid="govieIconButton-dark-flat-small-notDisabled"
class="gi-btn gi-btn-flat-dark gi-icon-btn-small gi-combobox-search-icon"
>
<span
data-testid="govie-icon"
role="presentation"
style="
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
"
class="material-symbols-outlined gi-block gi-text-[16px]"
>
close
</span>
</button>
</div>
</div>
<div class="gi-combobox-checkbox-container">
<div class="gi-hidden">
<p
class="gi-paragraph-md gi-text-start gi-whitespace-normal gi-max-w-prose gi-combobox-checkbox-paragraph"
>
No results found.
</p>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="An Bord Pleanála"
data-element="An Bord Pleanála"
id="An Bord Pleanála"
value="15431907-an-bord-pleanala"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label for="An Bord Pleanála" class="gi-checkbox-label">
An Bord Pleanála
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="An Garda SÃochána"
data-element="An Garda SÃochána"
id="An Garda SÃochána"
value="an-garda-siochana"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label for="An Garda SÃochána" class="gi-checkbox-label">
An Garda SÃochána
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Bord Bia (Irish Food Board)"
data-element="Bord Bia (Irish Food Board)"
id="Bord Bia (Irish Food Board)"
value="14061907-bord-bia-irish-food-board"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Bord Bia (Irish Food Board)"
class="gi-checkbox-label"
>
Bord Bia (Irish Food Board)
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Capital Works Management Framework"
data-element="Capital Works Management Framework"
id="Capital Works Management Framework"
value="7c2ea-capital-works-management-framework"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Capital Works Management Framework"
class="gi-checkbox-label"
>
Capital Works Management Framework
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Carlow County Council"
data-element="Carlow County Council"
id="Carlow County Council"
value="carlow-county-council"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Carlow County Council"
class="gi-checkbox-label"
>
Carlow County Council
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Cavan County Council"
data-element="Cavan County Council"
id="Cavan County Council"
value="cavan-county-council"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Cavan County Council"
class="gi-checkbox-label"
>
Cavan County Council
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Central Bank of Ireland"
data-element="Central Bank of Ireland"
id="Central Bank of Ireland"
value="10032007-central-bank-of-ireland"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Central Bank of Ireland"
class="gi-checkbox-label"
>
Central Bank of Ireland
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Central Statistics Office"
data-element="Central Statistics Office"
id="Central Statistics Office"
value="central-statistics-office"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Central Statistics Office"
class="gi-checkbox-label"
>
Central Statistics Office
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Chief State Solicitor’s Office"
data-element="Chief State Solicitor’s Office"
id="Chief State Solicitor’s Office"
value="chief-state-solicitors-office"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Chief State Solicitor’s Office"
class="gi-checkbox-label"
>
Chief State Solicitor’s Office
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Circulars"
data-element="Circulars"
id="Circulars"
value="28448-circulars"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label for="Circulars" class="gi-checkbox-label">
Circulars
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Civil Justice Review"
data-element="Civil Justice Review"
id="Civil Justice Review"
value="dff8b-civil-justice-review"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Civil Justice Review"
class="gi-checkbox-label"
>
Civil Justice Review
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Civil Service Employee Assistance Service"
data-element="Civil Service Employee Assistance Service"
id="Civil Service Employee Assistance Service"
value="72752-civil-service-employee-assistance-service"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Civil Service Employee Assistance Service"
class="gi-checkbox-label"
>
Civil Service Employee Assistance Service
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Clare County Council"
data-element="Clare County Council"
id="Clare County Council"
value="clare-county-council"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Clare County Council"
class="gi-checkbox-label"
>
Clare County Council
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Commission on Taxation and Welfare"
data-element="Commission on Taxation and Welfare"
id="Commission on Taxation and Welfare"
value="c526e-commission-on-taxation-and-welfare"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Commission on Taxation and Welfare"
class="gi-checkbox-label"
>
Commission on Taxation and Welfare
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Commission on the Defence Forces"
data-element="Commission on the Defence Forces"
id="Commission on the Defence Forces"
value="20d04-commission-of-the-defence-forces"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Commission on the Defence Forces"
class="gi-checkbox-label"
>
Commission on the Defence Forces
</label>
</div>
</div>
</div>
</div>
</div>
<div role="group" aria-label="Category dropdown">
<div data-module="gieds-dropdown-item">
<button
data-testid="combobox-toggle"
class="gi-combobox-toggle"
>
<div class="gi-combobox-toggle-content">
<p
class="gi-paragraph-md gi-text-start gi-whitespace-normal gi-max-w-prose"
>
Category
</p>
<div class="gi-hidden">
<strong class="gi-tag gi-tag-counter"> 0 </strong>
</div>
</div>
<span
data-testid="govie-icon"
role="presentation"
style="
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
"
class="material-symbols-outlined gi-block gi-text-[24px]"
>
keyboard_arrow_down
</span>
</button>
<div
data-testid="combobox-dropdown-container"
data-element="combobox-dropdown-container"
class="gi-combobox-dropdown-container-close"
>
<div class="gi-combobox-search">
<div
class="gi-text-input-container gi-combobox-search-input"
>
<div
class="gi-text-input-container-inner {{ marginTop }}"
>
<input
id="input-id"
placeholder="Search"
data-testid="textbox"
type="text"
autocomplete="on"
class="gi-border-gray-950 gi-w-full gi-text-input"
/>
</div>
</div>
<div class="gi-hidden">
<button
data-element="icon-button-container"
data-module="gieds-icon-button"
data-testid="govieIconButton-dark-flat-small-notDisabled"
class="gi-btn gi-btn-flat-dark gi-icon-btn-small gi-combobox-search-icon"
>
<span
data-testid="govie-icon"
role="presentation"
style="
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
"
class="material-symbols-outlined gi-block gi-text-[16px]"
>
close
</span>
</button>
</div>
</div>
<div class="gi-combobox-checkbox-container">
<div class="gi-hidden">
<p
class="gi-paragraph-md gi-text-start gi-whitespace-normal gi-max-w-prose gi-combobox-checkbox-paragraph"
>
No results found.
</p>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Agencies"
data-element="Agencies"
id="Agencies"
value="agencies"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label for="Agencies" class="gi-checkbox-label">
Agencies
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Aquaculture licences"
data-element="Aquaculture licences"
id="Aquaculture licences"
value="aquaculture_licence"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Aquaculture licences"
class="gi-checkbox-label"
>
Aquaculture licences
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Biographies"
data-element="Biographies"
id="Biographies"
value="biographies"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label for="Biographies" class="gi-checkbox-label">
Biographies
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Campaigns"
data-element="Campaigns"
id="Campaigns"
value="campaigns"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label for="Campaigns" class="gi-checkbox-label">
Campaigns
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Circulars"
data-element="Circulars"
id="Circulars"
value="circulars"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label for="Circulars" class="gi-checkbox-label">
Circulars
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Collections"
data-element="Collections"
id="Collections"
value="collections"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label for="Collections" class="gi-checkbox-label">
Collections
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Consultations"
data-element="Consultations"
id="Consultations"
value="consultations"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label for="Consultations" class="gi-checkbox-label">
Consultations
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Coroner cases"
data-element="Coroner cases"
id="Coroner cases"
value="coroner_cases"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label for="Coroner cases" class="gi-checkbox-label">
Coroner cases
</label>
</div>
</div>
</div>
</div>
</div>
<div role="group" aria-label="Topic dropdown">
<div data-module="gieds-dropdown-item">
<button
data-testid="combobox-toggle"
class="gi-combobox-toggle"
>
<div class="gi-combobox-toggle-content">
<p
class="gi-paragraph-md gi-text-start gi-whitespace-normal gi-max-w-prose"
>
Topic
</p>
<div class="gi-hidden">
<strong class="gi-tag gi-tag-counter"> 0 </strong>
</div>
</div>
<span
data-testid="govie-icon"
role="presentation"
style="
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
"
class="material-symbols-outlined gi-block gi-text-[24px]"
>
keyboard_arrow_down
</span>
</button>
<div
data-testid="combobox-dropdown-container"
data-element="combobox-dropdown-container"
class="gi-combobox-dropdown-container-close"
>
<div class="gi-combobox-search">
<div
class="gi-text-input-container gi-combobox-search-input"
>
<div
class="gi-text-input-container-inner {{ marginTop }}"
>
<input
id="input-id"
placeholder="Search"
data-testid="textbox"
type="text"
autocomplete="on"
class="gi-border-gray-950 gi-w-full gi-text-input"
/>
</div>
</div>
<div class="gi-hidden">
<button
data-element="icon-button-container"
data-module="gieds-icon-button"
data-testid="govieIconButton-dark-flat-small-notDisabled"
class="gi-btn gi-btn-flat-dark gi-icon-btn-small gi-combobox-search-icon"
>
<span
data-testid="govie-icon"
role="presentation"
style="
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
"
class="material-symbols-outlined gi-block gi-text-[16px]"
>
close
</span>
</button>
</div>
</div>
<div class="gi-combobox-checkbox-container">
<div class="gi-hidden">
<p
class="gi-paragraph-md gi-text-start gi-whitespace-normal gi-max-w-prose gi-combobox-checkbox-paragraph"
>
No results found.
</p>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Brexit"
data-element="Brexit"
id="Brexit"
value="brexit"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label for="Brexit" class="gi-checkbox-label">
Brexit
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Business and industry"
data-element="Business and industry"
id="Business and industry"
value="business-and-industry"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Business and industry"
class="gi-checkbox-label"
>
Business and industry
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="COVID-19"
data-element="COVID-19"
id="COVID-19"
value="covid-19"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label for="COVID-19" class="gi-checkbox-label">
COVID-19
</label>
</div>
<div class="gi-checkbox-container gi-combobox-checkbox">
<input
name="Corporate information"
data-element="Corporate information"
id="Corporate information"
value="corporate-information"
class="gi-w-6 gi-h-6 checked:before:gi-w-3.5 checked:before:gi-h-2 checked:before:gi-left-0.5 checked:before:gi-top-1 gi-checkbox-input"
type="checkbox"
/>
<label
for="Corporate information"
class="gi-checkbox-label"
>
Corporate information
</label>
</div>
</div>
</div>
</div>
</div>
</form>
<div>
<button
data-testid="govieButton-dark-primary-medium-notDisabled"
data-element="button-container"
data-module="gieds-button"
class="gi-btn gi-btn-primary-dark gi-btn-regular"
>
Apply filters
</button>
</div>
<a href="#" class="gi-link visited:gi-text-blue-700">Clear All</a>
</div>
<div class="my-6 gi-col-span-2 gi-col-start-2 gi-order-3">
<div
class="gi-pagination"
data-current-page="5"
data-total-pages="10"
data-testid="govie-pagination"
data-module="gieds-pagination"
>
<a
href="#"
target="_self"
data-testid="govie-pagination-prev-btn"
data-element="button-container"
data-module="gieds-button"
class="gi-pagination-prev-btn gi-btn gi-btn-flat-dark gi-btn-large"
>
<span
data-testid="govie-icon"
role="presentation"
class="material-symbols-outlined gi-block gi-text-[24px]"
>arrow_left_alt</span
>
<span class="sm:gi-block gi-hidden">Previous</span>
</a>
<div class="xs:gi-hidden gi-block gi-text-md">
<span class="gi-font-bold">Page 5</span> of 10
</div>
<div
class="sm:gi-flex xs:gi-flex gi-items-center gi-justify-between gi-gap-2 md:gi-hidden gi-hidden"
>
<a
href="#"
target="_self"
data-testid="govieButton-dark-flat-large-notDisabled"
data-element="button-container"
data-module="gieds-button"
class="gi-btn gi-btn-flat-dark gi-btn-large"
>
1
</a>
<span
data-testid="govie-icon"
class="material-symbols-outlined gi-gray-700"
>more_horiz</span
>
<a
href="#"
target="_self"
data-testid="govieButton-dark-flat-dark-large-notDisabled"
data-element="button-container"
data-module="gieds-button"
class="gi-btn gi-btn-primary-dark gi-btn-large"
>
5
</a>
<span
data-testid="govie-icon"
class="material-symbols-outlined gi-gray-700"
>more_horiz</span
>
<a
href="#"
target="_self"
data-testid="govieButton-dark-flat-large-notDisabled"
data-element="button-container"
data-module="gieds-button"
class="gi-btn gi-btn-flat-dark gi-btn-large"
>
10
</a>
</div>
<div
class="md:gi-flex gi-items-center gi-justify-between gi-gap-2 gi-hidden"
>
<a
href="#"
target="_self"
data-testid="govieButton-dark-flat-large-notDisabled"
data-element="button-container"
data-module="gieds-button"
class="gi-btn gi-btn-flat-dark gi-btn-large"
>
1
</a>
<span
data-testid="govie-icon"
class="material-symbols-outlined gi-gray-700"
>more_horiz</span
>
<a
href="#"
target="_self"
data-testid="govieButton-dark-flat-large-notDisabled"
data-element="button-container"
data-module="gieds-button"
class="gi-btn gi-btn-flat-dark gi-btn-large"
>
3
</a>
<a
href="#"
target="_self"
data-testid="govieButton-dark-flat-large-notDisabled"
data-element="button-container"
data-module="gieds-button"
class="gi-btn gi-btn-flat-dark gi-btn-large"
>
4
</a>
<a
href="#"
target="_self"
data-testid="govieButton-dark-flat-dark-large-notDisabled"
data-element="button-container"
data-module="gieds-button"
class="gi-btn gi-btn-primary-dark gi-btn-large"
>
5
</a>
<a
href="#"
target="_self"
data-testid="govieButton-dark-flat-large-notDisabled"
data-element="button-container"
data-module="gieds-button"
class="gi-btn gi-btn-flat-dark gi-btn-large"
>
6
</a>
<a
href="#"
target="_self"
data-testid="govieButton-dark-flat-large-notDisabled"
data-element="button-container"
data-module="gieds-button"
class="gi-btn gi-btn-flat-dark gi-btn-large"
>
7
</a>
<span
data-testid="govie-icon"
class="material-symbols-outlined gi-gray-700"
>more_horiz</span
>
<a
href="#"
target="_self"
data-testid="govieButton-dark-flat-large-notDisabled"
data-element="button-container"
data-module="gieds-button"
class="gi-btn gi-btn-flat-dark gi-btn-large"
>
10
</a>
</div>
<a
href="#"
target="_self"
data-testid="govie-pagination-next-btn"
data-element="button-container"
data-module="gieds-button"
class="gi-pagination-next-btn gi-btn gi-btn-flat-dark gi-btn-large"
>
<span class="sm:gi-block gi-hidden">Next</span>
<span
data-testid="govie-icon"
role="presentation"
class="material-symbols-outlined gi-block gi-text-[24px]"
>arrow_right_alt</span
>
</a>
</div>
</div>
</div>
</div>
<footer class="gi-footer" data-module="gieds-footer">
<div class="gi-layout-container">
<div class="footer-secondary-nav-links"></div>
<div class="footer-primary-nav-links">
<ul>
<li data-testid="main-link-0">
<a href="#"> Help </a>
</li>
<li data-testid="main-link-1">
<a href="#"> Privacy policy </a>
</li>
<li data-testid="main-link-2">
<a href="#"> Cookies policy </a>
</li>
<li data-testid="main-link-3">
<a href="#"> Accessibility statement </a>
</li>
<li data-testid="main-link-4">
<a href="#"> Contact </a>
</li>
<li data-testid="main-link-5">
<a href="#"> Government digital service </a>
</li>
</ul>
<div class="logo-container">
Logo
</div>
</div>
</div>
</footer>
<script src="govie-frontend.umd.js"></script>
</body>
</html>