A list of commonly used devices and elements used for structure organisation and layout all of which contribute to the overall user interface.

More to be added...

Cards / Panels

This grey block is a panel or a card.

Used with grids to separate or highlight content

Hamburger Menu

This icon , known as 'hamburger' has become synonymous with main menus/navigation in mobile or tablet view. It usually triggers the opening of a modal, an off-canvas or a hidden element containing a navigation system.

Masonry Grid

This stack of UI components are displayed in a masonry grid which stacks cards/boxes in a format similiar to bricks is one example of a JQuery plugin that's quite useful.


A device useful for navigating deep structures and aiding users to see their journey and navigate back to previous sections


Buttons are used for interaction. eg.

  • Links
  • Menus
  • Modals
  • Toggles
  • Switchers


This masonry grid features a filter which allows panels of a certain type to be shown while others are hidden. This can be used to organise information and ease in finding specific items.

A useful Jquery plugin for masonry grids and filters:


Buttons are used for interaction. eg.

The toggle switches from one set of content
to another set of content showing something else.


Thumnails are usually separate smaller size image files of a larger image. Use thumnails for quicker downloads with an option to open a larger image if needed.

Lightboxes & Modals

Lighboxes are one example of a method to open larger images in a modal format


Modals are similar but usually contain articles

This opens a modal


This is Parallax

More of a presentation method and not so much a component but still interesting. This was a big trend in web sites at one point but seems to be dying off.

Parallax is based on mathematical/physics principles dealing with displacement of objects giving the illusion of depth. Traditionally it was used in theatre set designs to create the illusion of large scenes on a small stage when combined with foreshortening and perspective trickery. The same concept is used in websites to create interesting movement and illusion of depth in user interfaces. Commonly used with images while scrolling down a long page.


Give users some context break down content into chunks where there is aot of information. Usually used when displaylarge amounts of blog posts or items in a gallery

Horizontal Navigation

Navigation is common in websites and apps. The horizontal navigation bar is one of the most common.

Horizontal Navigation

Tabs are a way of grouping information in a contained space, usually in a panel below or above the tab menu

Tabs are a core feature in JQuery UI


Almost a standard part of navigation, Dropdowns are useful due to their space saving nature and means of grouping and categorisation


Open an Off-Canvas

An element hidden by default off to one side of the screen which can slide in when via interaction with a link/button or some other trigger.


  • Alpha
  • Beta
  • Theta

Bulleted items, striped, a list is pretty much self-explanatory


Accordion Heading

Content goes in here

Accordion Heading

Content goes in here

Accordion Heading

Content goes in here

Similiar to Tabs and Switchers, Accordions are a way of organising information in a compact format.


Sliders are often used as banners to display galleries of images, slides or sales promotions. There are many Jquery plugins out there which acheive the same function in varying degrees of complexity.

This particular example below is FlexSlider

This is a modal, a pop upwindow displaying something over the main content.


The overlay is the grey background laid over the main page content.


This is an off canvas. It can slide in from either side, top or bottom. Usually acheived via a JQuery plugin of some sort.