10% off 1 FRAMEGOOD | 20% off 2 FRAMEGREAT | 30% off 3 + FRAMEBEST | Offer Details

Common Classes & Tags

Output Code Notes

This is an h1

<h1>This is an h1</h1> Copse 46px. There should only ever be 1 h1 tag on a page. If you need the h1 styling but there's already an h1 tag on the page, use the h1 class below.

This is an h2

<h2>This is an h2</h2> Copse 40px. I commonly use an h2 tag with an h1 class to get the h1 styling without repeating h1 tag. It's ok to have multiple h2 tags on a page.

This is an h3

<h3>This is an h3</h3> Copse 25px. Commonly used as subheading.

This is an h4

<h4>This is an h4</h4> Muli 14px. This h4 tag has an uppercase text transform. Commonly used for name on testimonial
This is an h1 class
<div class="h1">This is an h1 class</div> This class gets you h1 tag styling without the SEO importance
This is an h2 class
<div class="h2">This is an h2 class</div> This class gets you h2 tag styling without the SEO importance
This is an h3 class
<div class="h3">This is an h3 class</div> This class gets you h3 tag styling without the SEO importance
This is an h4 class
<div class="h4">This is an h4 class</div> This class gets you h4 tag styling without the SEO importance

This is paragraph copy

<p>This is paragraph copy</p> Muli 16px. Common paragraph text
This is copy with text-small class <span class="text-small">This is copy with text-small class</span> Muli 11px. Really small text.
Image Caption
<div class="text-small spacer-bottom-20"> <em>Image Caption</em> </div> This should be used for caption under image. NOTE: If there's some spacing above the caption that you want to remove, there may be a spacer-bottom class on the image that you will need to remove.

This is an h3 with a trademarkTM

<h3>This is an h3 with a trademark<sup>TM</sup></h3> For trademark use sup tag. There's styling in place for all copy tags and classes for sup
Link in cta-btn class <a href="#" class="cta-btn">Link in cta-btn class</a> This is the primary CTA used for links on CLPs and CMSs. Copy in this has uppercase text transform.
Link in cta-btn-orange class <a href="#" class="cta-btn-orange">Link in cta-btn-orange class</a> Used when you really want to draw attention to a CTA. Ex. CTA in homepage hero. Buttons on PDPs and checkout all have this styling. Copy in this has uppercase text transform.
Relative Link (linking within pf.com) in cta-copy class <a href="/custom-framing/categories" class="cta-copy"> Relative Link (linking within pf.com) in cta-copy class </a> This is a link to a page within pf.com. It does not have the domain in the href. This class should be used on text links to make any text underlined and green on hover. It can be used on any copy tags and in combo with copy classes.
Absolute Link (linking outside pf.com) in cta-copy class <a href="https://www.instagram.com/explore/tags/framingjoy/?hl=en" class="cta-copy" target="_blank"> Absolute Link (linking outside pf.com) in cta-copy class </a> This is a link to a page outside of pf.com. It has the full page URL in href including domain and it has target="_blank" which will open page linked page in a new tab. This class should be used on text links to make any text underlined and green on hover. It can be used on any copy tags and in combo with copy classes.

This is paragraph text in a text-green class

<p class="text-green">This is paragraph text in a text-green class</p> Brand color #428f61. Can be used on any tag or in combo with other classes. Commonly used for the word "NEW".

This is paragraph text with a text-orange class

<p class="text-orange">This is paragraph text with a text-orange class</p> Brand color #f97306. Can be used on any tag or in combo with other classes.

This is paragraph text with a text-blue classs

<p class="text-blue">This is paragraph text with a text-blue class</p> Brand color #478eaa. Can be used on any tag or in combo with other classes.

This is paragraph text with a text-magenta classs

<p class="text-magenta">This is paragraph text with a text-magenta class</p> Brand color #b53766. Can be used on any tag or in combo with other classes.

This is paragraph text with a text-purple classs

<p class="text-purple">This is paragraph text with a text-purple class</p> Brand color #392d51. Can be used on any tag or in combo with other classes.

This is paragraph text with a text-yellow classs

<p class="text-yellow">This is paragraph text with a text-yellow classs</p> Brand color #f3da35. Can be used on any tag or in combo with other classes.

