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 article.html Code

Blip : Positive blip--positive.html Code

$99

Blip blip.html Code

$99

Block : Big Alt block--big-alt.html 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.

Demo & Details

Block : Big block--big.html 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.

Demo & Details

Block : Header Suplemental block--header-suplemental.html Code

This is a block header Read More

Block : Header block--header.html Code

This is a block header

Block : Icon Invert block--icon-invert.html Code

IP Address

12.34.56.78

Country

GB : United Kingdom

City

London

Block : Icon block--icon.html Code

Custom Front Page

Change the design of your front page to make it exactly as you want.

Custom Front Page

Change the design of your front page to make it exactly as you want.

Custom Front Page

Change the design of your front page to make it exactly as you want.

Block : Showcase Link block--showcase-link.html Code

sample

Title

Description here

sample

Title

Description here

sample

Title

Description here

Block : Showcase block--showcase.html Code

sample

5 Column Grid

sample

5 Column Grid

sample

5 Column Grid

Block block.html Code

$10 Demo
$10 Demo
$10 Demo

Breadcrumbs breadcrumbs.html Code

Button : Disabled button--disabled.html Code

Button : Fat button--fat.html Code

Button : Greedy button--greedy.html Code

Button : Icon Solo button--icon-solo.html Code

Button : Icon button--icon.html Code

Button button.html Code

Form : Button Input form--button-input.html Code

Form : Label Input form--label-input.html Code

Form : Label form--label.html Code

Form : Radio Group form--radio-group.html Code

Form : Search form--search.html Code

Form : Select Box Long form--select-box-long.html Code

Form : Select Box Short form--select-box-short.html Code

Form : Select Box form--select-box.html Code

Form : Text Input Long form--text-input-long.html Code

Form : Text Input Short form--text-input-short.html Code

Form : Text Input form--text-input.html Code

Form : Textarea Question form--textarea-question.html Code

Form : Textarea form--textarea.html Code

Note : Intro note--intro.html 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 note--message.html 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 note--question.html 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 note--theme-club.html 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 note--tip.html 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 note--twitter.html 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 note.html Code

Note: Since portfolios are displayed automatically at the address ​http://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 page-menu.html Code

Table table.html 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 text--blockquote.html Code

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

Text : H1 text--h1.html Code

Header 1

Text : H2 text--h2.html Code

Header 2

Text : H3 text--h3.html Code

Header 3

Text : H4 text--h4.html Code

Header 4

Text : H5 text--h5.html Code

Header 5

Text : H6 text--h6.html Code

Header 6

Text : Hr text--hr.html Code


Text : List Checkmark text--list-checkmark.html Code

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

Text : List Ordered text--list-ordered.html 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 text--list-unordered.html 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 text--meta.html Code

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

Text : P Intro text--p-intro.html Code

This is an introduction text in a paragraph.

Text : P text--p.html Code

This is some regular paragraph text.

Tree tree.html Code

Professional WordPress Themes View All WordPress Themes

Opti Screenshot
Puzzle Screenshot
Mirror Screenshot