Hugo Column shortcode

Shortcode to show content in multiple columns. Can be useful to save space or easily make compact comparisons.

This article was written for Hugo 0.74.

Usage

There are no options, you can add as many columns as you want they must be split using <--->. You can use any mark-up and shortcodes within them. Note this shortcode requires to use the %-syntax (see this post for more info).

Example

{{% columns %}}

#### Title 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

{{< hint warning >}}
Example text that *may* contain **markdown** `markup`.
{{< /hint >}}

<--->

#### Title 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

<--->

#### Title 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s[^columntest]

{{% /columns %}}

[^columntest]: footnote test in columns

Code

The shortcode which is very straight forward, the content is split by <---> and put in a different container (div). For more info why print is required see this post.

1
2
3
4
5
6
7

<div class="md-columns">
{{ range split .Inner "<--->" }}
{{ printf "<div class=\"markdown-inner\">" | htmlUnescape | safeHTML }}
{{ . | safeHTML }}
{{ printf "</div>" | htmlUnescape | safeHTML }}
{{ end }}
</div>

The accompanying SCSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.md-columns {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;

  >div {
    flex: 1 1;
    margin: 1rem 0;
    min-width: 100px;
    max-width: 100%;
    padding: 0 1rem;
  }

  .markdown-inner {
    margin-top: 0;
    margin-bottom: 0;
  }
}

• Permalink: //oostens.me/posts/hugo-column-shortcode/
• License: The text and content is licensed under CC BY-NC-SA 4.0. All source code I wrote on this page is licensed under The Unlicense; do as you please, I'm not liable nor provide warranty.

• Older
  Hugo Button shortcode
• Newer
  Hugo Expand shortcode