← Design system

SearchCard

Search form shell — optional heading + composed SearchInput + suggestions dropdown container. Live autocomplete is out of scope (HC-127); the dropdown shows when the form carries data-open="true".

With heading — default (dropdown hidden)

Search HypnoNews

No heading + initial value

Open — slotted suggestions (sections + items)

Form is forced open via data-open="true" below to preview the dropdown + .scard__sugg-* item styles. Needs ~360px of vertical room — extra padding added beneath.

Open — empty state

Spec: data/design/components/search-card.yml
Reference: docs/design/previews/hypnonews/design-outputs/pages/search.html (.sp__form / .sp__dropdown / .sp__sugg-*)