↓Skip to main content
  1. Snippits & Exemplars/
  2. WolfspyreLabs Exemplars/
  3. WolfspyreLabs Shortcodes/

Columns

🐺 columns
Organize content side-by-side (horizontally) for better readability.

Attributes #

Name Type Default Valid values Description
size String none DEPRECATED This does nothing
fontScales String See Desc a tailwind font size/breakpoints list This sets the font value for content at different breakpoints. Default: “text-2xs sm:text-xxs md:text-xs lg:text-sm xl:text-base”
innerAlign String center left, start, center, justify, right, end Sets the text-... tailwindCSS class for all inner columns. shifts the inner containers’ text alignment.
innerBG String See Desc a valid bg-.. value Sets the background of the inner elements Default: bg-slate-900/05 dark:bg-slate-900/05
innerMargin String m-0 a valid margin tailwind value Sets the margin class of the inner column elements. Set to whatever padding you wish.
innerPad String px-2 a valid padding tailwind value Sets the padding class of the inner elements. Set to whatever padding you wish.
innerRing String none a valid ring-value If the value of innerRing is NOT ‘none’ then the inner elements are enhanced with a ring.
innerRingColor String See Desc a valid ring-.. value Default: ring-secondary-400/50 dark:ring-secondary-200/50 Sets the ring color for the inner elements
innerRounded String $rounded a valid rounded-.. If set, should align with acceptable tailwindcss values for rounding1
innerShadow String See Desc a valid shadow value Sets the tailwind shadow for the inner elements. Default: drop-shadow-xl
innerWidth String none a valid width tailwind value Sets the default width attribute of the inner elements. This is still controlled by the breakpoints specified for the inner class list
innerWidthMax String See Desc a tailwind max-w/breakpoint list Sets the max-width attribute breakpoints for the inner elements. Default: max-w-lg md:max-w-lg lg:max-w-lg xl:max-w-full
mode String renderstring renderstring, safehtml Determines if the content will be parsed with renderString, or safeHTML
outerBG String none a valid bg-.. value If set, Sets the background of the outer element
outerMargin String m-0.5 a valid margin tailwind value Sets the margin class of the outer column element. Set to whatever padding you wish.
outerPad String p-0.5 a valid padding tailwind value Sets the padding class of the outer element. Set to whatever padding you wish.
outerRing String none a valid ring-value if the value of outerRing is NOT ‘none’ then the outer element is enhanced with a ring.
outerRingColor String See Desc a valid ring-.. value Sets the ring color for the outer element. Default ring-secondary-300/50 dark:ring-secondary-500/50
outerRounded String $rounded a valid rounded-.. If set, should align with acceptable tailwindcss values for rounding1
outerWidth String none a valid width tailwind value Sets the default width attribute of the outer element. This is still controlled by the breakpoints specified for the outer class list
outerWidthMax String See Desc a tailwind max-w/breakpoint list Sets the max-width attribute breakpoints for the outer elements. Default: max-w-lg md:max-w-lg lg:max-w-lg xl:max-w-full
rounded String none any value rounded-.. sugar-sweet shorthand to adjust the rounding1 on both the inner and outer elements at once.

Usage #

The mode toggle allows for two different modes of content parsing. I took the implementation from Nelis Oostens version2; which allows one to display footnotes in columns.

Noteworthy Tidbit
To do this, one must use the alternate shortcode invocation syntax:
{{% columns mode=“safehtml” %}}
…
{{% /columns %}}

RenderString (<>) Example #

{{< columns >}} <!-- begin columns block -->
## Left Content
Dolor sit, sumo unique argument um no ...  
Note that for some reason,  
the button shortcode won't work properly if not isolated with spacing like this:

{{< button href="https://github.com/thegeeklab/hugo-geekdoc" >}}{{<icon github >}}{{< /button >}}

<---> <!-- magic separator, between columns -->
## Mid Content
SOMEONE ATE AN ORNATELY BLAND YETI  
...AND PLAYED THE BONGOS?!?   
[What the hell?!][gizmodo-wth][^gizmodo-wth]
<---> <!-- magic separator, between columns -->
## Right Content
Dolor sit, sumo unique argument um no ...

{{< button href="https://github.com/thegeeklab/hugo-geekdoc" >}}
{{<icon github >}}
{{< /button >}}

{{< /columns >}}

