Building with Blocks

The new YaleSites platform features a variety of specialized content containers called Blocks designed to help site builders, editors, and content creators organize information.

Building with Blocks differs from writing in a Word document or using a traditional page-centric approach. This resource will help you understand the Blocks available and how to use them to make your content shine.

Content Types: Content blocks work on all YaleSite content types. Selecting the appropriate Content Type is key in building and managing your website content. Each content type has different attributes and functionality. Learn about the YaleSites content types before building with content blocks.

Layout Builder: Layout Builder is the visual editing environment where you’ll assemble the Blocks best suited to your content needs. Learn how to use the layout builder before building with content blocks.

Content Blocks

What are blocks?

Working with content in Blocks

Text & Content Blocks

Featured Content Blocks

Dynamic Content Blocks

Media Blocks

Calls to Action Blocks

Content Block Resources

illustration of a layout build with blocked content areas

What are Blocks?

Blocks are flexible, pre-designed components—like Text, Image, or Button blocks—that make it easy to build and manage your site without coding. Each block represents a piece of content you can add, move, or edit visually.

With Blocks, you can:

  • Focus more on content, less on technical details
  • Quickly add and arrange content
  • Mix and match components to fit your layout needs
  • Easily update or restyle content 
  • Ensure accessibility and performance best practices

Working with content in Blocks

Transitioning from a page-centric mindset may be challenging at first but can yield exemplary results. Understanding your goals, objectives, and user needs before you build simplifies the process and helps set you up for success.

This helps to inform your overall site structure, as well as where to place Blocks and which Blocks to use.

  • Outline your content before you start building
  • Prioritize your most important information and calls to action
  • Consider what you’d like your users to do next and guide them along this path
  • Know what success looks like so you’re prepared to evaluate your approach

  • Will you need to feature a call to action, and if so, what level of prominence is appropriate?
  • Do you need to attach media assets, and if so,  do those media assets require captions or attribution?
  • Can you apply Tags and use the View Block to display content efficiently?

Just as excessive, unstructured text can lead to page abandonment, too many visual elements in close proximity can yield the same results.

  • Give your Blocks room to breathe
  • Keep your calls to action focused so they’re not in competition with each other

  • Create different versions of your content and switch up your block selections when you’re uncertain which block best supports your needs. Then, share both versions of your content with colleagues to gather feedback on which works best.
  • Adjust your theme settings to unlock alternate style options for Blocks

Organized for Easy Building

Blocks are grouped by type to help you quickly find, select, and build with confidence.

Text & Content Blocks

  • Accordion Block

    Accordion is an interactive Block that allows users to choose which sections of content to expand and explore further.

  • In-line Message Block

    The In-Line Message block allows you to highlight crucial information, instructions and deadlines directly on the page.

  • Quote Block

    Use the Quote Block to emphasize or highlight text, such as a key information, a statement, a testimonial, or another type of quotation.

  • Tabs Block

    Tabs are another interactive Block used to organize content into distinct categories. Unlike Accordions, only one Tab can be viewed at a time.

  • Wrapped Text Callout Block

    Use the Wrapped Text Callout Block to draw attention to important text on your page. The surrounding text wraps around your callout, creating an engag

Featured Content Blocks

  • Facts and Figures Block

    Use the Facts and Figures Block to present key content in an organized grid with a visually appealing banner-like background.

  • Grand Hero Block

    The Grand Hero is designed to capture your audience’s attention. Use this Block to promote key messaging and calls to action.

  • Quote Callout Block

    Display a featured quote from a person or organization, accompanied by an image and banner-like background.

  • Reference Card Block

    The Reference Card block lets you take an existing piece of content and show it off with an eye-catching card.

  • Spotlight - Landscape Block

    The Spotlight Landscape Block combines an image, adjacent text, and a call to action. Use this Block to highlight or promote your featured content.

  • Spotlight - Portrait Block

    The Spotlight Portrait Block combines an image, adjacent text, and a call to action. Use this Block to highlight or promote your featured content.

Dynamic Blocks

  • Calendar Block

    Use the Calendar List Block to quickly add a dynamic list of all published Events to your site.

  • Post Feed Block

    Use the Post Feed Block to quickly add a dynamic list of all published Posts to your site.

  • Profile Directory Block

    Use the Profile Directory Block to easily add a dynamic directory to your site. This Block is an excellent choice when creating a Contact page.

  • Taxonomy Display Block

  • View Block

    At a basic level, the View Block can quickly add dynamic Post, Event, and Profile feeds to your site.

Media Content Blocks

  • Embed Block

    Use the Embed Block to display external resources within your site, such as a Microsoft Power BI report.

  • Gallery Block

    The Gallery Block allows you to easily display a collection of images on your website.

  • Image Block

    The Image Block allows you to easily showcase standalone images on your website, with optional captions for added context.

  • Media Grid Block

    The Media Grid Block allows you to easily display a collection of images on your website.

  • Video Block

    Add YouTube or Vimeo videos to your website with the Video Block. Enter the URL, adjust the name, and save to the Media Library.

  • Wrapped Image

    Add an inline image to your content with the Wrapped Image Block. The text entered in this Block will flow around your selected image.

Calls to Action Blocks

  • Action Banner Block

    The Action Banner is designed to capture your audience’s attention. Use this Block to promote key messaging and calls to action.

  • Button Link Block

    The Button Link Block helps to emphasize the importance of a call to action on your page.

  • Callout Block

    The Callout Block is designed to draw attention to an important call to action on your page.

  • Custom Cards Block

    The Custom Card Block creates a collection of easy-to-scan, visually engaging pathways to additional content.

  • Link Grid Block

    Display columns of important links, such as resources and related content, in a clean and organized layout.

  • Quick Links Block

    The Quick Links Block is designed to highlight a group of related calls to action in an eye-catching way.

  • Tiles Block

    Easily showcase short content in a captivating grid of Tile cards with branded background colors and images.

Content Block Resources

Resources to guide you as you build with content blocks.