Craft Blocks Overview

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

The Subheading Block

Here is a subheading. Craft automatically applies H2 formatting to content in a subheading block. Keep the character count low.

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

This is a Quote Block. Use this to create a pull quote, or to highlight a small amount of text. You can add an author's name and information and link too.

Selina

CraftMaster

The Accordion Block

This is an accordion.

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.

Here is a handy form.

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.

2023 Animation + Film Video Showcase Trailer

This is the 2023 Animation + Film Video Showcase Trailer. Congrats, Grads!

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.

Bootsy360x360

Small Dog. Big Attitude.

A rare photo of the domestic turbopig.

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.

Bootsy360x360

This is a small dog. I can add more text here to talk about this small dog.

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.

Hours

Today lunch all day

Tomorrow closed

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!

Alert! Alert!

Click here now!

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.

Events in the Library for Students

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.

News for Staff

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.

Community Updates for Students from the Library

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.

Notices - Drop By!

The Tab Block

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

Student Services Links
Leadership Links

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.

Bootsy360x360

Bootsy

Boss Dog

Pronouns: She/Her

604-555-1234 ext. x.1 | bootsydog@bootsydog.com

Room 125

Small dog. Big attitude.

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.

Here's a column with no styling. You can still add italics, bullets, links etc but the background of this column is plain.

And again, here is another column with no styling.

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.