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...

Written by: Janne Lammi

Accordion

</>
always-visible-input-hints

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)...

Written by: Janne Lammi

Always Visible Input Hints

always-visible-tools

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...

Written by: Janne Lammi

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...

Written by: Janne Lammi

Angular Material Sign-in Form

</>
autocomplete

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...

Written by: Janne Lammi

Autocomplete

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.

Written by: Janne Lammi

Badges

</>
blank-slate

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...

Written by: Janne Lammi

Blank Slate

breadcrumbs

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...

Written by: Janne Lammi

Breadcrumbs

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...

Written by: Janne Lammi

Color Scheme

</>
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...

Written by: Janne Lammi

Content Groups

data-table

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...

Written by: Janne Lammi

Data Table

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 ...

Written by: Janne Lammi

Drag and Drop Modules

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...

Written by: Janne Lammi

Dynamic Input Hints

endless-scrolling

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...

Written by: Janne Lammi

Endless Scrolling

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...

Written by: Janne Lammi

Feedback Messages

</>