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

Written by: Janne Lammi

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

Written by: Janne Lammi

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

Written by: Janne Lammi

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

Written by: Janne Lammi

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

Written by: Janne Lammi

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

Written by: Janne Lammi

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

Written by: Janne Lammi

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

Written by: Janne Lammi

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

Written by: Janne Lammi

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

Written by: Janne Lammi

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

Written by: Janne Lammi

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

Written by: Janne Lammi

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

Written by: Janne Lammi

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

Written by: Janne Lammi

Data Table