Box Layouts are designed to give you a headstart with your application layout. Box layouts contain horizontal navigation, page heading and a container to add more components.

boxed_layout

Sidebar Layouts provide an alternate master layout for your application. Sidebar layouts contain vertical navigation, header and a container to add more components.

sidebar_layout

master_layout

Cards are flexible and extensible content containers. Use cards for webapp layouts.

card

Grids are required to use grid cards. Any kind of layout can be built using grids.

grid

Grid cards are pre-defined cards that can be used to create dashboards and webapp pages. The cards have certain UX that can be modified to fit the needs of various use cases.

grid_card

layout

header

Use this pattern for primary navigation of a webapp. The navigation can be easily modified to add menu items and action item icons.

horizontal_navigation

Use these patterns where pagination is required. The patterns can be used with lists, tables and carousels.

pagination

Use tabs for secondary navigation in webapp pages. Tabs are a great way to organize content across different screens, data sets, and other interactions.

vertical_navigation

navigation

Avatars present the users identity in the digital space. This category has different variations with images and text.

avatar

Badges are used when an element needs to be highlighed and/or differentiated. They are used for emphasizing certain information.

badge

Buttons communicate actions that users can take and are used throughout the user interface. They provide relevant actions in context to where the user is.

button

Grouped buttons provide multiple, relevant actions throughout the interface that the user can interact with. They are used to reduce complexity of multiple actions.

grouped_button

Popovers are temporary views that show on a content screen when a user clicks within a defined area when an additional action is needed.

popover

Progress bars inform users of how close they are to completing a set of tasks by showing the proportion of completion.

progress_bar

A tooltip is a brief, informative message that appears when a user interacts with an element. It provides additional information for clarification.

tooltip

UI_element

Use this pattern for keeping track of events.

calendar

alert

feedback

Use action panels in form layouts where an action is required.

action_panel

Standard dropdowns in various styles and configurations.

dropdown

Form layouts are pre-built layouts which can be easily modified to fit the needs of various use cases.

form_layout

This is basic form field. It has a few layout options and styles with labels.

input_group

Sign in layouts are pre-designed pages used for authentication and registration.

sign_in

Standard form elements with various styles and layout options.

toggle_checkbox_radio

form

graph

Use card headings with Grid cards, tables and lists.

card_heading

Page headings are designed to use with primary navigation in pages. 

page_heading

heading

note

Use modals to inform users about specific action they need to take along with a message. Modals have pre-designed layout with certain UX that can be easily modified.

modal

Use notifications for low attention messages to inform users. These can be only information or coupled with an action that users can take.

notification

overlay

Advance tables give you complete control over your data display with filters, actions, sort, and search.

advance_table

Lists are simple way of displaying data in table format.

list

table

webapp

It shows an error message to indicate that the browser was able to communicate with a given server, but the server could not find what was requested

404_error_pages

An essential part of inbound marketing, the CTA section prompts the user to take a certain action with the objective of converting the user into a lead/customer.

Frequently Asked Questions provide valuable information to the users about your product or service that helps them make an informed decision.

It comprises of the information and work description.

about

The purpose of a blog is to provide users with relevant information that they might be seeking, in the form of an article. Blogs help drive traffic to your website.

blog

chat

Cloud logos are a display of multiple logos typically showing the brands and organizations that the company has worked for, or in collaboration with.

cloud_logo

The contact section’s main purpose is to help people get in touch with you. It can only be contact information, a form or a map showing directions to your location.

contact

content

The features section prominently highlights what you’re offering and how the customer will benefit from those services.

feature

The footer comes at the bottom of the page and showcases information and navigation options as per your business goals.

footer

The hero section is the front and center of the page and it is the most prominent area in the homepage layout that showcases your brand.

hero

Newsletters keep prospects and customers upto date about developments and product/service features when they subscribe to it.

newsletter

The pricing section highlights different packages that you are offering at various price points. They highlight the features and benefits that the user would be getting in a package.

pricing

It comprises of the cards to display multiple products or deals.

product

The stats section highlights key statistics that you want to showcase to customers and prospects in order to present expert authority.

stat

The team section helps potential customers and clients get to know the people they might be working with and can help put a face to the brand.

team

Testimonials are customer reviews of your product or services and help you to look more valuable to those who are exploring it for the first time. They are used for social proofing.

testimonial

page_section

marketing

CTAs

Allows customers to add or remove products to their cart, select shipment options and payment method.

Checkouts

FAQs

Shows customers reviews and opinions about a product.

Product_Reviews

A banner displays an important message, and is an important element in online branding and marketing purposes

banners

Component to showcase your most popular products

best_sellers

blogs

A list of cards that can be shuffled to display different content, it allows multiple pieces of content to occupy a single space

carousels

It informs the user on  how their data may be used.

cookies

featured

Filters provide a set of controls to reduce items in a collection based on attributes the user is interested in. 

filters

footers

heros

Displays the noteworthy features of a store.

highlights

modals

Use this pattern for primary navigation. The navigation can be easily modified to add menu items and action item icons.

navigations

newsletters

Shows the summary of the order a user has placed, may include shipping address, total amount, payment method, and status.

order_summaries

page_headings

A display of multiple logos typically showing the brands and organizations that the company has worked for, or in collaboration with.

partners

Organise product offerings for greater scannability

product_categories

Provides all the information and details of your product on your Ecommerce site.

product_details

Product grids are used to display offerings in a systematic layout

product_grids

As the name suggests, quick views provide a quick glance in a modal

quick_views

A collection of selected products displayed together with their quantity and price

cookies

cookies 1

cookies 2

cookies 3