Craft Blocks Overview

Here's a guide to the ways you can arrange content on webpages.

The Subheading Block

The Body Block

This is a body block. The main content of the webpage goes here.

You can use the icons above to flip to HTML, apply Heading styles and bold and italic formatting, add bullets and tables, insert images, links and files and videos.

The Quote Block

The Accordion Block

The Accordion: Quick Links Block

Use this block to put links inside of an accordion. It's handy for collecting common links your audience may use, in a small amount of space. Style tip: keep your link text short.

The Accordion Form Block

The Accordion Form block allows you to embed a form inside an accordion. This is handy for saving space on a page, and you can also grab the link to the block (in this case, https://www.ecuad.ca/craft-blocks-overview#here-is-a-handy-form) and send people directly to it.

The Form Block

If you don't want to embed your form and instead have it live in the body of a page, use the Form Block. If you want a form to live on a standalone page not attached to any menu, you can place it in a Form Block on a Content Page and send people to that URL.

The Video Block

Use this block to embed a video in a page. You must have a YouTube or Vimeo link to use this. You can add a credit, URL, title and caption using this block.

The HTML Block

You can use this block to add any code you'd like. Use this to embed a signup form, a Google calendar, an appointment booking widget, or to create special custom tools that don't exist in Craft. Here are two examples: one is a step-by-step timeline and the other is the "book shop time" widget you see in the corner of your screen.

Another way to use HTML in a Craft page is to create a Body block, then use the HTML button to flip it to HTML view. Then, you can paste the code in, like below.

The Button Block

There are a few kinds of Button tools you can use. The Button block is the simplest way to create a single button. By default, the button will be centre-aligned.

You can link to an Entry, a URL, and email address and more. If you choose to link to an Asset, like a PDF, you can use the Direct Download toggle to give the user a download prompt instead of opening the PDF in a new tab.

The Image + Credit Block

Use this to place an image in a page. You can add lots of details about the image.

The Image + Text Block

Slightly different from the Image + Credit block: it's more of a thumbnail. You can add fewer details in this one, but you can format the text as you like.

The Graphic Button Block

This is one of the most-often used blocks. You can create Graphic Buttons in rows of up to three. If you don't add an image it will default to the rainbow colour block.

One annoying thing: you can drag and drop to change the order of the Graphic Buttons within one block, but if you have several blocks (eg to create two rows of three), you can only drag and drop within each block. So, if you want to move items from the top row to a lower row, you'll have to delete and recreate them as needed.

The Hours Block and the Hours Exceptions Block

Use the Hours block to add a department's hours to a page. The Hours block is smart: it pulls from the times you enter and displays the hours for today and tomorrow.

A good way to use this is to create an Hours block for each term. Then you can label each block "Spring", "Fall", etc. and toggle the blocks off and on as appropriate. This means you only have to enter the hours once and then turn them off and on as needed.

Important note: The Title in the Hours block is for internal reference only, so you'll have to place a Body block above if you want to add more detail for the reader, like "Here are our Spring hours".

If you know there are particular days where the hours will be different, like stat holidays, you can enter those in an Hours Exceptions block (see backend, below the Hours block). Craft will recognize the date and replace today's and tomorrow's hours with those exceptions.

The Alert Block

Use this (sparingly) to create a small banner that will only appear on this page.

If you want an alert to display across all pages in a Section, you can set that up under the Alert tab on a Section page.

Don't forget to turn it off when the alert is over!

The Events Block

Use this it to place a feed on a page to display events. You can customize the number of events displayed, the audience, the series, and the location.

The News Block

Use this it to place a feed on a page to display news items. You can customize the number of events displayed and the audience.

The Community Updates Block

Use this to place a feed on a page to display Community Updates. You can customize the number of updates displayed, the area and the audience.

The Notices Block

Use this to place a feed on a page to display Notices. You can customize the number of notices displayed and the categories.

The Tab Block

The Tab Block is handy to collect a few links together in a compact space.

The Section Search Block

Use this to add a search bar to a Section. Put it on a Section page and it will search all child pages.

The Newsletter Subscription Block

Use this to embed an email digest signup block.

The Contact Info Block

Use this to add a headshot and contact info. It's similar to the Image + Text block but has required fields so you know what information to put in.

The Link List Block

This is another handy way to collect a list of links. Financial Services uses this to collect a bunch of PDFs in one list.

The Block Link Block

If you want something similar to a Graphic Button Row but simpler, you can use the Block Link Block.

The Button Row Block

If you want to use more than one button at once, you can use the Button Row Block instead of the Button Block.

The Columns Block

Use this to create columns. You can add styling to the columns; see the difference below.

The Gallery Block

The latest addition to our block family! Use this to create a gallery in your page.

The Horizontal Line Block

Use this to break up sections of content. You can choose from a few colours:

The Outlook Calendar Embed Block

The Calendar Embed block allows you to grab an outlook calendar link and drop it into the block, and the block will be formatted to look good on both web and mobile. There’s a tooltip on the block that tells you how to grab the link to the calendar. Note that you can only do this via the outlook web app vs the desktop.