Block Builder: Low-Code Page Builder

Build beautiful pages without writing code. HugoBlox’s Block system allows you to stack pre-made components (like Hero sections, Portfolios, and Contact forms) to create unique landing pages.

How It Works

A Landing Page (like your homepage) is defined in content/_index.md. It contains a list of sections, where each section uses a specific block (design).

---
title: Home
type: landing

sections:
  - block: markdown     # <--- A Block
    content:
      title: Welcome
      text: Hello World!
  - block: collection   # <--- Another Block
    content:
      title: Latest Posts
---

Adding Sections

To add a section, open content/_index.md and append a new entry to the sections list.

Example: Hero Section

- block: markdown
  id: hero
  content:
    title: Hi, I'm George
    subtitle: I build open source software.
    text: Welcome to my portfolio.
  design:
    background:
      image:
        filename: bg.jpg
        filters:
          brightness: 0.5

Customizing Blocks

Every block supports common design parameters like background, spacing, and styling.

Backgrounds

Use a photo from assets/media/.

design:
  background:
    image:
      filename: background.jpg
      parallax: true
      filters:
        brightness: 0.6

Use a solid color.

design:
  background:
    color: 'navy'
    text_color_light: true # White text

Create a gradient effect.

design:
  background:
    gradient_start: '#4bb4e3'
    gradient_end: '#2b94c3'
    gradient_angle: 180

Spacing & Style

Control padding and custom CSS classes.

design:
  spacing:
    # Top, Right, Bottom, Left
    padding: ['20px', '0', '20px', '0']
  css_class: 'my-custom-class'

Views

Collection blocks (like Blog or Portfolio) let you choose how to display items.

Showcase

Large featured images with side-by-side text. view: showcase

Card

Standard grid of cards with images. view: card

Compact

Minimal list with small thumbnails. view: compact

Masonry

Pinterest-style layout for portfolios. view: masonry

Icons

HugoBlox includes multiple icon packs. Use them in blocks by specifying pack/name.

Popular Packs
Custom SVG

Hero (Outline): hero/sparkles, hero/academic-cap
Brands: brands/github, brands/twitter, brands/python
Academic: academicons/google-scholar, academicons/orcid
Emoji: :heart:, :rocket:

Save your SVG to assets/media/icons/custom/my-icon.svg.
Use it: icon: custom/my-icon.