Typography

Typography

GavernWP allows to access a lot of additional typography elements created with Shortcodes use. The use is very simple thanks to an additional button in a posts editor.

Below, there are all elements available in theme’s typography. Typography elements can be divided into three main groups:

  • typography elements,
  • interactive elements,
  • elements prepared especially for a particular theme.

Warnings / Infos / Notices / Errors

These elements are used for highlighting text fragments together with their importance / type of information by using appropriate colors.

Warning and error text example using Shortcodes

Info text example using Shortcodes

Notice text example using Shortcodes

Labels

Labels are useful for marking the importance of the text fragment or a word given. In the case of longer texts, we recommend to use elements from Warnings / Infos / Notices group.

This is a paragraph with the labeled text using the first style.

This is a paragraph with the labeled text using the second style.

Badges

Badges in their look are similar to Labels, however, you may use them mainly for highlighting shorter texts, e.g. numerical values.

This is a paragraph with the badge 12 using the first style.

This is a paragraph with the badge 12 using the second style.

Code listings

We recommend to use an element creating code listings in style available for presenting source codes:

function helloWorld() {
alert('Hello World!');
}

Text blocks

Text blocks are useful for generating an element highlighting a particular part of an entry:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.

01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.

02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.

03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Lorem ipsum dolor sit amet

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Lorem ipsum dolor sit amet
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Quote and Citations

Quotes elements are useful for highlighting the author of a sentence given:

The content of the quote in style 1. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

Author

The content of the quote in style 2. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

Author

Lists

Ordered and unordered lists:

  1. item1
  2. item2
  3. item3
  1. item1
  2. item2
  3. item3
  1. item1
  2. item2
  3. item3
  1. item1
  2. item2
  3. item3
  • item1
  • item2
  • item3
  • item1
  • item2
  • item3
  • item1
  • item2
  • item3
  • item1
  • item2
  • item3

Legends

Elements with legend useful while creating text blocks in a frame provided with an appropriate title.

Legend style 1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.

Raw text

An element useful for generating text without formatting:

Your text

Icons – Font Awesome

The Font Awesome is a set of base icons similar to the Glyphicons included with Bootstrap, plus a set of extended icons that include pictograms for external links, thumbs up/down, comments, cogs and more.

Font Awesome is licensed under the Creative Commons Attribution 3.0 Unported (CC BY 3.0). More details you can find on project homepage at http://fortawesome.github.com/Font-Awesome

