Style playground

The style playground is used to demonstrate how different elements of your template are formatted and can be used as a reference when coding this template into your site.

View the source code to see how each element is coded in the XHTML.

Headings

The following are examples of header formats:

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Text

This paragraph shows how all text encapsulated only within <p></p> tags will appear.

More text examples are as follows:

This is emphasised text
This is strong text
This is an acronym
This is deleted text
This is a link

This is a block of code
This is a block of code
This is a block of code

This is a quote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tempor. Nullam tortor. Nulla vel dui. Curabitur et metus. This is a quote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tempor. Nullam tortor. Nulla vel dui. Curabitur et metus.

Images

The following are examples of image formats:

Screenshot of Luminous Flux A left aligned image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tortor non dolor. Donec nulla libero, ullamcorper sed, consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Screenshot of Luminous Flux A right aligned image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tortor non dolor. Donec nulla libero, ullamcorper sed, consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Screenshot of Luminous Flux A left aligned, linked image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tortor non dolor. Donec nulla libero, ullamcorper sed, consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lists

Unordered list

  • List item example
  • List item example
    • Sub list item example
    • Sub list item example
  • List item example

Ordered list

  1. List item example
  2. List item example
    1. Sub list item example
    2. Sub list item example
  3. List item example

Definition list

Definition title
Definition description
Definition title
Definition description

Tables

Tables are used to format data. It is not recommended to use tables for layout purposes.

Table header Table header Table header Table header
Table footer Table footer data Table footer data Table footer data
Cell data Cell data Cell data Cell data
Cell data Cell data Cell data Cell data
Cell data Cell data Cell data Cell data
Cell data Cell data Cell data Cell data
  Table header Table header Table header
Cell data Cell data Cell data Cell data
Cell data Cell data Cell data Cell data
Cell data Cell data Cell data Cell data
Cell data Cell data Cell data Cell data

Forms

Form title

This is how forms and their elements appear:






Radio buttons:


Checkbox buttons: