Create front-end style guides in minutes

Try for free See features

14 patterns found for tag content

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

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

</>

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

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

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

Created: Janne Lammi, Oct. 26, 2010

Blank Slate

inline-edit

Inline edit allows the user to edit text directly in the page without requiring going to a separate page. It makes the interaction more direct and intuitive as the user can edit the text in the sa...

Created: Janne Lammi, Sept. 26, 2010

Inline Edit

overlay

An overlay is a mini page in a layer on top of a page. Overlays simplify the user interface and provide a way for the user to access additional information without leaving current page. It is also...

Created: Janne Lammi, June 30, 2010

Overlay

one-page-wizard

Guide the user through a task with several steps by showing a clear path to completion. CampaignMonitor uses a static One Page Wizard for signing up. Sign up process is quite simple &#8211; the pr...

Created: Janne Lammi, June 14, 2010

One Page Wizard

multiple-page-wizard

Present each major step in a task on a different page. Indicate clearly where the user is in the process, and how many steps there are left. Finnair uses Multiple Page Wizard to guide the user thr...

Created: Janne Lammi, June 14, 2010

Multiple Page Wizard

information-dashboard

Information dashboard organizes and presents the most important information from large amounts of data in a way that it is easy to read and understand for the user. Dashboards summarize informatio...

Created: Janne Lammi, June 14, 2010

Information Dashboard

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

Created: Janne Lammi, June 8, 2010

Data Table