Airgentic Help
This guide explains how to style an Airgentic Site Search page so it matches your website.
Use this guide when the search results page is already working and you want to adjust colours, spacing, tabs, filters, result cards, the AI answer, or other visual details.
Search styling can come from several places:
| Layer | What it is used for |
|---|---|
| Website CSS | Styles already loaded by your website. These apply naturally to per-slot search layouts because the search elements are placed directly on your page. |
| External search stylesheet | An existing hosted search stylesheet, such as a stylesheet from a previous search platform. Airgentic support can add this for your service. |
Airgentic-managed style.css |
The customer-editable stylesheet in UI Design. This is usually the best place for final search-specific overrides. |
| Airgentic default styles | Built-in styles that make search usable before any custom styling is added. |
External search stylesheets load before the Airgentic-managed style.css, so style.css remains the final override layer.
Inline search can be added in two main ways.
The standard inline setup uses one container:
<div data-airgentic="search"></div>
Airgentic renders the full search experience inside that container.
Advanced per-slot layouts place individual search regions into separate parts of the page:
<div data-airgentic="search-input"></div>
<div data-airgentic="search-scopes"></div>
<div data-airgentic="search-facets"></div>
<div data-airgentic="search-sort"></div>
<div data-airgentic="search-ai-answer"></div>
<div data-airgentic="search-ask"></div>
<div data-airgentic="search-results"></div>
<div data-airgentic="search-pagination"></div>
Per-slot layouts are useful when the website needs full control over where the input, filters, answer, results, and pagination appear.
When possible, style the public search slots and stable search classes rather than internal IDs.
Good starting points include:
[data-airgentic="search-results"] {
margin-top: 1.5rem;
}
.search-results,
.air-search-results {
gap: 1rem;
}
.hit-card {
border-radius: 12px;
}
.search-facet,
.air-facet-item {
font-size: 0.95rem;
}
.pagination,
.page-link {
border-radius: 999px;
}
Airgentic also emits common search and Bootstrap-style classes such as:
nav-tabsnav-itemcardsearch-resultssearch-facetpaginationpage-linkThese classes make it easier to reuse existing website or search-platform CSS.
Airgentic uses internal IDs such as air-search-shell, air-searchbox, air-search-scope-tabs, and air-search-results to mount and coordinate the search UI.
You can use these IDs for precise overrides when needed, but prefer public slots and stable classes first. Internal IDs are more closely tied to the Airgentic renderer, while data-airgentic slots and common search classes are the safer styling contract for website integrations.
.hit-card {
padding: 1.25rem;
border: 1px solid #e5e7eb;
border-radius: 14px;
background: #ffffff;
}
.hit-title a {
color: #0b5cab;
}
.hit-snippet {
color: #4b5563;
}
.type-tab,
.nav-link {
font-weight: 600;
}
.type-tab.active,
.nav-link.active {
border-bottom-color: #0b5cab;
}
.search-facet,
.air-search-facet {
margin-bottom: 1.25rem;
}
.air-facet-item {
border-color: #d1d5db;
}
[data-airgentic="search-ai-answer"],
#air-search-answer {
border-radius: 16px;
background: #f8fbff;
}
.air-search-ask-tab,
.search-ask-tab {
font-weight: 700;
}
Use Search Configuration > Result Cards when you want to change what appears inside each result, such as:
Use CSS when you want to change presentation, such as:
For most services, configure the result card structure first, then use CSS for final visual polish.
If your organisation already has a search stylesheet, Airgentic support can add it to the search configuration.
This is often useful during migrations from another search platform. Airgentic emits a migration-friendly DOM with common search classes, so existing styles may work with smaller overrides in style.css.
After adding an external stylesheet, test:
Use UI Design to edit the Airgentic-managed style.css.
The editor provides syntax highlighting and a live preview for widget styling. For full Site Search page testing, use the real search page or Search Configuration > Preview after saving.
See UI Design for more about editing style.css.