Test Page

Table of Contents

  1. Headings
    Examples of headings for font size, line height and style reference.
  2. Paragraphs
    Default body text styles
  3. Characters
    Font special character support check for Romanian and Hungarian localization (commonly covered under Latin Extended subsets).
  4. Scripts
    Various special writing mode examples.
  5. Lists
    List style reference.
  6. Columns
    Custom column layout demonstration. Full support is from x/1 to x/10 columns.
  7. Tables
    Content table style reference.
  8. Images
    Inline image (and caption) style reference.
  9. Forms
    Interactive elements template presentation.

Headings

Maecenas et justo auctor

Vestibulum accumsan magna

Ut dapibus tortor egestas

Sed volutpat ex tempor

Ut blandit eros elementum
Dolor dignissim ultricies

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae eros lacus. Curabitur ultrices augue et lacinia aliquam. Maecenas porttitor diam elit, ac sollicitudin odio viverra nec. Integer convallis dui quis justo mattis, quis porttitor justo porttitor. Sed lobortis tempus fringilla. Maecenas a sagittis mauris. Vestibulum blandit convallis tellus. Pellentesque id sodales dui. Aliquam pretium odio a rhoncus ultrices. Mauris dignissim risus quis eros blandit sodales. Nullam vitae lobortis quam. Nam porta nulla mi, a molestie odio pulvinar non. Donec et orci rutrum, congue ligula id, aliquam nulla.

Duis in finibus tellus. Vivamus nec dapibus massa, in pretium enim. Praesent quis hendrerit augue. Mauris quis placerat felis. Sed dignissim vel sem eget placerat. Curabitur non fermentum purus. Aenean ac metus mattis, fermentum neque vel, iaculis augue. Nam eget semper velit. Donec ligula erat, dictum non sem in, vestibulum venenatis nisi. Etiam id accumsan mi, at faucibus sem. Nulla facilisi.

Characters

Headings
Ăă Ââ Îî Șș Țț Áá Éé Íí Óó Öö Őő Úú Üü Űű
Body text

Ăă Ââ Îî Șș Țț Áá Éé Íí Óó Öö Őő Úú Üü Űű

Monospaced

Ăă Ââ Îî Șș Țț Áá Éé Íí Óó Öö Őő Úú Üü Űű

Scripts

a tag (link), span tag (normal text),
b tag (bold), strong tag (bold), i tag (italic), em tag (emphasis),
u tag (underline), s tag (strikethrough), mark tag (highlight),
small tag (small caps), sup tag (superscript), sub tag (subscript),
q tag (inline quote), cite tag (citation), dfn tag (definition), ABBR (abbreviation),
code tag (inline code), kbd tag (keyboard input), samp tag (code sample)

Nullam interdum nulla id felis convallis egestas. Nulla a suscipit turpis, vitae efficitur neque. Integer at laoreet lacus. Phasellus at efficitur ante. Morbi feugiat elementum magna.

– Block quote

Pre-formatted Code
Name: John Smith
Address: 123 Pine Ave.
Phone: 555-1234

Lists

Unordered list
  • Duis sodales nisl vestibulum sodales aliquam.
  • Morbi id velit at velit ullamcorper suscipit.
  • Morbi tempor mauris et congue blandit.
  • Proin tincidunt nibh a nisi feugiat volutpat.
Ordered list
  1. In commodo massa eget odio tincidunt rutrum.
  2. Phasellus eget purus ultrices, venenatis lorem.
  3. Pellentesque id est ac est pharetra lacinia.
  4. In porttitor metus vitae semper facilisis.
Description list
Donec tincidunt
In malesuada nisl eget feugiat congue.
Posuere mollis
Pellentesque varius orci quis.

Columns

Size x / 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat nulla, imperdiet sit amet dapibus ac, euismod a est. Nullam lobortis vel nulla at ullamcorper. Proin pellentesque felis vitae lorem vulputate, ut feugiat tortor dignissim. Curabitur eget ligula ac orci ultrices consectetur eget id leo. Donec sem elit, vestibulum ac libero quis, mattis tempor quam. Proin viverra lobortis pharetra. Suspendisse mollis leo ipsum, vitae dictum mi fermentum in. Cras viverra vehicula tortor quis egestas.
Duis sit amet ultrices risus. Aenean leo sapien, efficitur ut placerat nec, scelerisque a felis. Quisque euismod libero ante, sed scelerisque magna mollis pellentesque. Aenean et eros faucibus, rutrum augue a, consectetur ligula. Nullam vel libero quam. Ut aliquet dolor fermentum dapibus consequat. Etiam rutrum, felis eu rutrum eleifend, erat lectus vestibulum felis, ac congue nibh massa vel turpis. Vestibulum vehicula scelerisque justo, nec pellentesque lorem tristique id. Etiam laoreet aliquet blandit. Curabitur ac tempus erat.
Size x / 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut arcu sit amet lacus malesuada elementum sed non nunc. Curabitur vulputate pellentesque velit, at congue dolor egestas at. Vivamus at risus facilisis, sollicitudin erat quis, vulputate magna. Sed sed risus a ipsum euismod consectetur.
Nullam et ipsum dolor. Pellentesque blandit auctor tincidunt. In non placerat libero. Curabitur dictum, est nec vestibulum hendrerit, lectus sem pharetra orci, et fringilla quam felis sit amet nibh. Cras sagittis tortor vitae magna sodales, eu tincidunt nisi gravida. Praesent vulputate non magna nec tempor.
Aenean rhoncus mattis massa, id convallis dui interdum a. Vestibulum ut tellus mollis, lacinia eros vel, vulputate diam. Praesent diam risus, lobortis quis molestie eu, posuere a tellus. Phasellus consequat et ligula ac pretium. Nunc fringilla ligula nec iaculis eleifend.

