Typography Page

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Other elements styling

  • This is abbreviation <abbr> </abbr>
  • This is strong <strong> </strong>
  • This is emphasis <em> </em>
  • This is bold text <b> </b>
  • This is italic text <i> </i>
  • This is cite <cite> </cite>
  • This is small text <small> </small>
  • This is deleted text <del> </del>
  • This is inserted text <ins> </ins>
  • This is defining instance <dfn> </dfn>
  • This is user input <kbd> </kbd>
  • This is sample output <samp> </samp>
  • This is “inline quotation” <q> </q>
  • This is superscript <sup> </sup>
  • This is subscript <sub> </sub>
  • This is a variable <var> </var>

Buttons

These are the various simple button styles to choose from:

Smallsmall button - style "small"
Mediummedium button - style "medium"
Largelarge button - style "large"
PreviousNext class="pro_btn pro_prev"
class="pro_btn pro_next"
Defaultsmall button - style "default"
Successsmall button - style "success"
Warningsmall button - style "warning"
Dangersmall button - style "danger"
Infosmall button - style "info"
These buttons allow you to choose to go to a specific 

page number or click forward or backward

These customized buttons offer option to use an icon or different color.

small button - style "sign-in"
Sign Outsmall button - style "sign-out"
Site Mapsmall button - style "site-map"
Commentsmall button - style "comment"
Refreshsmall button - style "refresh"
Printsmall button - style "print"
Commentsmall button - style "comment" - blue"
Calendarsmall button - style "calendar" - orange
Printsmall button - style "print" - green
Bookmarksmall button - style "bookmark" - red
Downloadsmall button - style "download" - blue
Settingssmall button - style "settings" - green

Breadcrumbs

Description

Breadcrumbs Styles 1, 2 and 3:
Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. Breadcrumbs typically appear horizontally across the top of a web page, often below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point.

Lists

Description

Unordered lists are the perfect remedy for building navigation links.
Ordered lists are great for keeping numbered tasks in line. They order of your internal list items will dictate how the data is presented.

Tables

Default table
Header1 Header2 Header3 Header4 Header5 Header6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Description

Tables are used for for displaying tabular data. Their purpose is to make that data readable, scannable and easily comparable.
One of the most common places to find tables online is on pricing pages or product comparisons.

Striped table
Header1 Header2 Header3 Header4 Header5 Header6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Description

Tables are used for for displaying tabular data. Their purpose is to make that data readable, scannable and easily comparable.
One of the most common places to find tables online is on pricing pages or product comparisons.

Bordered table
Header1 Header2 Header3 Header4 Header5 Header6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Description

Tables are used for for displaying tabular data. Their purpose is to make that data readable, scannable and easily comparable.
One of the most common places to find tables online is on pricing pages or product comparisons.

Combined table
Header1 Header2 Header3 Header4 Header5 Header6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Description

Tables are used for for displaying tabular data. Their purpose is to make that data readable, scannable and easily comparable.
One of the most common places to find tables online is on pricing pages or product comparisons.

Forms

Simple Form
Male
Female

Sign me up for your newsletter
Advanced Form
Male
Female
Sign me up for your newsletter
Contact Form
Contact form submitted! We will be in touch soon.
Description

Simple Form

Forms are a professional way to allow visitors of your website to send you comments or enquiries about your services without having to open up their email program and then type in your email address to send you the email.

Search Form
Subscribe Form
Subscribe
Log In Form
Log In
Description

Search Form:
On content-heavy websites, the search box is often the most frequently used design element. From a usability point of view, users use the search function as an option when looking for specific information on a website. If a website’s content is not organized properly, an efficient search engine is not only helpful but crucial, even for basic website navigation.

Subscribe Form:
Adding a subscribe form to your web site is a great way to attract new subscribers.

Log In Form:
Log-in pages are used for varying reasons to include:
1. Password protecting website content
2. Website forums
3. Mailing list registration
4. Better fidelity for tracking customer behavior

Blockquotes

Donec eget tellus non erat
Ut tellus dolor, dapibus eget, elemenm. Quis que nulla. Vestibulum libero nisl, porta velce lerisque eget, males uada at, neque. Vivmus eget nibh. Etiam cursue vel metus.
Jessica Priston
Description

Blockquote Style 1

“Lorem ipsum dolor amet consectetu adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris...”
Description

Blockquote Style 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Ut tellus dolor, dapibus eget, elemenm. Quis que nulla. Vestibulum libero nisl, porta velce lerisque eget, males uada at, neque. Vivmus eget nibh. Etiam cursue vel metus.
Jessica Priston
Description

Blockquote Style 3

Information blocks

Information blocks can be used for links to news feeds, press releases, articles, product catalog, product comparison, catalog search, photo gallery, FAQ section, file archives, job vacancies, website projects, knowledge base, complex catalogs with numerous properties, hierarchical structuring of products/accessories, linked catalog elements (products, articles, news, etc.), and any other objects that permit properties and links to other objects.

Default

Success

Warning

Important

Info

Address

Chicago,. Il. USA


E -mail: info@bluemarble.co

This layout element is the basic way to allow visitors to contact you.