This is paragraph text with a text-grey classs

<p class="text-grey">This is paragraph text with a text-grey class</p> Brand color #333333. Can be used on any tag or in combo with other classes.
  • Bulleted list item
  • Bulleted list item
  • Bulleted list item
  • Bulleted list item
  • Bulleted list item
<ul> <li>Bulleted list item</li> <li>Bulleted list item</li> <li>Bulleted list item</li> <li>Bulleted list item</li> <li>Bulleted list item</li> </ul> Bulleted list
Heading Heading
valar morghulis valar dohaeris
all men must die all men must serve
Yes. All men must die, but we are not men. There is only one thing we say to death: Not today.
That’s what I do: I drink and I know things. If you think this has a happy ending, you haven’t been paying attention.
<div class="table-striped"> <table> <tbody> <tr class="odd"> <td> <strong>Heading</strong> <td> <strong>Heading</strong> </td> </tr> <tr class="even"> <td> valar morghulis </td> <td> valar dohaeris </td> </tr> <tr class="odd"> <td> all men must die </td> <td> all men must serve </td> </tr> <tr class="even"> <td> Yes. All men must die, but we are not men. </td> <td> There is only one thing we say to death: Not today. </td> </tr> <tr class="odd"> <td> That’s what I do: I drink and I know things. </td> <td> If you think this has a happy ending, you haven’t been paying attention. </td> </tr> </tbody> </table> </div> Striped table alternating rows with classes that have odd and even classes. The whole table is wrapped in table-striped class.

This is paragraph text with a text-center class around it

<div class="text-center"> <p>This is paragraph text with a text-center class around it</p> </div> text-center class can be used to center align any content

This is paragraph text with class p-narrow-full-width

<p class="p-narrow-full-width">This is paragraph text with class p-narrow-full-width</p> This is a class for paragraph copy that is going to be full width of website to give it some left and right padding so it doesn't actually span full width.
REPLACE-ME <img class="lazyload svg-icon" alt="REPLACE-ME" data-src="/media/wysiwyg/icons/zero-landfill-icon.svg" /> This is an svg icon with classes svg-icon and lazyload on img tag. svg-icon class sets the width 75px. lazyload class should improve load performance and is what causes the fade effect that's on images. Marketing has created many of these icons for various pages. Eventually, the goal is to have them all in a font.
REPLACE-ME <picture> <source media="(min-width: 768px)" data-srcset="/media/wysiwyg/blog/REPLACE-ME-WITH-IMAGES-FOLDER/REPLACE-ME-900x550.jpg" data-aspectratio="900/550" /> <source media="(min-width: 1px)" data-srcset="/media/wysiwyg/blog/REPLACE-ME-WITH-IMAGES-FOLDER/REPLACE-ME-900x550.jpg?width=600" data-aspectratio="600/367" /> <img class="lazyload" alt="REPLACE-ME" data-src="/media/wysiwyg/blog/REPLACE-ME-WITH-IMAGES-FOLDER/REPLACE-ME-900x550.jpg" src="/media/wysiwyg/blog/REPLACE-ME-WITH-IMAGES-FOLDER/REPLACE-ME-900x550.jpg" /> </picture> This is an example of an image from the blog article template. This code format is used when we want a different sized image for mobile than desktop. The source with media="(min-width: 768px)", indicates when the screen viewport is >= 768px (image for desktop), that is the image that will display. The source with media="(min-width: 1px)", indicates when the screen viewport is >= 1px (image for mobile), that is the image that will display. The img tag is a fall back for older browsers, incase the source tags don't work. lazyload class is what creates the image fade in effect. This is for performance. The ?width=PIXEL_SIZE (Ex. ?width=600) at the end of an image, will automatically create a new image of that size. This is a feature Corra implemented in Magento called Fastly. When using this code, these are several things to be sure to replace: relative image location in 4 places (data-srcset, data-srcset, data-src and src), data-aspectratio (based on your image aspect ratio), alt (verbal description of image subject matter with trying to get keywords in there for SEO)
REPLACE-ME <img class="lazyload" alt="REPLACE-ME" data-src="https://via.placeholder.com/460x460.jpg" /> This image code is used when there only needs to be one image size. This happens when the desktop image size will also work for the mobile size. lazyload class is what creates the image fade in effect. This is for performance. When using this code, there are 2 things to replace: relative image location (data-src) and alt
<div class="iframe-wrap"> <iframe class="video" width="auto" height="auto" src="https://www.youtube.com/embed/HaCyFNfMN8c?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> </div> This code is for responsive youtube video embed. To use this you would replace this link https://www.youtube.com/embed/HaCyFNfMN8c. You need the ?rel=0 at the end of the link as that will prevent other youtube videos from playing after your video.

