Academics

  • Basic typography options

  • Advanced content styling

  • Additional page elements

  • Images styling options

  • Image possitioning

  • Lists and Tabs design

  • Form elements

This is a sample Heading 1. Lorem ipsum.

Special style for intro paragraph. Typography is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning).

This is a sample Heading 2. Lorem ipsum.

Special sub-headig will help to develop the idea of the heading above

Typography is performed by typesetters, compositors, typographers, graphic designers, art directors, comic book artists, graffiti artists, and clerical workers. Until the Digital Age, typography was a specialized occupation. Digitization opened up typography to new generations of visual designers and lay users. Etiam sed adipiscing nisi. Morbi lacus mi, egestas in hendrerit vel, convallis sit amet velit. Curabitur vestibulum purus egestas lectus sollicitudin egestas pretium leo malesuada. Maecenas metus dui, pulvinar eget ultrices ultrices, ullamcorper vitae dolor. Etiam ullamcorper elit ut nisl ullamcorper aliquam. Ut est libero, feugiat et iaculis vel, ullamcorper id felis. Maecenas et erat id erat faucibus commodo. Praesent imperdiet venenatis sem, a pellentesque lacus rutrum id. Praesent mattis, turpis egestas ullamcorper malesuada, augue est adipiscing nisl, ultrices tincidunt velit sapien sit amet mauris. Fusce blandit condimentum odio id malesuada.

This is a sample Heading 3. Lorem ipsum.

Typography traces its origins to the first punches and dies used to make seals and currency in ancient times. The typographical principle, that is the creation of a complete text by reusing identical characters, was first realized in the Phaistos Disc, an enigmatic Minoan print item from Crete, Greece, which dates between 1850 and 1600 BC. It has been put forward that Roman lead pipe inscriptions were created by movable type printing, but this view has been recently dismissed by the German typographer Herbert Brekle.

This is a sample Heading 4. Lorem ipsum.

The essential criterion of type identity was met by medieval print artifacts such as the Latin Pruefening Abbey inscription of 1119 which was created by the same technique as the Phaistos disc. In the northern Italian town of Cividale, there is a Venetian silver retable from ca. 1200 which had been printed by the means of individual letter punches. The same printing technique can apparently be found in 10th to 12th century Byzantine staurotheca and lipsanotheca. Individual letter tiles where the words are formed by assembling single letter tiles in the desired order were reasonably widespread in medieval Northern Europe.

This is a sample Heading 5. Lorem ipsum.

Typography with movable type was separately invented in 11th-century China. Metal type was first invented in Korea during the Goryeo Dynasty around 1230. Both hand printing systems, however, were only sporadically used and discontinued after the introduction of Western lead type and the printing press.

Abbreviation, cite and other inline tags styling

  • ABBR – an abbreviated phrase. By marking up abbreviations you can give useful information to browsers, spellcheckers, screen readers, translation systems and search-engines.
  • An acronym can be spoken as if it were a word, example NATO, NASA, ASAP.
  • This is a citation. Created using <cite> tag.
  • This text was deleted. The <del> tag defines text that has been deleted from a document.

Quote styling demonstration

Mauris lobortis risus viverra massa fringilla aliquet. In sit amet libero a ante accumsan aliquet nec sit amet nisl. Mauris ornare ornare lectus. Aenean posuere dui nec lacus accumsan eu tempus dolor adipiscing. Fusce tincidunt lobortis risus, ac ultricies erat porttitor eget. Morbi euismod rutrum justo ac rhoncus. Maecenas convallis mauris non elit lobortis nec imperdiet lorem molestie. Pellentesque sit amet feugiat nisi. Maecenas consectetur sem vel leo sollicitudin porta sodales tellus mollis. Vestibulum dapibus arcu id augue feugiat et tristique arcu blandit. Aenean hendrerit mi id augue rutrum suscipit in vitae risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu velit eget odio tempor egestas sit amet a lorem. Phasellus facilisis aliquet diam, nec volutpat eros tristique nec. Praesent eleifend lobortis metus, rutrum condimentum massa mollis quis. Curabitur nec libero nulla, at faucibus magna. Pellentesque at magna vel erat varius aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras a nunc id eros porta feugiat.

This is a good way to gauge what quality of camera you will be buying. Go a little over so that you can get a camera that you will keep much longer." John Doe, quote author

Sed pellentesque feugiat luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur Etiam sed adipiscing nisi.

This is a good way to gauge what quality of camera you will be buying. Go a little over so that you can get a camera that you will keep much longer."
Morbi lacus nibh quis. Feugiat In felis Integer montes interdum elit tincidunt Pellentesque ac montes. Quisque Vestibulum Nulla Sed id elit diam mus est dui nibh. Ligula orci Sed Lorem Vestibulum eu nonummy nibh sit nibh enim. Molestie ante sem nisl et dolor tellus accumsan dui Cras cursus. Ut laoreet In Pellentesque malesuada tristique lacinia eu id ac velit.