Tables

Basic
Name header Value header
Name 1 Value 1A Value 1B Value 1C
Name 2 Value 2A Value 2B Value 2C
Name 3 Value 3A Value 3B Value 3C
Notes
Data table
Name header Value header
Name 1 Value 1A Value 1B Value 1C
Name 2 Value 2A Value 2B Value 2C
Name 3 Value 3A Value 3B Value 3C
Name 4 Value 4A Value 4B Value 4C
Name 5 Value 5A Value 5B Value 5C
Notes

Images

Image with caption, left alignment

Donec et dapibus tellus. Mauris porttitor lacus ut lorem congue dictum. Curabitur porttitor rutrum mi, sed sollicitudin leo. Maecenas sagittis metus et vestibulum feugiat. Nullam egestas nunc massa, ac sagittis tortor scelerisque id. Integer porta et nibh at placerat. Aliquam erat volutpat. Donec eu sagittis mauris. Nulla auctor interdum fermentum. Phasellus bibendum, est non dictum tempus, ligula massa commodo nibh, nec malesuada odio dui nec sapien. Fusce eu lacus odio. Maecenas ac nisl dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam ipsum justo, dapibus id diam vitae, maximus fermentum lectus. Vivamus eu hendrerit nisi. Quisque ac nisl id odio finibus aliquet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean viverra blandit sem vel pretium. Nunc mollis nisi ac eros varius ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec faucibus, lacus eu maximus ultrices, ipsum nunc suscipit eros, eu cursus nibh risus ac metus. Donec tempus mi ac efficitur pretium. Praesent eget leo elit. In ut sem hendrerit, luctus odio ut, elementum neque.


Image with caption, right alignment

Aliquam ut sem nec velit egestas hendrerit. Donec semper odio ut libero congue hendrerit. Fusce aliquet turpis posuere nisi dapibus, ut vestibulum tellus aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eros purus, egestas ac consectetur sed, feugiat vel tellus. Morbi ornare nulla urna, eu iaculis diam ultrices id. Proin luctus pellentesque velit, at maximus eros rhoncus id. Nam tristique, tortor quis aliquet vestibulum, nisl purus commodo nisl, in lobortis nisl augue in ipsum. Nullam id risus at enim mollis ultricies non at nisi. Sed et elementum nibh. Donec ultrices, quam eget pulvinar congue, lectus ligula tristique tellus, eget porta ipsum felis quis ligula. Curabitur convallis nunc et quam aliquam dignissim. Vivamus ac tortor in dolor interdum aliquet. Phasellus sodales, diam sit amet porta malesuada, metus nisi semper ligula, ut sagittis quam tortor vel lorem. Aliquam nec ex scelerisque, sagittis enim ut, lobortis purus. Etiam non odio eget magna placerat porta et in lectus. Nulla ultrices lorem purus, non lobortis felis tempor at. Quisque accumsan hendrerit dui, eu tristique lectus blandit at. Donec luctus luctus varius. Vestibulum ligula massa, dapibus quis mi a, viverra hendrerit tellus.


Image with caption, central alignment and FancyBox

Image with caption, justified alignment and FancyBox

Forms

Fieldset legend
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus ornare erat laoreet venenatis. Suspendisse sodales odio eleifend, vestibulum dolor mollis, egestas turpis. Maecenas tempus nisl sed sapien molestie bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris egestas augue at viverra vestibulum. Aliquam elementum a massa sed sollicitudin. Quisque sit amet sapien justo. Sed sed diam eget dolor lacinia laoreet. Quisque sollicitudin mollis ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sit amet dui imperdiet, semper leo ut, ullamcorper nisi. Cras quis nibh nec quam viverra rutrum sit amet a massa. Nulla placerat dui lorem, in facilisis est vulputate non. Donec eget est odio. Quisque non turpis ligula.

Mauris ultrices mauris et arcu sagittis, quis gravida dolor sodales. Donec vel semper nibh, at congue nisl. Morbi facilisis, risus id malesuada feugiat, justo libero aliquet ante, et lacinia magna lectus quis diam. Sed commodo ullamcorper erat, et mollis erat pellentesque ac. Proin viverra mi eget eros facilisis, in ultrices mauris accumsan. Praesent elementum, lectus sed condimentum volutpat, nulla purus euismod orci, vel tincidunt diam odio at dolor. Donec pretium et ex a aliquet. Nunc luctus elit id ligula dapibus viverra. Duis non commodo sapien, vel dictum nunc. Curabitur eu quam molestie justo efficitur interdum non non lectus. Aliquam et tortor ac felis ultricies tristique eget a odio. In auctor orci risus, eu luctus mi eleifend vitae. Morbi et mi est. Pellentesque a erat nibh. Etiam ut augue eu metus scelerisque tincidunt vitae volutpat lectus.