Create front-end style guides in minutes

Try for free See features

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



Always visible input hints are info texts or examples guiding users to fill in empty text fields correctly. They should be placed close to the text field (usually below or on the right side of it)...

Created: Janne Lammi, March 20, 2011

Always Visible Input Hints


Contextual Tools, like Always-Visible Tools, allow user to interact directly with the content. Like the name says, Always-Visible Tools are always visible instead of hiding them until the user nee...

Created: Janne Lammi, July 8, 2010

Always-Visible Tools

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

Created: Janne Lammi, Aug. 20, 2016

Angular Material Sign-in Form


Autocomplete helps the user to provide valid answers. As the user types into a text box, a list of matching answers is shown in a drop-down menu below the text box. The user can then choose the co...

Created: Janne Lammi, July 5, 2010


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

Created: Janne Lammi, March 31, 2012



Blank slate is the screen people see when they start using an application and there is no data to show yet. Leaving it blank would not make a good first impression, so it should be filled with som...

Created: Janne Lammi, Oct. 26, 2010

Blank Slate


Breadcrumbs show where the page is located in the website hierarchy (Location breadcrumbs), or the attributes the user has chosen while refining the search (Attribute breadcrumbs). Breadcrumbs are...

Created: Janne Lammi, July 5, 2010


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


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


Show collection of items with multiple attributes in a data table to make the data easy to scan, analyze, and customize. In WordPress administration panel, blog posts are shown in a data table al...

Created: Janne Lammi, June 8, 2010

Data Table


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


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


The most common way to handle large data sets on websites is to use Search Pagination pattern. Endless scrolling provides an alternative way to get to additional content. When the user scrolls dow...

Created: Janne Lammi, June 30, 2010

Endless Scrolling


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