Typography

    Page Title

  • Page Title

  • Heading 1 <h1></h1>

    Lorem ipsum dolor sit amet

  • Heading 2 <h2></h2>

    Consectetuer adipiscing elit

  • Heading 3 <h3></h3>

    Sed diam nonummy nibh euismod tincidunt ut

  • Heading 4 <h4></h4>

    Laoreet dolore magna aliquam erat volutpat

  • Heading 5 <h5></h5>
    Ut wisi enim ad minim veniam quis nostrud exerci tation ullamcorper
  • Heading 6 <h6></h6>
    Suscipit lobortis nisl ut aliquip ex ea commodo consequat
  • Paragraph <p></p>

    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

  • Small <small></small>
    Ut wisi enim ad minim veniam quis nostrud exerci tation ullamcorper
  • Strong <strong></strong>
    Ut wisi enim ad minim veniam quis nostrud exerci tation ullamcorper
  • Italic <em></em>
    Anteposuerit litterarum formas humanitatis per seacula quarta decima

Icons

The primary font library we use is AUI Font Awesome. Go to http://nickpiesco.github.io/alloy-ui-font-awesome-cheatsheet/ to learn more.

Here are the list icons commonly used throughout the site.

  • Linked In icon-linkedin
  • Search icon-search
  • Sign out icon-power-off
  • Profile photo icon-camera
  • Widget config icon-wrench
  • Angle down icon-angle-down
  • Angle up icon-angle-up
  • Chevron down icon-chevron-down
  • Chevron up icon-chevron-up
  • Widget settings icon-gear
  • Close / remove / no icon-close
  • OK / yes icon-check
  • Information icon-info
  • Birthday widget icon-birthday-cake
  • E-Learning widget icon-graduation-cap
  • Pay docs widget icon-file-text-o
  • Work in progress widget icon-list-ul
  • Team absence widget icon-calendar-times-o
  • Authorisation widget icon-calendar-check-o
  • Holiday widget icon-plane
  • Cases widget icon-book
  • Reporting services widget icon-area-chart
  • Generic widget icon-th-large
  • Username icon-user
  • Lock icon-lock
  • Alert success icon-check-circle
  • Alert warning icon-exclamation-triangle
  • Alert danger icon-times-circle
  • Alert info icon-info-circle
Styles

Web Form elements

  • Label class="control-label"
  • Input class="form-control"
  • Text area class="form-control"
  • Select dropdown class="form-control"
  • Select multiple (native) class="form-control"
  • Single/inline checkbox class="checkbox"
  • Single/inline radio class="radio"
  • Single Toggle class="toggle-switch"
  • Input addons class="input-group"

Breadcrumb

Tabs

Tables

  • Standard table
    # Column heading Column heading Column heading
    1 Column content Column content Column content
    2 Column content Column content Column content
    3 Column content Column content Column content
    4 Column content Column content Column content
  • Table non standard content
    # Column heading Column heading Column heading
    1 Standard content Column content Column content
    2 Paragraphs

    Paragraph 1

    Paragraph 2

    		Standard content
    3 Bullet Points
    • content
    • content
    • content
    • content
    1. content
    2. content
    3. content
    4. content
    4 Decoration Italic Underline Strong
    5 Links Column link Column content