Left #

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates Note that for some reason, the button shortcode won’t work properly if not isolated with spacing like this:

Mid Content #

SOMEONE ATE AN ORNATELY BLAND YETI
…AND PLAYED THE BONGOS?!?
[What the hell?!][gizmodo-wth][^gizmodo-wth]

Right Content #

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re.

SafeHTML (%%) Example #

{{% columns mode="safehtml" rounded="2xl" outerRing="2" innerRing="1" %}}

## Left
Dolor sit, sumo unique argument um no. Gracie nominal id xiv.  
Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re.

{{< button href="https://github.com/thegeeklab/hugo-geekdoc" >}}
{{<icon github >}}
{{< /button >}}

<--->
## Mid Content
SOMEONE ATE AN ORNATELY BLAND YETI  
...AND PLAYED THE BONGOS?!?  
[What the hell?!][gizmodo-wth][^gizmodo-wth]
<--->
## Right Content
Dolor sit, sumo unique argument um no. 
Gracie nominal id xiv. Romanesque acclimates investiture. 
Ornateness bland it ex enc, est yeti am bongo detract re. 

{{< button href="https://github.com/thegeeklab/hugo-geekdoc" >}}
{{<icon github >}}
{{< /button >}}
{{% /columns %}}

Left #

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re.

Mid Content #

SOMEONE ATE AN ORNATELY BLAND YETI
…AND PLAYED THE BONGOS?!?
What the hell?!3

Right Content #

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re.

Advanced Abuse Examples #

These are terrible ideas.
Don’t try these at home, kids!

{{< columns rounded="xl" innerAlign="center" innerRing="2"  
  innerRingColor="ring-green-300/30 dark:ring-green-400/30"  
  innerBG="bg-green-500/10 dark:bg-green-800/10"  
  innerWidth="w-full" >}} <!-- begin columns block -->
{{< columns rounded="5" 
  innerAlign="center" 
  innerRing="2" 
  innerRingColor="ring-green-400/50 dark:ring-green-600/50 first:ring-0" 
  innerBG="bg-green-700/10 dark:bg-green-900/10" 
  innerWidth="w-full" >}}<!-- begin sub-columns block -->
## First Content
note no ring here!  
Dolor sit, sumo unique argument um no ...
<---> <!-- magic separator, between columns -->

## Sub-Column's Second Content
Dolor sit, sumo unique argument um no ...

<---> <!-- magic separator, between columns -->

## Sub-Column's Third Content
Dolor sit, sumo unique argument um no ...
{{< /columns >}}<!-- end sub-columns block -->
More Content

Main Column 
{{< /columns >}}<!-- end columns block -->

Sub-Column’s First Content #

note no ring here!
Dolor sit, sumo unique argument um no …

Sub-Column’s Second Content #

Dolor sit, sumo unique argument um no …

Sub-Column’s Third Content #

Dolor sit, sumo unique argument um no …

More Content

Main Column

Another colorful terrible idea #

Here’s another terrible idea ;)
Well, maybe not TERRIBLE but you get the point.

{{< columns
  innerAlign="center"
  outerRing="1"
  outerRounded="xxl"
  outerRingColor="ring-yellow-400/50 dark:ring-yellow-200/50"
  outerBG="bg-gradient-to-b from-yellow-500/10 to-red-500/10 dark:from-yellow-700/10 dark:to-red-800/10" >}}

#### Column1 Element 1

{{< columns
  innerAlign="left"
  outerRounded="xxxl"
  outerRing="2"
  outerRingColor="ring-cyan-400/30 dark:ring-cyan-300/40"
  outerBG="bg-gradient-to-br from-blue-300/10 to-blue-500/15 dark:from-blue-700/5 dark:to-blue-950/50"
  >}}
`column1 sub-column1 element1`
: First content within the first sub-column.
{{< /columns >}}

#### More Column1 Content

{{< columns
  innerAlign="left"
  outerRounded="xxxl"
  outerRing="2"
  outerRingColor="ring-green-400/40 dark:ring-green-600/40"
  outerBG="bg-gradient-to-tr from-green-300/10 to-green-500/40 dark:from-blue-700/5 dark:to-green-900/40" >}}
`Column1 Sub-column2 element 1`
: First content within the SECOND sub-column.
{{< /columns >}}

<--->

#### Column2 Element 1

