Panels

Welcome to the handy guide to all of the panels and blocks that are available across the Big Bang programmatic website! 🎉

When constructing a new page, a number of different reusable panel types are available for use...


  • Content Panel
    Providing a single or double-column block layout.

  • Tabbed Content Panel
    As per Content Panel but with added tabs.

Content Panel (Intro)

The Content Panel is the most commonly used panel, allowing the choice of one or two column blocks of content using a number of different repeatable block types. These block types are explained in detail below.

Accordion Block

What is the Accordion Block useful for?

The accordion component lets users show and hide sections of related content on a page. It's great for FAQs, or any lengthy sections of text in a question and answer format.

How does it work?

Simply click on the question and the answer is revealed underneath.

Is there a limit on the number of items you can add to an accordion?

No! Use as many as needed.

Embed Block

The Embed Block is useful for embedding third-party Javascript snippets anywhere on a page. Simply paste the code provided into the Embed Code field and that's it! There is no example shown here as there are endless possibilities to what can be embedded.

Features Block

Form Block

Need to embed an Umbraco Form into the page? Simply choose one from a list of available forms. To create more forms, navigate to Forms from the main menu in the Umbraco back office.

Gallery Block

As the name suggests, the Gallery Block allows the selection of any number of images to be displayed in a grid.

Each image can be enlarged with a single click (unless the Disable Lightbox switch is enabled).

Iframe Block

Much like the Embed block, the Iframe block allows an embed of another website but via an iframe. Not intended for use with videos (see Video Block below for more info).

Image Block

The Image Block is useful for adding a single image to the page.

It can also be used alongside another block type, as shown in this example of a Text Block accompanied by an Image Block.

Image Grid Block

The Image Grid Block is very similar to the Gallery Block

The main difference being that the Image Grid Block allows images to be linked to other pages/content. It can also be displayed as a slider instead of a grid layout.

Map Block

Embed a Google Map with an optional marker in the centre.

The map location is calculated via latitude and longitude. The map zoom level can also be customised.

A Quote Block is similar to a Text Block but intended for adding prominence to a quote or testimonial. Start and end quotes can be removed if required along with the name of the person the quote is attributed to.

— Steven Hart, Growth Development Lead at Etch

Stats Block

A useful block for displaying rows of statistical data. Each statistic can be in any format.

  • 828ft

    Height of the Burj Khalifa

  • 2737m

    Length of the Golden Gate Bridge

  • 1.2bn

    Great British Pounds needed to build the Shard

Team Block

Jamie Johnson

Developer, Over 10 years experience in website design and development, with particular expertise in Umbraco.

Sarah Smith

Product Designer, Over 10 years experience in website designing products, with particular expertise in Figma.

Laura Langley

Delivery Lead, Over 10 years experience in delivering digital products.

Text Block

The Text Block does exactly what it says on the tin. A simple wysiwyg editor allowing for formatted text, lists, tables etc. Particularly useful in combination with other blocks in a two column layout. Text Blocks allow the creation of following elements...


Heading 2

Heading 3

Heading 4

Heading 5

Paragraph text (this is the default text style if nothing is selected within 'Formats'). Aerospace is the human effort in science, engineering, and business to fly in the atmosphere of Earth (aeronautics) and surrounding space (astronautics), combined in aerospace engineering. Aerospace organizations research, design, manufacture, operate, or maintain aircraft or spacecraft.

Basic Link

Call to Action Link

Button Link

  • Bullet (unordered) List - Item 1
  • Bullet (unordered) List - Item 2
  • Bullet (unordered) List - Item 3
    • Indented I
    • Indented II
    • Indented III
      • We're really indenting now!
      • Ok, that's enough
  1. Numbered (ordered) list - Item 1
  2. Numbered (ordered) list - Item 2
    1. Indented...
    2. And again

Some italic text

Some bold text

This Is A Simple Table Example
Cell Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell Cell
01234 01234 01234 01234 01234 01234
A Table Containing Some Data Here

Video Block

Tabbed Content Panel

The Tabbed Content Panel is the very similar to the Content Panel, allowing the choice of one or two column blocks of content using a number of different repeatable block types. The difference here is that multiple blocks can be contained within a tabbed layout, as per the example below...

  • First Tab
  • Second Tab
  • Third Tab

Aerospace is the human effort in science, engineering, and business to fly in the atmosphere of Earth (aeronautics) and surrounding space (astronautics), combined in aerospace engineering. Aerospace organizations research, design, manufacture, operate, or maintain aircraft or spacecraft. Aerospace activity is very diverse, with a multitude of commercial, industrial and military applications.

Aerospace is not the same as airspace, which is the physical air space directly above a location on the ground. The beginning of space and the ending of the air is considered as 100 km above the ground according to the physical explanation that the air pressure is too low for a lifting body to generate meaningful lift force without exceeding orbital velocity.

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

— Bill Gates