# Article search
A search interface for articles with tag filtering and breadcrumb navigation, designed for insights or blog sections.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](http://localhost:3016/cms/screenshot?file=components%2Farticle-search-default.png) |

## What it looks like
The component renders as a full-width section containing an ArticleFilters component. The filters span the full grid width on mobile and tablets, then constrain to columns 2-11 (10 columns wide) on laptop and larger screens. The section has negative top margin (-mt-10) to pull it closer to preceding content. The layout includes breadcrumb navigation, tag filters, and a search input field.

## Typography
Typography is handled by the ArticleFilters child component, not directly by this component. The component itself only manages the Section wrapper and does not set any specific text classes.

## Colours
Authors cannot set background or text colours for this component. The section uses default styling without customizable colour options.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Sets the HTML id attribute on the section element for anchor linking | No id attribute is added to the section |
| index | Number | Determines the component's position in the page layout | No positional styling or ordering applied |
| componentType | Symbol | Identifies this as an "Article search" component type | Component will not render properly |
| heading | Symbol | Currently unused in the component implementation | No visual effect |
| anchor | Symbol | Sets the HTML id attribute on the section element for anchor linking | No anchor link target is created |
| cmsLabel | Symbol | Used for preview and content management purposes | No effect on frontend rendering |

## Behaviour
The component fetches all available tag links asynchronously using the `getAllTagLinks` helper from renderer config. These tags are passed to ArticleFilters as navigation options. Breadcrumbs are constructed with a base "Insights" link, plus an additional breadcrumb if the page context includes tag information. The search functionality points to "/insights/search" with placeholder text "Search Insights by keyword(s)". The component uses React Suspense for async rendering of the tag data.

## Impact
- **Adding/removing anchor**: Creates or removes the ability to link directly to this section via URL fragments
- **Adding/removing heading**: Currently has no visual impact as this field is not implemented in the component