Skip to main content

Blocks

A Northern Village
A Northern Village

Image - One image, done right.

A single picture with the finishing touches — caption, alignment, an optional border, and a gentle scroll-in animation. The considered way to place one strong visual.

Use it when: you need a single hero shot, poster, diagram, or photo to land.

Options

  • Image & caption;
  • Placement (Full-screen or contained, left/centre/right);
  • Framing (Border style + colour, Animation with adjustable duration).

Pairs with: Text, Gallery.

Tips

  • add a caption — context and accessibility;
  • full-screen for impact, contained within content.

Text + Image

Picture beside your point.

Sets a block of text and a single image side by side, with an adjustable split and the image on whichever side you like. The classic "show and tell".

Use it when:

  • illustrating a paragraph — a story with a photo, a service with an image.

Options

  • Layout (text/image split, Image on Left or right);
  • Finishing (Content Alignment, Image Border + Drop Shadow, per-column Class).

Tips

  • alternate the image side as you repeat the block down a page;
  • keep text and image roughly balanced.

Pairs with: Divider.

Historical building reflected
Historical building reflected

Options

  • Style (Gallery Style, Thumbnail Size, Border Treatment, Align);
  • Carousel extras (overlay text over every slide, with an overlay width).

Pairs with: Blog PostText.

Tips

  • masonry handles mixed portrait/landscape gracefully;
  • carousel for a featured rotation, grid for browsing.

Video

Video, with room to talk.

Shows one or more videos alongside descriptions and images, as a grid or set beside text. Built for more than a lone embed.

Use it when:

  • presenting talks, tutorials, performances, or highlights — singly or as a set.

Options

  • Layout (grid, or split with Video on Left and Content beside it; optional Body Background);
  • Videos (repeatable — embed code, description, image each).

Tips

  • paste the provider's embed code per video;
  • add a short description so viewers know what they'll watch.

Pairs with: Text, Embed.

Embed

Drop in anything with a link

Places external content — a YouTube video, a Google Map, a social post — directly on the page, optionally beside your own text. If it has an embed code, it belongs here.

Use it when:

  • the content lives on another service and you just want it shown in place.

Options

  • Layout (full or split, Embed on Left, Embed Ratio to fix the aspect);
  • Embed Code (paste the iframe) with Content beside it and a per-column Class.

Tips

  • set the ratio to match the source so there's no letterboxing;
  • use the side content to caption or explain.

Pairs with: Text, Video.


View Larger Map

Downtown Guelph