Left Text Block and 950x460 Image

This is an h3

This is copy in a p tag - Cake gingerbread fruitcake apple pie cookie sweet roll topping macaroon. Jelly beans dragée chupa chups pie halvah wafer apple pie gummies.

Copy in cta-btn class
REPLACE-ME

Title, paragraph, CTA, 2 460x460 Images, 1 950x950 Image

Copy in a p tag with class p-narrow-full-width to make the copy narrow. - Cake gingerbread fruitcake apple pie cookie sweet roll topping macaroon. Jelly beans dragée chupa chups pie halvah wafer apple pie gummies. Jujubes gummi bears carrot cake. Jelly-o sugar plum jelly brownie topping.

Create Space to Thrive

Create Space to Thrive

Create Space to Thrive

Create Space to Thrive

Create Space to Thrive

Copy in cta-btn class

NEW!Left 1/2 Width Text Block and 700x460 Image

This is an h3 tag

  • • list copy with bullet
  • • list copy with bullet
  • • list copy with bullet
  • • list copy with bullet
Copy in cta-btn class
REPLACE-ME

3 Column 460x460 Images, Copy CTA and Paragraph Text

REPLACE-ME

Copy in h3 with class cta-copy

Paragraph copy - Gummi bears ice cream croissant bonbon sesame snaps lollipop powder tart fruitcake. Chocolate cake gingerbread halvah brownie jelly caramels.

REPLACE-ME

Copy in h3 with class cta-copy

Paragraph copy - Gummi bears ice cream croissant bonbon sesame snaps lollipop powder tart fruitcake. Chocolate cake gingerbread halvah brownie jelly caramels.

REPLACE-ME

Copy in h3 with class cta-copy

Paragraph copy - Gummi bears ice cream croissant bonbon sesame snaps lollipop powder tart fruitcake. Chocolate cake gingerbread halvah brownie jelly caramels.

Title, Paragraph text 3 Column 460x460 Images, Copy CTAs

Copy in a p tag with class p-narrow-full-width to make the copy narrow. - Cake gingerbread fruitcake apple pie cookie sweet roll topping macaroon. Jelly beans dragée chupa chups pie halvah wafer apple pie gummies. Jujubes gummi bears carrot cake. Jelly-o sugar plum jelly brownie topping.

Copy in cta-btn class

Image White Block Content

REPLACE-ME

This is an h3

paragraph copy text-green class

cta-btn

This is an h3

paragraph copy text-green class

cta-btn
REPLACE-ME
Creativity Can Change the World! We are committed to crafting the highest quality custom framing and printing while providing extraordinary service and doing some good in this crazy world. Read More About Us

4 Columns with Dropdowns, Text and CTAs

This is a h3

This is paragrapah copy - Cake gingerbread fruitcake apple pie cookie sweet roll

cta-btn

This is a h3

This is paragrapah copy - Cake gingerbread fruitcake apple pie cookie sweet roll

cta-btn

This is a h3

This is paragrapah copy - Cake gingerbread fruitcake apple pie cookie sweet roll

cta-btn

2 Column Images

REPLACE-ME

h3 with a cta-copy class

paragrapah copy - Cake gingerbread fruitcake apple pie cookie sweet roll topping macaroon. Jelly beans dragée chupa chups pie halvah wafer apple pie gummies. Jujubes gummi bears carrot cake. Jelly-o sugar plum jelly brownie topping.

REPLACE-ME

h3 with a cta-copy class

