Typography

Headings (H1 - H6)

Heading one example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris eros, volutpat non pharetra id, eleifend non leo. Fusce lacinia dolor ut nibh tincidunt cursus rhoncus orci porta.

Heading two example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris eros, volutpat non pharetra id, eleifend non leo. Fusce lacinia dolor ut nibh tincidunt cursus rhoncus orci porta.

Heading three example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris eros, volutpat non pharetra id, eleifend non leo. Fusce lacinia dolor ut nibh tincidunt cursus rhoncus orci porta.

Heading four example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris eros, volutpat non pharetra id, eleifend non leo. Fusce lacinia dolor ut nibh tincidunt cursus rhoncus orci porta.

Heading five example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris eros, volutpat non pharetra id, eleifend non leo. Fusce lacinia dolor ut nibh tincidunt cursus rhoncus orci porta.

Heading six example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris eros, volutpat non pharetra id, eleifend non leo. Fusce lacinia dolor ut nibh tincidunt cursus rhoncus orci porta.

Normal Paragraph of text (P)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor dapibus ultricies. URL Nam in ipsum est. Vivamus tincidunt viverra tincidunt. Nullam dignissim interdum sem, non bibendum velit pretium eu. Pellentesque sed neque erat. Mauris venenatis, metus interdum consectetur dignissim, leo sapien placerat lacus, nec ultricies erat erat ut velit. Nulla facilisi. Ut commodo mauris vel justo faucibus convallis.

Special Tags (blockquote)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor dapibus ultricies. URL Nam in ipsum est. Vivamus tincidunt viverra tincidunt. Nullam dignissim interdum sem, non bibendum velit pretium eu. Pellentesque sed neque erat. Mauris venenatis, metus interdum consectetur dignissim, leo sapien placerat lacus, nec ultricies erat erat ut velit. Nulla facilisi. Ut commodo mauris vel justo faucibus convallis.

Preformatted Text (PRE)

function color_get_info($theme) {
  $path = drupal_get_path('theme', $theme);
  $file = $path .'/color/color.inc';
  if ($path && file_exists($file)) {
    include $file;
    return $info;
  }
}

Phrase elements

em

Element used to put emphasis on certain information. Most browsers display emphased text in italics by default.
Sample: This is emphasied text.

strong

This element stands for "stronger emphasis" and is used for marking more important text.
Sample: This is text with stronger emphasis

cite

According to W3C specification, we use cite element to define source of a quotation or reference.
Sample: This is quotation source

dfn

Element used to markup inline definition of a single term.
Sample: This is definition

code

This element informs the browser that it contains a computer code, such as XHTML markup.
Sample: document.write("Hello world");

samp

Defines computer output data, for example we can use it to markup error messages.
Sample: Error: no such file or directory

kbd

Means information that should be entered by the user.
Sample: press Alt + F4 to close this window. ESC

var

Means variables used in computer programs or scripts.
Sample: counter

abbr

Abbreviation / a shortened form of a word or phrase.
Sample: dr

acronym

Acronym / a word formed from the initial letters of other words.
Sample acronyms: XHTML

q

Inline quotation.
Sample: This is sample quotation

Insertion and deletion samples (INS, DEL)

Furthermore, the latest figures from the marketing department suggest that such practice is on the rise.

Whilte this information is no longer valid.

Lists (UL, OL, DL)

Unordered List

  • the first list item
  • the second list item
  • the third list item

Ordered List

  1. the first list item
  2. the second list item
  3. the third list item

Definition List

the first term
its definition
the second term
its definition
the third term
its definition

Nested lists

  1. the first list item
  2. the second list item
    • first nested item
    • second nested item
  3. the third list item

Drupal Navigation

Table

Table Caption: Solar System
Planet AU from the Sun Orbital Inclination to Ecliptic Mass
Mercury 0.4 7 degrees 3.3022 x 1023 kg
Venus 0.7 3.39 degrees 4.8685 x 1024 kg
Earth 1 0.00005 degrees 5.9737 x 1024 kg
Mars 1.5 1.8 degrees 6.4185 x 1023 kg

Special Messaging Box styles

Info Message Box: Use <div class="help">.. Your text goes here ..</div> to create this.
Status Message Box: Use <div class="messages status">.. Your text goes here ..</div> to create this.
Warning Message Box: Use <div class="messages warning">.. Your text goes here ..</div> to create this.
Error Message Box: Use <div class="messages error">.. Your text goes here ..</div> to create this.

Pager