The Search block opens Ghost's built-in search, where visitors type and see matching posts, tags and authors as they type. It shows as a search bar, or as a search icon with optional text. You find it in the Forms group of the block picker. It goes in a Section, a Dialog or a Post Content section, or inside a Group or a Collection. Four of the six header patterns have one, and the Search First and Utility Search hero patterns are built around it.
The Search First pattern above gives the bar your primary color as its Background, and its heading belongs to the section. The search window and its results come from Ghost, so their look and what they include are set by Ghost, not by the block. Add search to your site walks through placing it.
Variant
At the top of the right sidebar, Variant picks the look. A new project has three.
Variant
What visitors see
Filled
A rounded bar with a light gray fill, the icon and the placeholder text. The default.
Plain
The icon and the placeholder text with no bar, like a link. With no placeholder text, the icon alone, as in the header patterns.
Outline
A rounded bar with a thin border and no fill.
A bar grows to the width of its column, up to 560 px. The variants live in the Forms group of the Blocks panel, where a change reaches every Search that uses it. How block variants and formats work explains variants.
General
Setting
What it does
Placeholder Text
The words in the bar or beside the icon, "Search posts, tags and authors" by default. Leave it empty for the icon alone, or for a bar that reads "Search".
Colors
Setting
What it does
Background
The fill of the bar. Muted in the Filled variant. A Search with no fill and no border shows as the icon and text alone.
Text color
The color of the icon and the text.
The Colors group's + menu also adds Gradient.
Spacing
Setting
What it does
Padding
The space inside the bar: 1 rem at the top and bottom and 1.25 rem at the sides by default.
The Search block opens Ghost's built-in search, where visitors type and see matching posts, tags and authors as they type. It shows as a search bar, or as a search icon with optional text. You find it in the Forms group of the block picker. It goes in a Section, a Dialog or a Post Content section, or inside a Group or a Collection. Four of the six header patterns have one, and the Search First and Utility Search hero patterns are built around it.
The Search First pattern above gives the bar your primary color as its Background, and its heading belongs to the section. The search window and its results come from Ghost, so their look and what they include are set by Ghost, not by the block. Add search to your site walks through placing it.
Variant
At the top of the right sidebar, Variant picks the look. A new project has three.
A bar grows to the width of its column, up to 560 px. The variants live in the Forms group of the Blocks panel, where a change reaches every Search that uses it. How block variants and formats work explains variants.
General
Colors
The Colors group's + menu also adds Gradient.
Spacing
The Spacing group's + menu also adds Margin.
Shared settings
The Search also has Width from the Layout settings, Border and Corners from the Colors and appearance settings, the Display settings and the Advanced settings.