paragrapah copy - Cake gingerbread fruitcake apple pie cookie sweet roll topping macaroon. Jelly beans dragée chupa chups pie halvah wafer apple pie gummies. Jujubes gummi bears carrot cake. Jelly-o sugar plum jelly brownie topping.

3 Columns, Icons, Text and Vertical Dividers

REPLACE-ME

Upload A Photo

Browse and select the picture you want to print for easy upload.

REPLACE-ME

Upload A Photo

Browse and select the picture you want to print for easy upload.

REPLACE-ME

Upload A Photo

Browse and select the picture you want to print for easy upload.

cta-btn
BUSINESS SERVICES

Bulk Wholesale Picture Framing & Printing

Whatever you need, at the highest quality, right on time.

Call for a Free Consultation
877-367-2689

Email a Specialist at Business@pictureframes.com or fill out our contact form.

4 Icons & Copy

REPLACE-ME

Speed

Cake gingerbread fruitcake apple pie cookie sweet roll topping macaroon. Jelly beans dragée chupa chups pie halvah wafer apple pie gummies. Jujubes gummi bears carrot cake. Jelly-o sugar plum jelly brownie topping.

REPLACE-ME

Quality

Cake gingerbread fruitcake apple pie cookie sweet roll topping macaroon. Jelly beans dragée chupa chups pie halvah wafer apple pie gummies. Jujubes gummi bears carrot cake. Jelly-o sugar plum jelly brownie topping.

REPLACE-ME

Value

Cake gingerbread fruitcake apple pie cookie sweet roll topping macaroon. Jelly beans dragée chupa chups pie halvah wafer apple pie gummies. Jujubes gummi bears carrot cake. Jelly-o sugar plum jelly brownie topping.

REPLACE-ME

Service

Cake gingerbread fruitcake apple pie cookie sweet roll topping macaroon. Jelly beans dragée chupa chups pie halvah wafer apple pie gummies. Jujubes gummi bears carrot cake. Jelly-o sugar plum jelly brownie topping.

3 Col Testimonial Section

"Not afraid to give you a call."
"They had a question about my order and called right away."
Shirley,
Customer since 2006
"You’ll see a clear difference"
"Pictureframes is committed to crafting the highest quality custom prints & frames. Always professional, always on time."
Jim,
Family Frames, Owner
"Quality is first lorem"
"If you’ve used other online framing companies and been unimpressed, pictureframes.com is for you."
Hope, Customer since 2010
cta-btn

Generic 3 Cols


Test 2 cols content

Paragraph copy - Bear claw dessert cotton candy. Cupcake chocolate cake gingerbread toffee gummies icing gingerbread.

This is an h4

Test 2 cols content

Paragraph copy - Bear claw dessert cotton candy. Cupcake chocolate cake gingerbread toffee gummies icing gingerbread.

This is an h4

Test 2 cols content

Paragraph copy - Bear claw dessert cotton candy. Cupcake chocolate cake gingerbread toffee gummies icing gingerbread.

This is an h4


Generic 4 Col Images

REPLACE-ME
REPLACE-ME
REPLACE-ME
REPLACE-ME

2 Column Images with Grey BG

REPLACE-ME

H2 with an h1 class

This is an h1

Lollipop candy canes sesame snaps tootsie roll apple pie pudding macaroon pie sweet. Jelly-o bear claw cupcake oat cake carrot cake caramels. Lollipop halvah jelly pudding cookie halvah oat cake jujubes gummies.

cta-btn

2 Column Images with Grey BG

H2 with an h1 class

This is an h3

Lollipop candy canes sesame snaps tootsie roll apple pie pudding macaroon pie sweet. Jelly-o bear claw cupcake oat cake carrot cake caramels. Lollipop halvah jelly pudding cookie halvah oat cake jujubes gummies.

cta-btn
REPLACE-ME

Upload, Print & Frame

With 800+ custom frames and over a QUADRILLION COMBOS, you’re sure to find the perfect match for your print!

UPLOAD & PLAY
Black and White Family Portrait in Custom Silver Frame

"This is one of my most cherished photos. Together in this picture are four generations of my family. I wanted to preserve it and the archival mat & finishing options were perfect. Now I’ll be able to share this beautiful photo with my son and grandchildren."
– Casey