Curabitur vestibulum purus egestas lectus sollicitudin egestas pretium leo malesuada. Maecenas metus dui, pulvinar eget ultrices ultrices, ullamcorper vitae dolor. Etiam ullamcorper elit ut nisl ullamcorper aliquam. Ut est libero, feugiat et iaculis vel, ullamcorper id felis. Maecenas et erat id erat faucibus commodo. Praesent imperdiet venenatis sem, a pellentesque lacus rutrum id. Praesent mattis, turpis egestas ullamcorper malesuada, augue est

Advanced typography & layout options

Special style for intro paragraph. Typography is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques. The arrangement of type involves the selection of typefaces, point size, line length, leading.

Drop cap styles & two columns layout

Drop cap or initial is a letter at the beginning of a work, a chapter or a paragraph that is larger than the rest of the text. The word comes from the Latin initialis, which means standing at the beginning. It is often several lines in height and in older books or manuscripts ornately decorated.

Manuscripts had initials with images inside them, like those illustrated here, are known as historiated initials; they were an invention of the Insular art of the British Isles in the 8th century. Initials containing, typically, plant-form spirals with small figures of animals or men.

With a drop cap, the initial sits within the margins and runs several lines deep into the paragraph, pushing some normal-sized text off these lines. This keeps the left and top margins of the paragraph flush. In modern browsers, this can be done with a combination of HTML & CSS.

The classical tradition was late to use capital letters for initials at all; in surviving Roman texts it is often very hard to even separate the words as spacing was not used either. In the Late Antique period both came into in common use in Italy, the initials usually set in the left margin (as in the second example below).

Below is a sample of <pre> tag or code class:

Code
<table border="1"> <!-- color code with spans -->
  <tr>
    <th>Month</th>
    <th>Savings</th>	
  </tr>
</table>

Columns possible layout variations

In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.

First of three columns

A column in structural engineering is a vertical structural element that transmits, through compression, the weight of the structure above to other structural elements below.

Second column

Other compression members are often termed "columns" because of the similar stress conditions. Columns are frequently used to support beams or arches on which the upper parts of walls.

Third column

In architecture "column" refers to such a structural element that also has certain proportional and decorative features.

The first text block is wide

A column in structural engineering is a vertical structural element that transmits, through compression, the weight of the structure above to other structural elements below. For the purpose of wind or earthquake engineering, columns may be designed to resist lateral forces.

The second one is thin

In architecture "column" refers to such a structural element that also has certain proportional and decorative features.

Horizontal dividers

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Additional page elements

Special style for intro paragraph. Typography is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning).

Table styling

Typography is performed by typesetters, compositors, typographers, graphic designers, art directors, comic book artists, graffiti artists, and clerical workers. Until the Digital Age, typography was a specialized occupation. Digitization opened up typography to new generations of visual designers and lay users. Etiam sed adipiscing nisi. Morbi lacus mi, egestas in hendrerit vel, convallis sit amet velit. Curabitur vestibulum purus egestas lectus sollicitudin egestas pretium leo malesuada. Maecenas metus dui, pulvinar eget ultrices ultrices, ullamcorper vitae dolor. Etiam ullamcorper elit ut nisl ullamcorper aliquam. Ut est libero, feugiat et iaculis vel, ullamcorper id felis. Maecenas et erat id erat faucibus commodo. Praesent imperdiet venenatis sem, a pellentesque lacus rutrum id. Praesent mattis, turpis egestas ullamcorper malesuada, augue est adipiscing nisl, ultrices tincidunt velit sapien sit amet mauris. Fusce blandit condimentum odio id malesuada.

Title Author Decription
Anna Karenina Leo Tolstoy Anna Karenina is a novel published in serial installments from 1873 to 1877 in the periodical. The Russian Messenger.
Madame Bovary Gustave Flaubert Madame Bovary is Gustave Flaubert's first published novel and is considered his masterpiece.
War and Peace Leo Tolstoy War and Peace, a Russian novel by Leo Tolstoy, is considered one of the greatest works of fiction. [1] It is regarded, along with Anna Karenina (1873–1877), as Tolstoy's finest literary achievement.
Lolita Vladimir Nabokov Lolita is a novel by Vladimir Nabokov, first written in English and published in 1955 in Paris, later translated by the author into Russian and published in 1958 in New York.

Message boxes

