octocatstartv headernumbered-list123split-screen

+ New Pen

Design Patterns

Ideas, inspiration and examples for your own projects.

Accordions

Closed. Closed. Open. Closed.

Also try: Search // Tag

Menu Icons

The ubiquitous hamburger.

Also try: Search // Tag

Grids

The layout helper of choice.

Also try: Search // Tag

Charts & Graphs

Destiny awaits.

Also try: Search // Tag

Tabs

Peek-a-boo!

Also try: Search // Tag

Star Ratings

From one to five.

Also try: Search // Tag

Buttons

Push it. Push it real good.

Also try: Search // Tag

Breadcrumbs

Experientially delicious.

Also try: Search // Tag

Dialogs

Answer the question, Claire.

Also try: Search // Tag

Dropdown Menus

Takes a good fall to know where you stand.

Also try: Search // Tag

Log In Forms

You shall not pass.

Also try: Search // Tag

Loaders

Watchin' the tide roll away, ooh.

Also try: Search // Tag

Progress

Without struggle, there is none.

Also try: Search // Tag

Pagination

One... Two... Three?

Also try: Search // Tag

Calendars

Is this a... what day is this?

Also try: Search // Tag

Tables

Are for tabular data.

Also try: Search // Tag

Toggles

Boolean no fooling.

Also try: Search // Tag

Emails

Design like it's 1999!

Also try: Search // Tag

Maps

We are where we are, however we got here.

Also try: Search // Tag

Sliders

Click and move, sister.

Also try: Search // Tag

Submit a Pen

Have a good fit for one of these collections? Send it in here!