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
`mode`	String	`renderString`	`renderstring`, `safeHTML`	Determines if the content will be parsed with `renderString`, or `safeHTML`
`innerRing`	Integer	`0`	any valid ring-`#`	If the value of `innerRing` is > 0; then the inner elements are enhanced with a ring.
`rounded`	String	`none`	any value rounded-`..`	sugar-sweet shorthand to adjust the rounding¹ on both the inner and outer elements at once.
`innerRounded`	String	`$rounded`	any valid rounded-`..`	If set, should align with acceptable tailwindcss values for rounding¹
`outerRounded`	String	`$rounded`	any valid rounded-`..`	If set, should align with acceptable tailwindcss values for rounding¹
`outerRing`	Integer	`0`	any valid ring-`#`	if the value of `outerRing` is > 0; then the outer element is enhanced with a ring.
`innerAlign`	String	`center`	`left`, `start`, `center`, `justify`, `right`, `end`	Sets the text-`...` tailwindCSS class for all inner columns. shifts the inner containers’ text alignment.

Usage #

The mode toggle allows for two different modes of content parsing. I took the implementation from Nelis Oostens version²; 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 %}}

{{< columns >}} <!-- begin columns block -->
## Left Content
Dolor sit, sumo unique argument um no ...

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

## Mid Content
Dolor sit, sumo unique argument um no ...

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

## Right Content
Dolor sit, sumo unique argument um no ...
{{< /columns >}}

RenderString (<>) Example #

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?![^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 #

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?!³

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.