Sed pellentesque feugiat luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur Etiam sed adipiscing nisi. Morbi lacus mi, egestas in hendrerit vel, convallis sit amet velit. Curabitur vestibulum purus egestas lectus sollicitudin egestas pretium leo malesuada. Maecenas metus dui, pulvinar eget ultrices ultrices, ullamcorper vitae dolor. Etiam ullamcorper elit ut nisl ullamcorper aliquam. Ut est libero, feugiat et iaculis vel, ullamcorper id felis. Maecenas et erat id erat faucibus commodo. Praesent imperdiet venenatis sem, a pellentesque lacus rutrum id. Praesent mattis, turpis egestas ullamcorper malesuada, augue est adipiscing nisl, ultrices tincidunt velit sapien sit amet mauris. Fusce blandit condimentum odio id malesuada.

 

Confirmation message block header

This is a confirmation box. Use <p class="box-green"><span class="icon icon-confirmation"> </span>Your content goes here!</p> to create a confirmation box!
 

Error message block header

This is a error box. Use <p class="box-red"><span class="icon icon-error"> </span>Your content goes here!</p> to create a error box!
 

Warning message block header

This is a warning box. Use <p class="box-orange"><span class="icon icon-warning"> </span>Your content goes here!</p> to create a warning box!
 

Information message block header

This is a information box. Use <p class="box-blue"><span class="icon icon-information"> </span>Your content goes here!</p> to create a information box!
 

System message block header

This is a system box. Use <p class="box-purple"><span class="icon icon-system"> </span>Your content goes here!</p> to create a system box!
  Confirmation message block
  Error message block
  Error message block
  Confirmation message block
  Confirmation message block

Buttons style options

Sed pellentesque feugiat luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur Etiam sed adipiscing nisi.

Images styling options

alt

Special style for intro paragraph. Typography is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques. The arrangement of type involves the selection of typefaces, point size, line length, leading.

Image decoration options

Typography is performed by typesetters, compositors, typographers, graphic designers, art directors, comic book artists, graffiti artists, and clerical workers. Until the Digital Age, typography was a specialized occupation. Digitization opened up typography to new generations of visual designers and lay users.

Image border styles

alt
alt
alt
alt
alt
alt

Image with caption

alt Photo captions are a few lines of text used to explain or elaborate on published photographs.
alt Captions more than a few sentences long are often referred to as a "copy block."
alt They are a type of display copy.
alt Cultivated tulip - Floriade 2005
alt Green Tea lover in a Chinese
alt Captions, also known as cutlines.

Image with zoom badge

  alt
  alt
  alt

Images may be two-dimensional, such as a photograph, screen display, and as well as a three-dimensional, such as a statue. They may be captured by optical devices

Images align options

Special style for intro paragraph. Typography is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques. The arrangement of type involves the selection of typefaces, point size, line length, leading.

Image align left

Etiam sed adipiscing nisi. Morbi lacus mi, egestas in hendrerit vel, convallis sit amet velit. Curabitur vestibulum purus egestas lectus sollicitudin egestas pretium leo malesuada.

Maecenas metus dui, pulvinar eget ultrices ultrices, ullamcorper vitae dolor. Etiam ullamcorper elit ut nisl ullamcorper aliquam. Ut est libero, feugiat et iaculis vel, ullamcorper id felis. Maecenas et erat id erat faucibus commodo. Praesent imperdiet venenatis sem, a pellentesque lacus rutrum id. Praesent mattis, turpis egestas ullamcorper malesuada, augue est adipiscing nisl, ultrices tincidunt velit sapien sit amet mauris. Fusce blandit condimentum odio id malesuada. Etiam ullamcorper elit ut nisl ullamcorper aliquam. Ut est libero, feugiat et iaculis vel, ullamcorper id felis. Morbi lacus mi, egestas in hendrerit vel, convallis sit amet velit. Curabitur vestibulum purus egestas lectus sollicitudin egestas pretium leo malesuada. Maecenas metus dui, pulvinar eget ultrices ultrices. ullamcorper vitae dolor. Etiam ullamcorper elit ut nisl ullamcorper aliquam.

Image align right

Pellentesque tincidunt nulla vel purus mollis sed vestibulum quam varius. Nunc egestas, neque sit amet tempor blandit, nibh nunc lacinia lorem, convallis dictum nulla magna ut odio. Nullam laoreet ultricies leo, dictum

Photo captions are a few lines of text used to explain or elaborate on published photographs.
fermentum massa tincidunt ut. Cras tortor erat, molestie ut pharetra id, accumsan vel leo. Phasellus venenatis nulla vitae leo placerat suscipit. Praesent fermentum feugiat nibh, vel feugiat purus ultrices id. Maecenas libero erat, interdum ac rutrum ac, interdum at metus. Duis et tortor mi, at suscipit enim. Nam sapien sapien, euismod vitae mollis vel, volutpat eu nibh. In eget tellus sit amet arcu pharetra luctus nec ac dolor. Integer porttitor tristique urna, eu fermentum lacus vehicula venenatis. Praesent cursus, nisi vitae accumsan facilisis, dui justo tempus enim, ultrices ornare risus quam at ipsum. Quisque id elit massa, non semper est. Cras interdum fermentum ligula, et lacinia massa cursus vitae. Pellentesque dolor nunc, gravida ut vestibulum id, pulvinar vitae libero.

