Building blocks and patterns for faster Web design & development

Try for free See features

This pattern demonstrates using Angular Material with your patterns. Angular Material is both a UI Component framework and a reference implementation of Google's Material Design Spec...

Created: Janne Lammi, Aug. 20, 2016

Angular Material Sign-in Form

</>

Indicating clearly required or optional fields on a form tells the user what needs to be filled in to complete the form. If most of the form fields are optional, use text or asterisk (*) next to e...

Created: Janne Lammi, Oct. 8, 2011

Required Form Fields

</>

This pattern contains the main color scheme for Patternry. You can use this pattern as a template when creating your company style guide / pattern library with Patternry. Just sign up if you haven...

Created: Janne Lammi, April 8, 2014

Color Scheme

</>

This pattern contains typography guidance for Patternry. You can use this pattern as a basis when creating a typography part of your company style guide. Just sign up if you haven&#8217;t already,...

Created: Janne Lammi, Oct. 9, 2013

Typography

</>
horizontal-module-tabs

Horizontal Module Tabs separates content into different panes, and the panes can be viewed one at a time. Tabs are arranged horizontally above (sometimes below) the content, and the selected tab i...

Created: Janne Lammi, Aug. 23, 2010

Horizontal Module Tabs

drag-and-drop-modules

Drag and drop idiom allows the user to move items from one place to another within a browser page directly without the need of moving into a separate mode to do this. Drag and Drop Modules allows ...

Created: Janne Lammi, July 8, 2010

Drag and Drop Modules

An accordion is a grouped set of collapsible panels that the user can open and close by hovering on or clicking on the title of a specific panel. Accordion allows organizing the content into logic...

Created: Janne Lammi, Dec. 1, 2012

Accordion

</>

Navigation list provides a simple and easy way to build groups of navigation links with optional headers. They&#8217;re best used in the sidebars of a Website/Web app.

Created: Janne Lammi, April 18, 2012

Navigation List

</>

When there are too many search results to comfortably fit on a single page, split the results into separate pages. Let the user to navigate between pages using a pagination control. The ultra simp...

Created: Janne Lammi, April 18, 2012

Multicon-page pagination

</>

Badges are small, simple components for displaying an indicator or count of some sort. They&#8217;re commonly found in email clients like Mail.app or on mobile apps for push notifications.

Created: Janne Lammi, March 31, 2012

Badges

</>

Progress bar tells the user the application is busy doing something and she needs wait. It should be used especially when the action in progress takes more than few seconds to complete to keep the...

Created: Janne Lammi, March 25, 2012

Progress Bar

</>
feedback-messages

Messages are a way to provide feedback to users. Success messages tell people they have successfully completed a task, for example submitted a form. Error messages let people know that something...

Created: Janne Lammi, March 25, 2012

Feedback Messages

</>
content-groups

Content groups pattern is about grouping content into logically titled sections. Well organized content allows people to scan information easily and get quickly an overview of the content on the p...

Created: Janne Lammi, June 14, 2010

Content Groups

dynamic-input-hints

Dynamic Input Hints are instructional texts or examples that are shown when a user clicks or tabs to an input field. Showing input hints only when people feel they need them keeps the form simple...

Created: Janne Lammi, April 6, 2011

Dynamic Input Hints

input-prompt

Input Prompt is an info text placed inside a text box. It guides the user on how the text field should be filled or how it can be used. The input prompt inside a text field will disappear if click...

Created: Janne Lammi, March 20, 2011

Input Prompt