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

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 rounding1 on both the inner and outer elements at once.
innerRounded String $rounded any valid rounded-.. If set, should align with acceptable tailwindcss values for rounding1
outerRounded String $rounded any valid rounded-.. If set, should align with acceptable tailwindcss values for rounding1
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 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 %}}

{{< 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?!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.