Module Tabs

The module tab design pattern developed as a metaphor for file folders early in the history of web design and has stayed relevant ever since.

Module tabs are used to condense related information into categories that can be viewed separately on one page. This saves screen real-estate and aids the digestibility of the displayed content.

Module tabs should never be used if the content needs to be viewed next to each other or if the data is lengthy and complex. The tabs should be separate pieces of related information divided into logical chunks.

Below are some innovative uses of module tabs.




Building @mockvisual (YC S19) • Formerly @Flexport @Google @Intuit • Interested in platforms

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Linear Search Algorithm In Data Structure — Understand With An Example

Nostalgia, time-travel, Squid game and Windows 98

Small Wonders and Jurassic Park

#100DaysofCode Chapter 8 ~ Modern Website Design

EFUN 🤝 MONEYTREE Partnership

FlutterForce — #Week 12

articles you can write

Spoiler: A Slack App to Prevent Spoilers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrew Coyle

Andrew Coyle

Building @mockvisual (YC S19) • Formerly @Flexport @Google @Intuit • Interested in platforms

More from Medium

Axure Tutorial: Simple Efficiency Artifact — Components

Basic idea of design systems for Front-End engineer

Building a Sketch Design System: Tips & Tricks

Accessibility Guidelines for Styling Interactive Elements: Buttons

Solid, line, borderless buttons on white and dark background. Outline buttons on dark background are called ghost buttons.