Open Mon-Fri from 9.00-5.00


You might wonder what the difference is between a Hugo ‘shortcode’ and a Hugo ‘brick’. Shortcodes are placing reusable content in a kind of ‘inline’ way (say in between two paragraphs). An example of a shortcode is a video. Bricks are complete sets of content. An example of a brick is a ‘Call to action brick’. Below you find a list of available bricks.

Stacking bricks

Below an example of a page (‘’ file) with three bricks, stacked on top of each other:

title: Page title
{{< brick_intro >}}{{< /brick_intro >}}
{{< brick_features >}}{{< /brick_features >}}
{{< brick_cta >}}{{< /brick_cta >}}

Brick content

You can choose to write content inside the brick (between the open and the close tag of the brick) to make the brick page-specific. When you immediately close the brick after opening (like in the examples above), the brick will be filled with default content. The default content can be found in ‘content/en/bricks/’, where ‘intro’ is the name of the brick. This file looks similar to this:

title: intro

# The Ultimate Theme You Need To Start Your Hugo Website

Hugobricks is a free website theme built with Hugo and vanilla CSS, providing everything you need to jumpstart your Hugo website and save valuable time.

{{< button "Get started for free" "/get-started/" >}}


Page-specific content

If you want your content to be different on a specific page, you can override it by placing your custom content in between the opening and closing tag of the brick, like this:

{{< brick_cta >}}

... page specific content here...

{{< /brick_cta >}}

Have fun!

Get started with Hugobricks today!

Experience the future of web development with Hugo and stackable content bricks. Build lightning-fast static sites with ease and flexibility.

Get started now