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

https://isotope.metafizzy.co/ is one example of a JQuery plugin that's quite useful.

Breadcrumbs

• Item 1
• Item 2
• Item 3
• Item 4

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

Buttons

Buttons are used for interaction. eg.

• Links
• Menus
• Modals
• Toggles
• Switchers

Filters

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: https://isotope.metafizzy.co/

Toggle

Buttons are used for interaction. eg.

Thumbnails

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

Modals are similar but usually contain articles

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.

• Simple Parallax Tutorial
• Hobo Lobo - A creative use of parallax on the web

Pagination

• 1
• 2
• 3
• 4
• ...
• 20

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

• Tab 1
• Tab 2
• Tab 3
• Tab 4

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

Dropdown

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

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.

Lists

• Alpha
• Beta
• Theta

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

Accordion

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

Slider

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

• FlexSlider