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 TidbitTo 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.
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.