The WolfspyreLabs Blog/ Snippits & Exemplars/ WolfspyreLabs Exemplars/ WolfspyreLabs Shortcodes/ Columns/ 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. https://tailwindcss.com/docs/border-radius#rounded-corners ↩︎ ↩︎ ↩︎ https://oostens.me/posts/hugo-column-shortcode/ ↩︎ https://gizmodo.com/jem-s-adventure-with-the-yeti-and-the-magic-bongos-was-5989528 ↩︎