Pro Theme Design Styleguide

This is the Pro Theme Design Living Pattern Library. This page includes examples of all the most common site elements with an example and the code required to reproduce the element.

This pattern library was inspired by the super simple Pattern Primer by Adactio.

Brand Colours

Pro Theme Design Pattern Library

Article View Code

Block : Big Alt View Code

Demo

Exhibit

Exhibit is the perfect theme for businesses, big and small, to exhibit their work. Acting as both a portfolio and a blog Exhibit allows you to easily show off your projects.

View Theme

Block : Big View Code

Demo

Exhibit

Exhibit is the perfect theme for businesses, big and small, to exhibit their work. Acting as both a portfolio and a blog Exhibit allows you to easily show off your projects.

View Theme

Block : Header Suplemental View Code

This is a block header Read More

Block : Header View Code

This is a block header

Block : Showcase Link View Code

sample

Title

Description here

sample

Title

Description here

sample

Title

Description here

Block : Showcase View Code

sample

5 Column Grid

sample

5 Column Grid

sample

5 Column Grid

Block View Code

Demo

Broadsheet

A newspaper theme with 3 optional widget areas, featured posts and a huge homepage slider there are lots of options for creating interesting, immersive websites.

Demo

Broadsheet

A newspaper theme with 3 optional widget areas, featured posts and a huge homepage slider there are lots of options for creating interesting, immersive websites.

Demo

Broadsheet

A newspaper theme with 3 optional widget areas, featured posts and a huge homepage slider there are lots of options for creating interesting, immersive websites.

Breadcrumbs View Code

Button : Disabled View Code

Button Text Button Text Button Text Button Text

Button : Fat View Code

Button Text Button Text Button Text Button Text

Button : Greedy View Code

Button Text Button Text Button Text Button Text

Button View Code

Button Text Button Text Button Text Button Text

Form : Button Input View Code

Form : Label Input View Code

Form : Label View Code

Form : Radio Group View Code

Form : Search View Code

Form : Select Box View Code

Form : Text Input View Code

Form : Textarea Question View Code

Form : Textarea View Code

Note : Intro View Code

Join the Pro Theme Design Theme Club to get access to all of our self hosted themes. The Pro Theme Design Theme Club is the best value for users who run multiple sites or agencies who want to use multiple themes for different clients. You can use the themes for your client work.

Note : Message View Code

This is a message title

This is a message intro. It's bigger than a regular message

A smaller paragraph. Less important so smaller font.

Note : Question View Code

I have an idea for a note and it looks a little something like this. The idea note is great for making interesting information stand out a little more.

Note : Theme Club View Code

Join the Pro Theme Design Theme Club to get access to all of our self hosted themes. The Pro Theme Design Theme Club is the best value for users who run multiple sites or agencies who want to use multiple themes for different clients. You can use the themes for your client work.

Note : Tip View Code

I have an idea for a note and it looks a little something like this. The idea note is great for making interesting information stand out a little more.

Note : Twitter View Code

I have an idea for a note and it looks a little something like this. The idea note is great for making interesting information stand out a little more.

Note View Code

Note: Since portfolios are displayed automatically at the address ​https://yoursite.com/portfolio/ it’s important that you don’t create any pages, categories, or tags called “portfolio,” otherwise your projects may not display as intended.

Page Menu View Code

Table View Code

Theme Club Lifetime Bundle
All Themes
Premium Technical Support
No Subscription Fees
Cost $149 for 6 months
$249 for 1 year		 $499 one time payment
Join Get the Bundle

Text : Blockquote View Code

This is some text and this is how it looks in a blockquote.

Text : H1 View Code

Header 1

Text : H2 View Code

Header 2

Text : H3 View Code

Header 3

Text : H4 View Code

Header 4

Text : H5 View Code

Header 5

Text : H6 View Code

Header 6

Text : Hr View Code

Text : List Children View Code

Text : List Ordered View Code

  1. Item 1
  2. A bigger Item 2
  3. Item 3
  4. An even longer item to see what it does when the text wraps around

Text : List Unordered View Code

  • Item 1
  • A bigger Item 2
  • Item 3
  • An even longer item to see what it does when the text wraps around

Text : Meta View Code

This is some text used for meta data - such as dates and categories.

Text : P Intro View Code

This is an introduction text in a paragraph.

Text : P View Code

This is some regular paragraph text.

Professional WordPress Themes View All WordPress Themes

Bromley Screenshot

Bromley

The best elements of blogging templates manipulated into something beautifully simple. Ideal for local community, fan magazines, and talking about updates in your industry.

Lens Screenshot

Lens

A photo-oriented theme, great for people who like to tell stories with pictures, equally suitable for bloggers, scrapbookers, and writers.

Chronicle Screenshot

Chronicle

Chronicle is a powerful, flexible magazine WordPress template with huge customization potential. Three widget areas, featured posts and a huge homepage slider are make this the magazine WordPress theme you’ve been waiting for.