This is the replacement shortcode for the old 2018/2019 box short codes on the website with the aim to help reduce the dom size of the site.

Box short code showing all options

[ci-2023-box class="" href="" target="" ratio="" icon="" faicon="" text="" toptext="" bottext="" topbartext="" botbartext="" bgimg=""  hovertext=""]

To show the boxes in a 2 grid

[ci-2023-boxes-2-grid]

-- all the ci-2023-boxs code goes here--

[/ci-2023-boxes-2-grid]

To show the boxes in a 3 grid

[ci-2023-boxes-3-grid]

-- all the ci-2023-boxs code goes here--

[/ci-2023-boxes-3-grid]

To show the boxes in a 4 grid

Note: Might have issues fitting text within box.

[ci-2023-boxes-4-grid]

-- all the ci-2023-boxs code goes here--

[/ci-2023-boxes-4-grid]

Colours

The following can be added within the class=”” part of the shortcode to set the preset colours.

Hyperlinks

This is added using href=”” and target=””. To open a new tab set target to target=”_blank” (however it is not recommend for accessibility reasons).

Box Sizes

By default boxs are 3:1 ratio based on the width of the row column or window size. This is set using ratio=””. More can be requested as they have to be defined in the CSS.

Icons

To set an icon image put the URL for icon=””. To use Font Awesome icon, use the class text for the icon using faicon=””

Please note that images resize differently to font awesome icons. As font awesome is a font and not a image.

Text Options

Standard Text

text=””

UCC Style Text

Top text is added as toptext=”” and bottom text is added as bottext=””

Top Bar / Bottom Bar

Top bar is added using topbartext=”” and the bottom bar uses botbartext=””

Background Image

Set using bgimg=””

Hover Text

Set by using hovertext=””

Curves

Add to class=”” only shows on desktops

Button Type

Add btntype=”” two options 3d-light or 3d-dark. If typo, defaults to dark. Works best with links.