How do I add the CTA Button List block to a Hugo site?

Add a "block: cta-button-list" 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 CTA Button List 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 CTA Button List block?

Yes. It exposes 8 content 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 CTA Button List 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/cta-button-list

Calls to actionFree · MITHugo

CTA Button List block

A vertical stack of call-to-action buttons with icons — ideal for link-in-bio pages and resource lists.

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 CTA Button List 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: cta-button-list
  content:
    buttons:
      - text: Join the waitlist
        url: https://hugoblox.com/waitlist
        icon: hero/sparkles
      - text: Read the docs
        url: /docs/
        icon: hero/book-open

Overview

About the CTA Button List block

Drive action with beautiful, conversion-focused button lists

Transform your visitors into engaged users with the CTA Button List block - a sleek, modern way to present multiple call-to-action options in an organized, visually appealing format.

✨ Key Features

Icon Integration: Add engaging icons to every button for visual impact
Hover Animations: Smooth scale and transition effects that invite interaction
Responsive Design: Perfect button sizing and spacing across all devices
External Link Support: Built-in support for external links with proper security attributes
Markdown Support: Rich text formatting for button labels
Clean Styling: Modern card-based design with subtle shadows and borders

🎯 Perfect For

Social Media Links: Create an elegant "link in bio" style page
Resource Collections: Direct visitors to your key resources and tools
Service Offerings: Showcase different services or products you offer
Contact Options: Multiple ways for visitors to reach you
Download Centers: Organize files, guides, and resources for easy access
Partner Links: Highlight collaborations and partnerships

🚀 Why Choose CTA Button List?

High Conversion Design: Proven button styling that encourages clicks and engagement

Flexible & Scalable: Add as many buttons as needed without compromising design

Professional Appeal: Clean, modern aesthetic that works for any industry or use case

Easy Maintenance: Simple configuration that keeps your links organized and up-to-date

📊 Conversion Benefits

Increased click-through rates with prominent, well-designed buttons
Better user experience with clear visual hierarchy
Reduced bounce rates by providing multiple engagement paths
Improved accessibility with proper labeling and focus states

💡 Pro Tips

Use contrasting icons to make each button distinct
Keep button text concise but descriptive
Order buttons by priority or user journey importance
Test different icon styles to match your brand aesthetic

Perfect for entrepreneurs, creators, businesses, and anyone who wants to turn their website visitors into active participants in their ecosystem.

Reference

Configuration

Every option the CTA Button List block accepts, generated from its schema.

Content options

Properties set under the block's content key.

Property	Type	Default	Description
`buttons`required	`object[]`	—	Buttons to render
`buttons[].text`	`string`	—	Button label (supports Markdown)
`buttons[].label`	`string`	—	Alias for text
`buttons[].name`	`string`	—	Alias for text
`buttons[].url`	`string`	—	Button destination. Use `#<section-id>` for a same-page anchor (target block must declare matching `id`), `/path/` for internal pages, or a full `https://…` URL.
`buttons[].link`	`string`	—	Alias for url
`buttons[].icon`	`string`	—	Optional leading icon (icon pack format: pack/icon-name)
`buttons[].new_tab`	`boolean`	false	Open link in a new tab (auto-detected for external URLs and PDFs)

Frequently asked

CTA Button List block FAQ

Add a "block: cta-button-list" 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 CTA Button List block?

Customize with AI View source