Anchors
By providing a jquery selector, anchors are created and a list of links to those anchors is inserted in place of the shortcode. For example [anchors selector="#content h2" title="On this page:" /] will add anchors to all h2 headings within the .content element, and create a list of links to those anchors and title that list with "On this page:".
Back to Top
Places a "Back to Top" link at the place of the shortcode which will return the user to the top of the content.
[backtotop /]
Blockquote
Provides a more styled blockquote with the options of floating, font style, and an icon.
[blockquote icon="fa-quote-left , or any font awesome icon class" style="serif/sans-serif"]your content here[/blockquote]
Box
Adds a box with a background color to help highlight content with an option for color, style, title and float.
[box color=black,darkgray,lightgray,white float=right/left style=filled/border title="Optional Box Title"]your content here[/box]
Button Groups
Styles a set of buttons.
[buttongroup color="blue" size="regular"]Button Shortcodes[/buttongroup]
Callout
Provides a way to offset content to draw attention to it.
[callout size="small/large/xlarge"]Content[/callout]
Clear
Clears any floats that may have been added.
[clear/]
Close Margin
Removes bottom margin to reduce space between elements
[close-margin /]
Columns
Formats content into columns with options for column width.
[column size=one-half]
Your Content Here
[/column][column size=one-half order=last]
Your Content Here
[/column]
Column List
Displays a list in columns with an option for the number of columns.
[columnlist columns="2"]
Countup
Wrapping a number in this shortcode will render a 0, and then animate the number increasing until it reaches the original value.
[countup]5000[/countup]
Expand
This shortcode provides a trigger to toggle hidden content.
[expand title="Title goes here" heading="h2/h3/h4/h5/h6/div" style="large/small/tooltip"]your content here[/expand]
Google Calendar
Embed a Google calendar.
[googlecalendar]YOUR GOOGLE CALENDAR EMBED URL[/googlecalendar]
Invisible
Hides content from displaying on the screen in a way that can still be read by a screenreader.
[invisible]is invisble[/invisible]
Map
Embeds a Campus Map or Google Map with a height option.
[map size="small/medium/large"]MAP URL[/map]
Masonry Images
Wrapping multiple images in a masonry shortcode displays them in a masonry pattern.
[masonry-images]Insert Images Here[/masonry-images]
Print
Adds a "print this page" link.
[print]Print this page[/print]
Responsive Table
Wrapping a table in this shortcode helps it be used on smaller screens by allowing the user to scroll horizontally. An optional breakpoint value can trigger when the scrolling starts.
[responsive-table breakpoint="800"]HTML Table Here[/responsive-table]
Sidebar
Provides a floated element with optional styles and float direction.
[sidebar float=right/left style=plain,border]Here is some text for a sidebar callout[/sidebar]
Tooltip
Adds a coverable tooltip to text.
[tooltip tip="Here is the tool tip content"]Here is the context to hover over to see the tool tip[/tooltip]
Copied from Kevin's ticket: https://github.com/CuBoulder/ucb2021_base/issues/185
There's still a number of shortcodes from Drupal 7 Express that need to be implemented. Below are the remaining shortcodes and descriptions of how they work. Most shortcodes, unless specified, come from the cu_shortcodes module: https://github.com/CuBoulder/express_mono/blob/dev/modules/custom/cu_shortcodes
Anchors By providing a jquery selector, anchors are created and a list of links to those anchors is inserted in place of the shortcode. For example [anchors selector="#content h2" title="On this page:" /] will add anchors to all h2 headings within the .content element, and create a list of links to those anchors and title that list with "On this page:".
Back to Top Places a "Back to Top" link at the place of the shortcode which will return the user to the top of the content. [backtotop /]
Blockquote Provides a more styled blockquote with the options of floating, font style, and an icon. [blockquote icon="fa-quote-left , or any font awesome icon class" style="serif/sans-serif"]your content here[/blockquote]
Box Adds a box with a background color to help highlight content with an option for color, style, title and float. [box color=black,darkgray,lightgray,white float=right/left style=filled/border title="Optional Box Title"]your content here[/box]
Button Groups Styles a set of buttons. [buttongroup color="blue" size="regular"]Button Shortcodes[/buttongroup]
Callout Provides a way to offset content to draw attention to it. [callout size="small/large/xlarge"]Content[/callout]
Clear Clears any floats that may have been added. [clear/]
Close Margin Removes bottom margin to reduce space between elements [close-margin /]
Columns Formats content into columns with options for column width. [column size=one-half]
Your Content Here
[/column][column size=one-half order=last] Your Content Here
[/column] Column List Displays a list in columns with an option for the number of columns. [columnlist columns="2"]
List Item List Item [/columnlist] Countdown Displays a countdown to a specified date with granularity and display options. https://github.com/CuBoulder/express_mono/tree/dev/modules/custom/cu_countdown_bundle/cu_countdown [countdown style="stacked/inline"]MM/DD/YYYY hh:mm:ss[/countdown]
Countup Wrapping a number in this shortcode will render a 0, and then animate the number increasing until it reaches the original value. [countup]5000[/countup]
Expand This shortcode provides a trigger to toggle hidden content. [expand title="Title goes here" heading="h2/h3/h4/h5/h6/div" style="large/small/tooltip"]your content here[/expand]
Google Calendar Embed a Google calendar. [googlecalendar]YOUR GOOGLE CALENDAR EMBED URL[/googlecalendar]
Invisible Hides content from displaying on the screen in a way that can still be read by a screenreader. [invisible]is invisble[/invisible]
Map Embeds a Campus Map or Google Map with a height option. [map size="small/medium/large"]MAP URL[/map]
Masonry Images Wrapping multiple images in a masonry shortcode displays them in a masonry pattern. [masonry-images]Insert Images Here[/masonry-images]
Print Adds a "print this page" link. [print]Print this page[/print]
Responsive Table Wrapping a table in this shortcode helps it be used on smaller screens by allowing the user to scroll horizontally. An optional breakpoint value can trigger when the scrolling starts. [responsive-table breakpoint="800"]HTML Table Here[/responsive-table]
Sidebar Provides a floated element with optional styles and float direction. [sidebar float=right/left style=plain,border]Here is some text for a sidebar callout[/sidebar]
Tooltip Adds a coverable tooltip to text. [tooltip tip="Here is the tool tip content"]Here is the context to hover over to see the tool tip[/tooltip]