Custom Blocks

Staggered Grid

Creating the Block

  1. Add the Staggered Grid block to your editor using the ‘+’ button on the top left of the editor.
  2. Click the pencil icon on the block to switch to edit mode.
  3. Browse icons from either FontAwesome (free icons) or EKR/DSU Custom Icons for a relevant icon, then copy the HTML that looks similar to: <i class=”fab fa-accessible-icon”></i> and paste it into the editor.
  4. Add a short heading and text.

Tips & Good practices

  • Add at least two grid items for this block to display properly.
  • Choose icons that are relevant to the heading and text.
  • If you add a link that leaves utahtech.edu, goes to the catalog, or directs the user to a file, make the link opens in a new tab.

Bad Practices

  • Do not add this block within a column block. Items will automatically align.
  • Do not use this block without adding icons.