HTML Typography

This site serves as a template, which should be filled out as part of the design handoff document for the web coder in all relevant resolutions.

Basic Elements

Colours Used

#222222
#0000ff
#ff0000

Fonts and Styles

Roboto - Regular Roboto - Regular Italic Roboto - Bold

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Article Heading

The proposed heading layout should also cover margins between headings and paragraphs, and between headings and other elements. This is an example of a paragraph placed after a heading. The margin can be the same for all elements, or different for each one.

Paragraphs

Paragraph layout should include proposed line space, as well as bold or italics. It can also include the style of links, or specify letter spacing.

Quotations are an integral part of a website's text content. Etiam dapibus pulvinar efficitur. Pellentesque habitant morbi tristique senectus et netus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at condimentum libero. Etiam dapibus pulvinar efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Proin dapibus auctor sapien, eget accumsan augue condimentum ac. Morbi molestie bibendum enim, non fermentum dolor volutpat vitae. Sed lacinia lorem ut ante faucibus varius. Phasellus non bibendum tortor, eget aliquet ante. Mauris ut venenatis libero. Nam cursus sagittis leo, id venenatis est convallis eget.

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Lists

Unordered List

  • The bullets can follow any style
  • Another unordered list item
    • Second level unordered list item
    • Same level unordered list item
  • Last unordered list item

Ordered List

  1. The numbers can follow any style
  2. Another ordered list item
    1. Second level ordered list item
    2. Same level ordered list item
  3. Last ordered list item

Tables

Name Description Amount Price
Keyboard Used to type on the computer with individual keys 154 CZK 999
Mouse Used to navigate a computer's GUI 2 479 CZK 499
Graphics Card Use to create graphics output on the monitor 12 CZK 12 299
Monitor Used to display text and graphics information 56 CZK 6 799

Forms

Sample Layout

Notifications

Your message has been sent.
The form contains an error, please check it.
The message cannot be sent, please contact the site administrator.

Miscellaneous Elements

Drop-down List (Select)

Radio Button

Repeating Elements

This section should include the elements repeated on the website, such as buttons, banners, etc.