No doubt, typography is one of the most important aspects of a theme. Element has all the proportionate margins, padding, and line-heights built right in while allowing you to control the colors and styles with ease.

• General Typography
• Form Elements
• Bonus Classes
• Button Styles

• This page serves as a testbed for the basic HTML typographic elements.

  Heading One

  Heading Two

  Heading Three

  Heading Four

  Heading Five

  Heading Six

   

  This is a blockquote style example. It stands out, but is awesome

  Some Guy, Some Organization

  Basic Paragraph Text

  Paragraph One- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

  Paragraph Two- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

• Form Elements

  Test checkbox 1     Test checkbox 2     Test checkbox 3

  Test radio 1     Test radio 2     Test radio 3

  Select drop-down
  Some text goes here Another choice could be here Yet another item to be chosen Some text goes here Another choice could be here Yet another item to be chosen Some text goes here Another choice could be here Yet another item to be chosen

  Select multiple
  Some text goes here Another choice could be here Yet another item to be chosen Some text goes here Another choice could be here Yet another item to be chosen Some text goes here Another choice could be here Yet another item to be chosen

  Textarea
  

  URL + Autofocus	Email	Text
  Datetime local	Number	Tel (phone)
  Datetime	Date	Month
  Search	Range	File upload

        Button tag

• Example Usage of “note” shortcodes

  This is an alert style that can easily be displayed within your content by inserting the code demonstrated above. This may help to serve your users with system error messages.- link color test

  note class=”alert“

  This is a informational style that can easily be displayed within your content by inserting the code demonstrated above. This may help to accent additional information within an article.- link color test

  note class=”info“

  This is a warning style that can easily be displayed within your content by inserting the code demonstrated above. This may help to serve warnings before proceeding with specified steps. – link color test

  note class=”warn“

  This is an acceptance style that can easily be displayed within your content by inserting the code demonstrated above. You may wish to display this style when outlining success messages.- link color test

  note class=”accept“

  This is an idea style that can easily be displayed within your content by inserting the code demonstrated above. You might use this style in instructional articles. – link color test

  note class=”idea“

• Button Styles

  Using the [button] shortcode in your content, you can deliver clean cross-browser CSS3 buttons in various colors and sizes. The button shortcode accepts 6 parameters:

  Parameters

  • link: URL
  • size: small, medium, large
  • align: left, center, right
  • color: (specified below)
  • target: blank,self
  • caption: freeform text
  Example:

  With Captions:
  You can also pass a “caption” parameter to the button shortcode to generate a nice little call to action.

  Medium Button
  with caption

  ---

  Color and Size Examples:

  color="white"

  Small Button

  Medium Button

  Large Button
  color="gray"

  Small Button

  Medium Button

  Large Button
  color="black"

  Small Button

  Medium Button

  Large Button

  ---

  color="lightblue"

  Small Button

  Medium Button

  Large Button
  color="blue"

  Small Button

  Medium Button

  Large Button
  color="darkblue"

  Small Button

  Medium Button

  Large Button

  ---

  color="lightgreen"

  Small Button

  Medium Button

  Large Button
  color="green"

  Small Button

  Medium Button

  Large Button
  color="darkgreen"

  Small Button

  Medium Button

  Large Button

  ---

  color="lightred"

  Small Button

  Medium Button

  Large Button
  color="red"

  Small Button

  Medium Button

  Large Button
  color="darkred"

  Small Button

  Medium Button

  Large Button

  ---

  color="yellow"

  Small Button

  Medium Button

  Large Button
  color="orange"

  Small Button

  Medium Button

  Large Button
  color="brown"

  Small Button

  Medium Button

  Large Button

  ---