Image Borders
<img class="pe-img-polaroid" src="image.jpg" />
<img class="pe-img-rounded" src="image.jpg" />
<img class="pe-img-circle" src="image.jpg" />
Headings
This is Heading One (h1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Two (h2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Three (h3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Four (h4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Five (h5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Six (h6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
Numered blocks
<p class="pe-block"><span class="pe">01</span>Text goes here</p>
01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
<p class="pe-block second"><span class="pe">a</span>Text goes here</p>
aLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
bLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
cLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
Colored blocks
this is a paragraph with the class „green”
<p class="green"> Text goes here</p>
this is a paragraph with the class „blue”
<p class="blue"> Text goes here</p>
this is a paragraph with the class „orange”
<p class="orange"> Text goes here</p>
this is a paragraph with the class „red”
<p class="red"> Text goes here</p>
this is a paragraph with the class „pe-success”
<p class="pe-success"> Text goes here</p>
this is a paragraph with the class „pe-info”
<p class="pe-info"> Text goes here</p>
this is a paragraph with the class „pe-warning”
<p class="pe-warning"> Text goes here</p>
this is a paragraph with the class „pe-alert”
<p class="pe-alert"> Text goes here</p>
Quote blocks
this is a paragraph with the class „quote-left”
<p class="quote-left"> Text goes here</p>
this is a paragraph with the class „quote-right”
<p class="quote-right"> Text goes here</p>
Icon blocks
this is a paragraph with the class „pebadge”
<p class="pebadge"> Text goes here</p>
this is a paragraph with the class „pecalendar”
<p class="pecalendar"> Text goes here</p>
this is a paragraph with the class „pechat”
<p class="pechat"> Text goes here</p>
this is a paragraph with the class „pecheck”
<p class="pecheck"> Text goes here</p>
this is a paragraph with the class „pecloud”
<p class="pecloud"> Text goes here</p>
this is a paragraph with the class „pedirection”
<p class="pedirection"> Text goes here</p>
this is a paragraph with the class „pedivide”
<p class="pedivide"> Text goes here</p>
this is a paragraph with the class „peerror”
<p class="peerror"> Text goes here</p>
this is a paragraph with the class „pefire”
<p class="pefire"> Text goes here</p>
this is a paragraph with the class „peflag”
<p class="peflag"> Text goes here</p>
this is a paragraph with the class „peheart”
<p class="peheart"> Text goes here</p>
this is a paragraph with the class „pehome”
<p class="pehome"> Text goes here</p>
this is a paragraph with the class „peinfo”
<p class="peinfo"> Text goes here</p>
this is a paragraph with the class „pelist”
<p class="pelist"> Text goes here</p>
this is a paragraph with the class „pemail”
<p class="pemail"> Text goes here</p>
this is a paragraph with the class „pepeople”
<p class="pepeople"> Text goes here</p>
this is a paragraph with the class „pestar”
<p class="pestar"> Text goes here</p>
this is a paragraph with the class „pestat”
<p class="pestat"> Text goes here</p>
Unordered lists
Default list
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
This is a list with the class "pe-light"
Enter the class name to ul tag <ul class="pe-light">
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
This is a list with the class "pe-dark"
Enter the class name to ul tag <ul class="pe-dark">
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
Ordered lists
Default list
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
This is a list with the class "pe-roman"
Enter the class name to ol tag <ol class="pe-roman">
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
This is a list with the class "pe-alpha"
Enter the class name to ol tag <ol class="pe-alpha">
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
Other styles
Offcanvas button
<a class="toggle-nav menu"><span class="fa fa-navicon" aria-hidden="true"></span></a>
Read more button
This is a read more link with the class "readmore"
Enter the class name to a tag <a class="readmore">
Default button
This is a link with the class "button"
Enter the class name to a tag <a class="button">
Font Awesome
<span class="fa fa-adjust"></span>
fa-adn
fa-align-center
fa-align-justify
fa-align-left
fa-align-right
fa-ambulance
fa-anchor
fa-android
fa-angellist
fa-angle-double-down
fa-angle-double-left
fa-angle-double-right
fa-angle-double-up
fa-angle-down
fa-angle-left
fa-angle-right
fa-angle-up
fa-apple
fa-archive
fa-area-chart
fa-arrow-circle-down
fa-arrow-circle-left
fa-arrow-circle-o-down
fa-arrow-circle-o-left
fa-arrow-circle-o-right
fa-arrow-circle-o-up
fa-arrow-circle-right
fa-arrow-circle-up
fa-arrow-down
fa-arrow-left
fa-arrow-right
fa-arrow-up
fa-arrows
fa-arrows-alt
fa-arrows-h
fa-arrows-v
fa-asterisk
fa-at
fa-automobile
fa-backward
fa-ban
fa-bank
fa-bar-chart
fa-bar-chart-o
fa-barcode
fa-bars
fa-beer
fa-behance
fa-behance-square
fa-bell
fa-bell-o
fa-bell-slash
fa-bell-slash-o
fa-bicycle
fa-binoculars
fa-birthday-cake
fa-bitbucket
fa-bitbucket-square
fa-bitcoin
fa-bold
fa-bolt
fa-bomb
fa-book
fa-bookmark
fa-bookmark-o
fa-briefcase
fa-btc
fa-bug
fa-building
fa-building-o
fa-bullhorn
fa-bullseye
fa-bus
fa-cab
fa-calculator
fa-calendar
fa-calendar-o
fa-camera
fa-camera-retro
fa-car
fa-caret-down
fa-caret-left
fa-caret-right
fa-caret-square-o-down
fa-caret-square-o-left
fa-caret-square-o-right
fa-caret-square-o-up
fa-caret-up
fa-cc
fa-cc-amex
fa-cc-discover
fa-cc-mastercard
fa-cc-paypal
fa-cc-stripe
fa-cc-visa
fa-certificate
fa-chain
fa-chain-broken
fa-check
fa-check-circle
fa-check-circle-o
fa-check-square
fa-check-square-o
fa-chevron-circle-down
fa-chevron-circle-left
fa-chevron-circle-right
fa-chevron-circle-up
fa-chevron-down
fa-chevron-left
fa-chevron-right
fa-chevron-up
fa-child
fa-circle
fa-circle-o
fa-circle-o-notch
fa-circle-thin
fa-clipboard
fa-clock-o
fa-close
fa-cloud
fa-cloud-download
fa-cloud-upload
fa-cny
fa-code
fa-code-fork
fa-codepen
fa-coffee
fa-cog
fa-cogs
fa-columns
fa-comment
fa-comment-o
fa-comments
fa-comments-o
fa-compass
fa-compress
fa-copyright
fa-credit-card
fa-crop
fa-crosshairs
fa-css3
fa-cube
fa-cubes
fa-cut
fa-cutlery
fa-dashboard
fa-database
fa-dedent
fa-delicious
fa-desktop
fa-deviantart
fa-digg
fa-dollar
fa-dot-circle-o
fa-download
fa-dribbble
fa-dropbox
fa-drupal
fa-edit
fa-eject
fa-ellipsis-h
fa-ellipsis-v
fa-empire
fa-envelope
fa-envelope-o
fa-envelope-square
fa-eraser
fa-eur
fa-euro
fa-exchange
fa-exclamation
fa-exclamation-circle
fa-exclamation-triangle
fa-expand
fa-external-link
fa-external-link-square
fa-eye
fa-eye-slash
fa-eyedropper
fa-facebook
fa-facebook-square
fa-fast-backward
fa-fast-forward
fa-fax
fa-female
fa-fighter-jet
fa-file
fa-file-archive-o
fa-file-audio-o
fa-file-code-o
fa-file-excel-o
fa-file-image-o
fa-file-movie-o
fa-file-o
fa-file-pdf-o
fa-file-photo-o
fa-file-picture-o
fa-file-powerpoint-o
fa-file-sound-o
fa-file-text
fa-file-text-o
fa-file-video-o
fa-file-word-o
fa-file-zip-o
fa-files-o
fa-film
fa-filter
fa-fire
fa-fire-extinguisher
fa-flag
fa-flag-checkered
fa-flag-o
fa-flash
fa-flask
fa-flickr
fa-floppy-o
fa-folder
fa-folder-o
fa-folder-open
fa-folder-open-o
fa-font
fa-forward
fa-foursquare
fa-frown-o
fa-futbol-o
fa-gamepad
fa-gavel
fa-gbp
fa-ge
fa-gear
fa-gears
fa-gift
fa-git
fa-git-square
fa-github
fa-github-alt
fa-github-square
fa-gittip
fa-glass
fa-globe
fa-google
fa-google-plus
fa-google-plus-square
fa-google-wallet
fa-graduation-cap
fa-group
fa-h-square
fa-hacker-news
fa-hand-o-down
fa-hand-o-left
fa-hand-o-right
fa-hand-o-up
fa-hdd-o
fa-header
fa-headphones
fa-heart
fa-heart-o
fa-history
fa-home
fa-hospital-o
fa-html5
fa-ils
fa-image
fa-inbox
fa-indent
fa-info
fa-info-circle
fa-inr
fa-instagram
fa-institution
fa-ioxhost
fa-italic
fa-jpy
fa-jsfiddle
fa-key
fa-keyboard-o
fa-krw
fa-language
fa-laptop
fa-lastfm
fa-lastfm-square
fa-leaf
fa-legal
fa-lemon-o
fa-level-down
fa-level-up
fa-life-bouy
fa-life-buoy
fa-life-ring
fa-life-saver
fa-lightbulb-o
fa-line-chart
fa-link
fa-linkedin
fa-linkedin-square
fa-linux
fa-list
fa-list-alt
fa-list-ol
fa-list-ul
fa-location-arrow
fa-lock
fa-long-arrow-down
fa-long-arrow-left
fa-long-arrow-right
fa-long-arrow-up
fa-magic
fa-magnet
fa-mail-forward
fa-mail-reply
fa-mail-reply-all
fa-male
fa-map-marker
fa-maxcdn
fa-meanpath
fa-medkit
fa-meh-o
fa-microphone
fa-microphone-slash
fa-minus
fa-minus-circle
fa-minus-square
fa-minus-square-o
fa-mobile
fa-mobile-phone
fa-money
fa-moon-o
fa-mortar-board
fa-music
fa-navicon
fa-newspaper-o
fa-openid
fa-outdent
fa-pagelines
fa-paint-brush
fa-paper-plane
fa-paper-plane-o
fa-paperclip
fa-paragraph
fa-paste
fa-pause
fa-paw
fa-paypal
fa-pencil
fa-pencil-square
fa-pencil-square-o
fa-phone
fa-phone-square
fa-photo
fa-picture-o
fa-pie-chart
fa-pied-piper
fa-pied-piper-alt
fa-pinterest
fa-pinterest-square
fa-plane
fa-play
fa-play-circle
fa-play-circle-o
fa-plug
fa-plus
fa-plus-circle
fa-plus-square
fa-plus-square-o
fa-power-off
fa-print
fa-puzzle-piece
fa-qq
fa-qrcode
fa-question
fa-question-circle
fa-quote-left
fa-quote-right
fa-ra
fa-random
fa-rebel
fa-recycle
fa-reddit
fa-reddit-square
fa-refresh
fa-remove
fa-renren
fa-reorder
fa-repeat
fa-reply
fa-reply-all
fa-retweet
fa-rmb
fa-road
fa-rocket
fa-rotate-left
fa-rotate-right
fa-rouble
fa-rss
fa-rss-square
fa-rub
fa-ruble
fa-rupee
fa-save
fa-scissors
fa-search
fa-search-minus
fa-search-plus
fa-send
fa-send-o
fa-share
fa-share-alt
fa-share-alt-square
fa-share-square-o
fa-shekel
fa-sheqel
fa-shield
fa-shopping-cart
fa-sign-in
fa-sign-out
fa-signal
fa-sitemap
fa-skype
fa-slack
fa-sliders
fa-slideshare
fa-smile-o
fa-soccer-ball-o
fa-sort
fa-sort-alpha-asc
fa-sort-alpha-desc
fa-sort-amount-asc
fa-sort-amount-desc
fa-sort-asc
fa-sort-desc
fa-sort-down
fa-sort-numeric-asc
fa-sort-numeric-desc
fa-sort-up
fa-soundcloud
fa-space-shuttle
fa-spinner
fa-spoon
fa-spotify
fa-square
fa-square-o
fa-stack-exchange
fa-stack-overflow
fa-star
fa-star-half
fa-star-half-empty
fa-star-half-full
fa-star-half-o
fa-star-o
fa-steam
fa-steam-square
fa-step-backward
fa-step-forward
fa-stethoscope
fa-stop
fa-strikethrough
fa-stumbleupon
fa-stumbleupon-circle
fa-subscript
fa-suitcase
fa-sun-o
fa-superscript
fa-support
fa-table
fa-tablet
fa-tachometer
fa-tag
fa-tags
fa-tasks
fa-taxi
fa-tencent-weibo
fa-terminal
fa-text-width
fa-th
fa-th-large
fa-th-list
fa-thumb-tack
fa-thumbs-down
fa-thumbs-o-down
fa-thumbs-o-up
fa-thumbs-up
fa-ticket
fa-times
fa-times-circle
fa-times-circle-o
fa-tint
fa-toggle-down
fa-toggle-left
fa-toggle-off
fa-toggle-on
fa-toggle-right
fa-toggle-up
fa-trash
fa-trash-o
fa-tree
fa-trello
fa-trophy
fa-truck
fa-try
fa-tty
fa-tumblr
fa-tumblr-square
fa-turkish-lira
fa-twitch
fa-twitter
fa-twitter-square
fa-umbrella
fa-underline
fa-undo
fa-university
fa-unlink
fa-unlock
fa-unlock-alt
fa-unsorted
fa-upload
fa-usd
fa-user
fa-user-md
fa-users
fa-video-camera
fa-vimeo-square
fa-vine
fa-vk
fa-volume-down
fa-volume-off
fa-volume-up
fa-warning
fa-wechat
fa-weibo
fa-weixin
fa-wheelchair
fa-wifi
fa-windows
fa-won
fa-wordpress
fa-wrench
fa-xing
fa-xing-square
fa-yahoo
fa-yelp
fa-yen
fa-youtube
fa-youtube-play
fa-youtube-square