Skip to main content
The FeatureGrid block renders a responsive grid of feature tiles, each displaying a zero-padded sequence number, a title, and a description. It is designed for listing program highlights, sponsor benefits, or curriculum modules in a scannable layout.

​
Props

​
heading
string
Optional section heading rendered as <h2> above the grid at 4xl–5xl. When omitted the grid renders without a heading row.
​
items
FeatureItem[]
required
Array of feature tile objects. At least one item is required (validated in Studio). Each item renders as a Tile component with a numbered badge.
​
columns
2 | 3 | 4
Number of columns in the grid. Defaults to 3. Maps to a SectionGrid size:
  • 2 → lg grid (fewer, wider tiles)
  • 3 → default grid
  • 4 → sm grid (more, narrower tiles)
​
backgroundVariant
'white' | 'light' | 'dark' | 'primary'
Background colour token from the shared block base. Defaults to white.
​
spacing
'none' | 'small' | 'default' | 'large'
Vertical padding override. Defaults to default.
​
maxWidth
'narrow' | 'default' | 'full'
Content container max-width. Defaults to default.
​
class
string
Additional CSS classes passed through from the renderer.
​
id
string
HTML id for anchor-link targeting.

​
FeatureItem fields

Each object in the items array is a featureItem object: 
{
  title: string;        // required — tile heading
  description?: string; // tile body text (supports newlines via whitespace-pre-line)
  icon?: string;        // icon name string (future use)
  image?: {             // optional image with hotspot
    asset: SanityAsset;
    alt: string;        // required for accessibility
  };
}

​
Usage in Sanity Studio

  1. In the Blocks array on a page, choose Feature Grid.
  2. Add an optional Heading for the section.
  3. In Items, click Add item and fill in Title and Description for each feature.
  4. Expand Layout Options and select 2, 3, or 4 columns.
Item descriptions support literal newlines — multi-line text entered in Studio is preserved via whitespace-pre-line CSS.

​
Variants / Options

This block does not have a variant field. The only layout toggle is the columns count.
columnsGrid sizeBest for
2lgLong descriptions, two major pillars
3defaultStandard feature list (default)
4smShort labels, dense capability lists
Tiles automatically display a numbered badge (01, 02, …) that changes to the primary colour on hover.

​
Example

{
  _type: 'featureGrid',
  heading: 'Why Partner With YWCC?',
  columns: 3,
  items: [
    {
      title: 'Diverse Talent Pipeline',
      description: 'Access students from underrepresented groups in computing.'
    },
    {
      title: 'Real-World Projects',
      description: 'Teams work on scoped capstone problems you define.'
    },
    {
      title: 'Brand Visibility',
      description: 'Logo placement on the program site and at showcase events.'
    }
  ]
}

Build docs developers (and LLMs) love

Get started for freeTalk to us