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

And then there will be a light … and 🐛

Initial Ideas (Visual)

HCDE Sprint 9: Device Prototyping

Product Design Meetup #11 — Ghent 2018

The Ultimate Winter Shoe For Style and Purpose — Broke & Bougie AF

Huawei App Gallery: Conversion (Part I: Text assets)

The Most Popular Tie-Dye Techniques Used in Fabric Designing

Why you shouldn’t try to be friends with your client

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

Understanding Color for UI Design

Building a Sketch Design System: Tips & Tricks

A designer’s perspective on Digital Accessibility

Hey, Personas aren’t just Fictional Characters!