How do I add the Features block to a Hugo site?

Add a "block: features" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Is the Features block free to use?

Yes. Every HugoBlox block is free and open-source under the MIT license — use it in personal and commercial projects, with no attribution required.

Can I customize the Features block?

Yes. It exposes 8 content options, plus 1 design options, and inherits the shared block settings for background, spacing, and colors. You can also describe the changes you want to Hugo Chat AI and it will edit the config for you.

Does the Features block work with any Hugo theme?

The block ships in the open-source HugoBlox kit. Add the kit to any Hugo site and the block becomes available in your page sections — there is no theme lock-in.

hugoblox.com/blocks/features

FeaturesFree · MITPreact · interactive

Features block

Show what your product does in a scannable grid of icons, names, and benefit-led descriptions.

Customize with AI View source

Add it to any Hugo page's sections list — no build step.

v1.0.0Version

8Options

MITLicense

Quick start

Add the Features block

Drop this into your page's front matter, under the sections list. Edit the values, and HugoBlox renders the block — no build step.

Add to your page's sections

- block: features
  content:
    title: Everything you need
    text: From data to deployment, one stack.
    items:
      - name: Tailwind 4
        description: Pre-configured tokens, gradients, and typography.
        icon: hero/swatch
      - name: Preact blocks
        description: Composable UI shipped with sensible defaults.
        icon: hero/puzzle-piece
      - name: Docs-ready
        description: Markdown, data-driven content, and inline shortcodes.
        icon: hero/book-open

Overview

About the Features block

Showcase what makes you special with stunning feature grids

Present your key features, services, or benefits in a clean, organized grid that helps visitors quickly understand your value proposition. The Features block combines beautiful icons with compelling descriptions to create trust and drive engagement.

✨ Key Features

Responsive Grid: Automatically adapts from 1 column (mobile) to 3 columns (desktop)
Icon Integration: Beautiful icons that reinforce each feature's purpose
Flexible Layout: 2-3 column layouts that work perfectly with any number of features
Brand Consistency: Cohesive color scheme with your primary brand colors
Markdown Support: Rich text formatting for feature names and descriptions
Center-Aligned: Professional center-aligned layout for maximum impact

🎯 Perfect For

SaaS Features: Highlight the key capabilities of your software platform
Service Offerings: Present your professional services in an organized manner
Product Benefits: Showcase why customers should choose your product
Company Values: Display your core principles and what sets you apart
Process Steps: Break down your workflow or methodology
Technology Stack: Present your technical capabilities and tools

🚀 Why Choose Features Block?

Visual Clarity: Icons and organized layout help visitors quickly scan and understand your offerings

Professional Credibility: Clean, modern design builds trust and demonstrates attention to detail

Conversion Ready: Well-organized features help visitors make informed decisions faster

Brand Reinforcement: Consistent use of your brand colors creates cohesive visual identity

📊 Business Impact

Faster Decision Making: Clear feature presentation reduces visitor confusion
Higher Engagement: Visual icons and organized content keep visitors interested
Better Communication: Structured format ensures key benefits are clearly communicated
Mobile Excellence: Responsive design captures mobile traffic effectively

💡 Best Practices

Limit features to 3-6 items for optimal impact and readability
Use consistent icon styles that align with your brand aesthetic
Keep feature descriptions concise but compelling (1-2 sentences)
Order features by importance or user journey priority
Choose icons that instantly communicate each feature's value

Ideal for startups, SaaS companies, service providers, and any business that needs to clearly communicate their value proposition to potential customers.

Flexibility

Layouts & variants

Switch the block's design with these presets — no custom CSS.

layoutLayout mode. 'grid': uniform 3-column responsive grid — best for symmetric capability lists where every feature has equal weight. 'bento': asymmetric layout where the first item becomes a large featured card (with optional image) and remaining items pack around it — best for highlighting one key feature among supporting ones (the 2026 Linear/Vercel/Framer pattern).

griddefaultbento

Reference

Configuration

Every option the Features block accepts, generated from its schema.

Content options

Properties set under the block's content key.

Property	Type	Default	Description
`subtitle`	`string`	—	Optional eyebrow label rendered in small caps above the title. E.g. 'Built for scale', 'Why teams choose us'.
`title`	`string`	—	Section title (supports Markdown)
`text`	`string`	—	Section description (supports Markdown)
`items`required	`object[]`	—	Array of feature items
`items[].name`required	`string`	—	Feature name/title (supports Markdown)
`items[].description`required	`string`	—	Feature description (supports Markdown)
`items[].icon`	`string`	—	Feature icon. Supports hero/ (Heroicons), brands/ (brand logos), devicon/ (dev tools), or custom packs. Format: 'pack/icon-name' or just 'icon-name' for hero.
`items[].image`	`string`	—	Optional image/screenshot, rendered prominently inside the featured (first) bento card. Filename in assets/media/ or a remote URL. Ignored on small bento cards and in 'grid' layout.

Design options

Properties set under the block's design key — shared background, spacing, and color settings apply on top.

Property	Type	Default	Description
`layout`	`grid \| bento`	grid	Layout mode. 'grid': uniform 3-column responsive grid — best for symmetric capability lists where every feature has equal weight. 'bento': asymmetric layout where the first item becomes a large featured card (with optional image) and remaining items pack around it — best for highlighting one key feature among supporting ones (the 2026 Linear/Vercel/Framer pattern).

Compose

Works well with

Blocks that pair naturally with Features on the same page.

CTA Card CTA Image Paragraph Hero

Frequently asked

Features block FAQ

Add a "block: features" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Ready to build with the Features block?

Customize with AI View source