Use <i class=”fa fa-CLASS_NAME“></i> content here…

  • fa-rub
  • fa-ruble (alias)
  • fa-rouble (alias)
  • fa-pagelines
  • fa-stack-exchange
  • fa-arrow-circle-o-right
  • fa-arrow-circle-o-left
  • fa-caret-square-o-left
  • fa-toggle-left (alias)
  • fa-dot-circle-o
  • fa-wheelchair
  • fa-vimeo-square
  • fa-try
  • fa-turkish-lira (alias)
  • fa-adjust
  • fa-anchor
  • fa-archive
  • fa-asterisk
  • fa-ban
  • fa-bar-chart-o
  • fa-barcode
  • fa-beer
  • fa-bell
  • fa-bell-o
  • fa-bolt
  • fa-book
  • fa-bookmark
  • fa-bookmark-o
  • fa-briefcase
  • fa-bug
  • fa-building
  • fa-bullhorn
  • fa-bullseye
  • fa-calendar
  • fa-calendar-o
  • fa-camera
  • fa-camera-retro
  • fa-caret-square-o-down
  • fa-caret-square-o-left
  • fa-caret-square-o-right
  • fa-caret-square-o-up
  • fa-certificate
  • fa-check
  • fa-check-circle
  • fa-check-circle-o
  • fa-check-square
  • fa-check-square-o
  • fa-circle
  • fa-circle-o
  • fa-clock-o
  • fa-cloud
  • fa-cloud-download
  • fa-cloud-upload
  • fa-code
  • fa-code-fork
  • fa-coffee
  • fa-cog
  • fa-cogs
  • fa-collapse-o
  • fa-comment
  • fa-comment-o
  • fa-comments
  • fa-comments-o
  • fa-compass
  • fa-credit-card
  • fa-crop
  • fa-crosshairs
  • fa-cutlery
  • fa-dashboard (alias)
  • fa-desktop
  • fa-dot-circle-o
  • fa-download
  • fa-edit (alias)
  • fa-ellipsis-horizontal
  • fa-ellipsis-vertical
  • fa-envelope
  • fa-envelope-o
  • fa-eraser
  • fa-exchange
  • fa-exclamation
  • fa-exclamation-circle
  • fa-exclamation-triangle
  • fa-expand-o
  • fa-external-link
  • fa-external-link-square
  • fa-eye
  • fa-eye-slash
  • fa-female
  • fa-fighter-jet
  • fa-film
  • fa-filter
  • fa-fire
  • fa-fire-extinguisher
  • fa-flag
  • fa-flag-checkered
  • fa-flag-o
  • fa-flash (alias)
  • fa-flask
  • fa-folder
  • fa-folder-o
  • fa-folder-open
  • fa-folder-open-o
  • fa-frown-o
  • fa-gamepad
  • fa-gavel
  • fa-gear (alias)
  • fa-gears (alias)
  • fa-gift
  • fa-glass
  • fa-globe
  • fa-group
  • fa-hdd-o
  • fa-headphones
  • fa-heart
  • fa-heart-o
  • fa-home
  • fa-inbox
  • fa-info
  • fa-info-circle
  • fa-key
  • fa-keyboard-o
  • fa-laptop
  • fa-leaf
  • fa-legal (alias)
  • fa-lemon-o
  • fa-level-down
  • fa-level-up
  • fa-lightbulb-o
  • fa-location-arrow
  • fa-lock
  • fa-magic
  • fa-magnet
  • fa-mail-forward (alias)
  • fa-mail-reply (alias)
  • fa-mail-reply-all
  • fa-male
  • fa-map-marker
  • 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 (alias)
  • fa-money
  • fa-moon-o
  • fa-move
  • fa-music
  • fa-pencil
  • fa-pencil-square
  • fa-pencil-square-o
  • fa-phone
  • fa-phone-square
  • fa-picture-o
  • fa-plane
  • fa-plus
  • fa-plus-circle
  • fa-plus-square
  • fa-power-off
  • fa-print
  • fa-puzzle-piece
  • fa-qrcode
  • fa-question
  • fa-question-circle
  • fa-quote-left
  • fa-quote-right
  • fa-random
  • fa-refresh
  • fa-reorder
  • fa-reply
  • fa-reply-all
  • fa-resize-horizontal
  • fa-resize-vertical
  • fa-retweet
  • fa-road
  • fa-rocket
  • fa-rss
  • fa-rss-square
  • fa-search
  • fa-search-minus
  • fa-search-plus
  • fa-share
  • fa-share-square
  • fa-share-square-o
  • fa-shield
  • fa-shopping-cart
  • fa-sign-in
  • fa-sign-out
  • fa-signal
  • fa-sitemap
  • fa-smile-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 (alias)
  • fa-sort-numeric-asc
  • fa-sort-numeric-desc
  • fa-sort-up (alias)
  • fa-spinner
  • fa-square
  • fa-square-o
  • fa-star
  • fa-star-half
  • fa-star-half-empty (alias)
  • fa-star-half-full (alias)
  • fa-star-half-o
  • fa-star-o
  • fa-subscript
  • fa-suitcase
  • fa-sun-o
  • fa-superscript
  • fa-tablet
  • fa-tachometer
  • fa-tag
  • fa-tags
  • fa-tasks
  • fa-terminal
  • 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 (alias)
  • fa-toggle-left (alias)
  • fa-toggle-right (alias)
  • fa-toggle-up (alias)
  • fa-trash-o
  • fa-trophy
  • fa-truck
  • fa-umbrella
  • fa-unlock
  • fa-unlock-o
  • fa-unsorted (alias)
  • fa-upload
  • fa-user
  • fa-video-camera
  • fa-volume-down
  • fa-volume-off
  • fa-volume-up
  • fa-warning (alias)
  • fa-wheelchair
  • fa-wrench
  • fa-check-square
  • fa-check-square-o
  • fa-circle
  • fa-circle-o
  • fa-dot-circle-o
  • fa-minus-square
  • fa-minus-square-o
  • fa-square
  • fa-square-o
  • fa-bitcoin (alias)
  • fa-btc
  • fa-cny (alias)
  • fa-dollar (alias)
  • fa-eur
  • fa-euro (alias)
  • fa-gbp
  • fa-inr
  • fa-jpy
  • fa-krw
  • fa-money
  • fa-rmb (alias)
  • fa-rouble (alias)
  • fa-rub
  • fa-ruble (alias)
  • fa-rupee (alias)
  • fa-try
  • fa-turkish-lira (alias)
  • fa-usd
  • fa-won (alias)
  • fa-yen (alias)
  • fa-align-center
  • fa-align-justify
  • fa-align-left
  • fa-align-right
  • fa-bold
  • fa-chain (alias)
  • fa-chain-broken
  • fa-clipboard
  • fa-columns
  • fa-copy (alias)
  • fa-cut (alias)
  • fa-dedent (alias)
  • fa-eraser
  • fa-file
  • fa-file-o
  • fa-file-text
  • fa-file-text-o
  • fa-files-o
  • fa-floppy-o
  • fa-font
  • fa-indent
  • fa-italic
  • fa-link
  • fa-list
  • fa-list-alt
  • fa-list-ol
  • fa-list-ul
  • fa-outdent
  • fa-paperclip
  • fa-paste (alias)
  • fa-repeat
  • fa-rotate-left (alias)
  • fa-rotate-right (alias)
  • fa-save (alias)
  • fa-scissors
  • fa-strikethrough
  • fa-table
  • fa-text-height
  • fa-text-width
  • fa-th
  • fa-th-large
  • fa-th-list
  • fa-underline
  • fa-undo
  • fa-unlink (alias)
  • 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-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-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-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-hand-o-down
  • fa-hand-o-left
  • fa-hand-o-right
  • fa-hand-o-up
  • fa-long-arrow-down
  • fa-long-arrow-left
  • fa-long-arrow-right
  • fa-long-arrow-up
  • fa-toggle-down (alias)
  • fa-toggle-left (alias)
  • fa-toggle-right (alias)
  • fa-toggle-up (alias)
  • fa-adn
  • fa-android
  • fa-apple
  • fa-bitbucket
  • fa-bitbucket-square
  • fa-bitcoin (alias)
  • fa-btc
  • fa-css3
  • fa-dribbble
  • fa-dropbox
  • fa-facebook
  • fa-facebook-square
  • fa-flickr
  • fa-foursquare
  • fa-github
  • fa-github-alt
  • fa-github-square
  • fa-gittip
  • fa-google-plus
  • fa-google-plus-square
  • fa-html5
  • fa-instagram
  • fa-linkedin
  • fa-linkedin-square
  • fa-linux
  • fa-maxcdn
  • fa-pagelines
  • fa-pinterest
  • fa-pinterest-square
  • fa-renren
  • fa-skype
  • fa-stack-exchange
  • fa-stack-overflow
  • fa-trello
  • fa-tumblr
  • fa-tumblr-square
  • fa-twitter
  • fa-twitter-square
  • fa-vimeo-square
  • fa-vk
  • fa-weibo
  • fa-windows
  • fa-xing
  • fa-xing-square
  • fa-youtube
  • fa-youtube-play
  • fa-youtube-square
  • fa-backward
  • fa-eject
  • fa-fast-backward
  • fa-fast-forward
  • fa-forward
  • fa-fullscreen
  • fa-pause
  • fa-play
  • fa-play-circle
  • fa-play-circle-o
  • fa-resize-full
  • fa-resize-small
  • fa-step-backward
  • fa-step-forward
  • fa-stop
  • fa-youtube-play
  • fa-ambulance
  • fa-h-square
  • fa-hospital
  • fa-medkit
  • fa-plus-square
  • fa-stethoscope
  • fa-user-md
  • fa-wheelchair

