Widget Guide

This page is a useful reference guide for all of the widgets at your disposal for building out the pages of your site.

Have fun building! ?

Blockquote

This is an example of the quote text

Source Publication

Card

Basic card

This basic card doesn't have an image or a call to action, but it can be useful for housing information related to the main copy.

Inverted card

Cards don't have to be the same colour. This one has a dark background colour and inverted text.

Content feed

News feed

Displaying the latest 3 news items in a 3 column grid.

Displaying 2 chosen content items in a two column grid.

Latest Job Summaries

Displaying 3 job summaries as part of a content feed - Latest Jobs.

Filtered Job Summaries

Displaying 3 summaries as part of the content feed - Animation Jobs

Embed

YouTube embed

Vimeo embed

Google Map embed with 4:3 aspect ratio

Google Map embed with 16:9 aspect ratio

Form

Use hint text to provide additional context to the question.
Use hint text to provide additional context to the question.
Use hint text to provide additional context to the question.
Use hint text to provide additional context to the question.

Heading

Page semantics is important when using headings. Ensure that only one H1 is used per page.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Hero

This widget is most commonly used at the top of a page, providing site visitors with a strong first impression.

If using multiple hero widgets with videos on the same page, consider using the 'Lazy Load' option on each additional hero widget in order to improve page performance.

Hero example 1

Alignment: Left (horizontal) / Top (vertical)

Aspect ratio: 3:1

Background: Color

Text color: Inverted

Hero example 2

Alignment: Center (horizontal) / Center (vertical)

Aspect ratio: 16:9

Background: Image

Text color: Inverted

Hero example 3

Alignment: Right (horizontal) / Bottom (vertical)

Aspect ratio: 16:9

Background: Video

Text color: Inverted

Image

A mountain range during sunset

Image widget

Use the image widget to display a single image anywhere within your content.

Responsive image widget

The responsive image widget allows you to use different images at different screen sizes (breakpoints).

This is particularly useful on smaller screens, where an image with a portrait orientation may be better suited than one with a landscape orientation.

List

Ordered list

  1. Item number one
  2. Item number two
  3. Item number three

Unordered list

  • Item number one
  • Item number two
  • Item number three

Section

Section widgets are used to group bits of content together. This allows you to easily re-order sections and change the hierarchy of a page.

Sections are the foundations of all the content on your page and you should always start with one and nest the other widgets inside it.

This is because sections allow you to control the width of the content inside them, giving you lots of flexibility.

The grey areas below indicate the variety of width options that a section widget gives you (accessible via the 'Layout' tab).

Content width: Full

Content width: Wide

Content width: Default

Content width: Thin

Content width: Extra thin

Bottom/top padding: None

Bottom/top padding: Default

Bottom/top padding: Large

Visual Editor

The Visual Editor widget is the best way to manage large amounts of content. Images, videos, lists, quotes and links can all be added within the editor using the context menu (+).

This image has been added via the Visual Editor widget. Once embedded, 
click on an image for width options (this image is wider than the 
content block).
This image has been added via the Visual Editor widget. Once embedded, click on an image for width options (this image is wider than the content block).

  • Item number one
  • Item number two
  • Item number three

Click on a block of content within the Visual Editor to highlight it. Use the menu options to move the block up or down in the content order.

  1. Item number one
  2. Item number two
  3. Item number three

Video modal

The video modal widget creates a button that when clicked, opens a full-screen modal and plays a video.

An image or video thumbnail can be displayed above the button, if desired.

Back to top
Become a Guerrilla 15 openings