{{< columns innerAlign="left"
  outerRounded="xxxl"
  outerRing="2"
  outerRingColor="ring-cyan-400/30 dark:ring-cyan-300/40"
  outerBG="bg-gradient-to-bl from-blue-300/10 to-blue-500/15 dark:from-blue-700/5 dark:to-blue-950/40" >}}
`column2 sub-column1 element1`
: First sub-column of the Main Column's second element.
{{< /columns >}}

#### More Column2 Content

{{< columns innerAlign="left"
  outerRounded="xxxl"
  outerRing="2" 
  outerRingColor="ring-green-400/40 dark:ring-green-600/40" 
  outerBG="bg-gradient-to-tl from-green-300/10 to-green-500/40 dark:from-blue-700/5 dark:to-green-900/40" >}}
`column2 sub-column2 element1`
: sub-column2 of the SECOND main column.

{{< /columns >}}
{{< /columns >}}

Column1 Element 1 #

column1 sub-column1 element1
First content within the first sub-column.

More Column1 Content #

Column1 Sub-column2 element 1
First content within the SECOND sub-column.

Column2 Element 1 #

column2 sub-column1 element1
First sub-column of the Main Column’s second element.

More Column2 Content #

column2 sub-column2 element1
sub-column2 of the SECOND main column.
{{% columns
  innerAlign="center"
  outerRing="1"
  outerRounded="xxl"
  outerRingColor="ring-yellow-400/50 dark:ring-yellow-200/50"
  mode="safehtml"
  outerBG="bg-gradient-to-b from-yellow-500/10 to-red-500/10 dark:from-yellow-700/10 dark:to-red-800/10" %}}

#### Column1 Element 1

{{< columns
  innerAlign="left"
  outerRounded="xxxl"
  outerRing="2"
  outerRingColor="ring-cyan-400/30 dark:ring-cyan-300/40"
  outerBG="bg-gradient-to-br from-blue-300/10 to-blue-500/15 dark:from-blue-700/5 dark:to-blue-950/50"
  >}}
`column1 sub-column1 element1`
: First content within the first sub-column.
{{< /columns >}}

#### More Column1 Content

{{< columns
  innerAlign="left"
  outerRounded="xxxl"
  outerRing="2"
  outerRingColor="ring-green-400/40 dark:ring-green-600/40"
  outerBG="bg-gradient-to-tr from-green-300/10 to-green-500/40 dark:from-blue-700/5 dark:to-green-900/40" >}}
`Column1 Sub-column2 element 1`
: First content within the SECOND sub-column.
{{< /columns >}}
<--->

#### Column2 Element 1

{{< columns innerAlign="left"
  outerRounded="xxxl"
  outerRing="2"
  outerRingColor="ring-cyan-400/30 dark:ring-cyan-300/40"
  outerBG="bg-gradient-to-bl from-blue-300/10 to-blue-500/15 dark:from-blue-700/5 dark:to-blue-950/40" >}}
`column2 sub-column1 element1`
: First sub-column of the Main Column's second element.
{{< /columns >}}

#### More Column2 Content

{{< columns innerAlign="left"
outerRounded="xxxl"
outerRing="2"
mode="safehtml"
outerRingColor="ring-green-400/40 dark:ring-green-600/40"
outerBG="bg-gradient-to-tl from-green-300/10 to-green-500/40 dark:from-blue-700/5 dark:to-green-900/40" >}}

`column2 sub-column2 element1`
: sub-column2 of the SECOND main column.

[link][gizmodo-wth][^gizmodo-wth]

{{< /columns >}}

[link][gizmodo-wth][^gizmodo-wth]

{{% /columns %}}

Column1 Element 1 #

column1 sub-column1 element1
First content within the first sub-column.

More Column1 Content #

Column1 Sub-column2 element 1
First content within the SECOND sub-column.

Column2 Element 1 #

column2 sub-column1 element1
First sub-column of the Main Column’s second element.

More Column2 Content #

column2 sub-column2 element1
sub-column2 of the SECOND main column.

link3

link3

  1. https://tailwindcss.com/docs/border-radius#rounded-corners ↩︎ ↩︎ ↩︎

  2. https://oostens.me/posts/hugo-column-shortcode/ ↩︎

  3. https://gizmodo.com/jem-s-adventure-with-the-yeti-and-the-magic-bongos-was-5989528 ↩︎ ↩︎ ↩︎