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

Card with image

Cards are a great way to highlight specific bits of content. They can include images, like this one, and if you give them a call to action you can guide users around your site.

Learn more »

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.

Carousel

  • Slide heading

    This is an example of some slide text content. Use it to explain the heading further, or give additional context to the background image.

    Learn more »

  • Slide heading

    Learn more »

Content feed

News feed

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

Elijah's headshot

Guerrilla Spotlight: Elijah Houck

17 May 2022 Life at Guerrilla
Elijah sat down with us to explain what a Senior World Designer does and how he entered the field.
Aloy Cosplayers meet the LEGO Tallneck

Guerrilla Celebrates the Arrival of the LEGO® Tallneck

05 May 2022 Horizon Life at Guerrilla
The iconic Tallneck machine from our Horizon series finally arrived in brick form on 1 May!
Alexis Russell's headshot

Guerrilla Spotlight: Alexis Russell

07 April 2022 Life at Guerrilla
We sat down with Alexis to talk about her path into game development and her role as a producer

Featured content feed

Displaying 2 chosen content items in a two column grid.

Photo of Johanna
Game Tech Programmer

Johanna Persson

Swedish-born Johanna Persson is a Game Tech Programmer at Guerrilla's Amsterdam studio. Originally a Technical Animator on Killzone Shadow Fall, she made the leap to Game Tech in the run-up to Horizon Zero Dawn.

Photo of Blake
Game Designer

Blake Rebouche

Louisiana native Blake Rebouche has been at the Guerrilla studio in Amsterdam since 2015. A game designer with a passion for telling stories through design, he worked for some of Horizon Zero Dawn’s most memorable quests.

Latest Job Summaries

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

Programming

Tools Designer

Posted: yesterday
Programming

Game Server Engineer (Java)

Posted: yesterday
Animation

Technical Animator

Posted: 2 days ago

Filtered Job Summaries

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

Animation

Technical Animator

Posted: 2 days ago

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.

Gallery

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.

Link

Default link
Default link with chevron »
Primary link
Primary link with chevron »
Secondary link
Secondary link with chevron »
Tertiary link »
Tertiary link with chevron »

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.

Play latest trailer
Play latest trailer
Play latest trailer
Become a Guerrilla 15 openings