Image align center

Pellentesque tincidunt nulla vel purus mollis sed vestibulum quam varius. Nunc egestas, neque sit amet tempor blandit, nibh nunc lacinia lorem, convallis dictum nulla magna ut odio. Nullam laoreet ultricies leo, dictum fermentum massa tincidunt ut. Cras tortor erat, molestie ut pharetra id, accumsan vel leo. Phasellus venenatis nulla vitae leo placerat suscipit.

Praesent fermentum feugiat nibh, vel feugiat purus ultrices id. Maecenas libero erat, interdum ac rutrum ac, interdum at metus. Duis et tortor mi, at suscipit enim. Nam sapien sapien, euismod vitae mollis vel, volutpat eu nibh. In eget tellus sit amet arcu pharetra luctus nec ac dolor. Integer porttitor tristique urna, eu fermentum lacus vehicula venenatis. Praesent cursus, nisi vitae accumsan facilisis, dui justo tempus enim, ultrices ornare risus quam at ipsum. Quisque id elit massa, non semper est. Cras interdum fermentum ligula, et lacinia massa cursus vitae. Pellentesque dolor nunc, gravida ut vestibulum id, pulvinar vitae libero.

List styles & Tabs

Special style for intro paragraph. Typography is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques. The arrangement of type involves the selection of typefaces, point size, line length, leading.

Unordered list

Typography is performed by typesetters, compositors, typographers, graphic designers, art directors, comic book artists, graffiti artists, and clerical workers. Until the Digital Age, typography was a specialized occupation. Digitization opened up typography to new generations of visual designers and lay users.

  •  List item of a sample Unordered List.
  •  Nullam laoreet ultricies leo.
    •  Nam sapien sapien, euismod vitae.
    •  Maecenas convallis mauris non elit.
  •  Praesent eleifend lobortis metus.
  •  List item of a sample Unordered List.
  •  Nullam laoreet ultricies leo.
    •  Nam sapien sapien, euismod vitae.
    •  Maecenas convallis mauris non elit.
  •  Praesent eleifend lobortis metus.
  •  List item of a sample Unordered List.
  •  Nullam laoreet ultricies leo.
    •  Nam sapien sapien, euismod vitae.
    •  Maecenas convallis mauris non elit.
  •  Praesent eleifend lobortis metus.
  •  List item of a sample Unordered List.
  •  Nullam laoreet ultricies leo.
    •  Nam sapien sapien, euismod vitae.
    •  Maecenas convallis mauris non elit.
  •  Praesent eleifend lobortis metus.
  •  List item of a sample Unordered List.
  •  Nullam laoreet ultricies leo.
    •  Nam sapien sapien, euismod vitae.
    •  Maecenas convallis mauris non elit.
  •  Praesent eleifend lobortis metus.
  •  List item of a sample Unordered List.
  •  Nullam laoreet ultricies leo.
    •  Nam sapien sapien, euismod vitae.
    •  Maecenas convallis mauris non elit.
  •  Praesent eleifend lobortis metus.

Ordered list

Typography is performed by typesetters, compositors, typographers, graphic designers, art directors, comic book artists, graffiti artists, and clerical workers. Until the Digital Age, typography was a specialized occupation. Digitization opened up typography to new generations of visual designers and lay users.

  1. List item of a sample Unordered List.
  2. Nullam laoreet ultricies leo.
    1. Nam sapien sapien, euismod vitae.
    2. Maecenas convallis mauris non elit.
  3. Praesent eleifend lobortis metus.
  1. List item of a sample Unordered List.
  2. Nullam laoreet ultricies leo.
  3. Nam sapien sapien, euismod vitae.
  4. Maecenas convallis mauris non elit.
  5. Praesent eleifend lobortis metus.

Tabs design

Block with tabs
  • Universities Education
  • Student Life News
  • New Discussions

Pellentesque tincidunt nulla vel

Nunc egestas, neque sit amet tempor blandit, nibh nunc lacinia lorem, convallis dictum nulla magna ut odio. Nullam laoreet ultricies leo, dictum fermentum massa tincidunt ut. Cras tortor erat, molestie ut pharetra id, accumsan vel leo.

Standalone tabs
  • Universities Education
  • Student Life News
  • New Discussions
Select option:
  • Medium
  • Alternative option
  • One more option
  • Last option

Images align options

Special style for intro paragraph. Typography is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques.

Legend
Typography is performed by typesetters, compositors, typographers, graphic designers, art directors, comic book artists, graffiti artists, and clerical workers.
1






2


    Error message block


 Submit  Cancel