Other typography elements

Elements which could not be groupped to other categories.

Columns allow to place text in multicolumn layout:

Content for the first column. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.
Content for the second column. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.
Content for the third column. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.

You can also adjust the columns width using the width attribute:

Content for the first column. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.
Content for the second column. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Content for the third column. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.

Toggle text – elements useful for creating blocks with text to toggle:

Header text

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.

Header text

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.

Shortcode pageurl allows to place an address to a blog:

https://demo.gavick.com/wordpress/university

A link to a RSS channel:

Link text

A link to a PDF document:

Text of the link

A private note in an entry, visible for an author only:

Mail illegible for bots creating data bases for spammers:

email.to@obfuscate.com

Content visible for logged in users only:

Members onlyContent for the members only

Related posts:

View full image
Bonnie Marshal

My first attempt at using a GoPro Hero 3+ camera!

Read more...
View full image
Leo Barnes

Is anyone going to the baseball game?

Read more...
View full image
Laurie Lee

What an incredible start to the 2014 year with a massive win for the men's …

Read more...
View full image
Milton Hudson

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec …

Read more...
View full image
Milton Hudson

Tickets for Roots Picnic 2014 are now available on a special Early Bird Pre-Sale basis …

Read more...
View full image
Peyton Douglas

I just finished my first yoga class, it was so nice to take my mind …

Read more...
View full image
Jason Lowe

Love, Actually - Teaching Generation Y the Basics of a Strong Relationship

Read more...
View full image
Mildred Wright

The Young Coaches Programme (YCP) is set to expand to include a Tennis Leaders course.

Read more...

Log In

Create an account