Green Cars Direct

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:

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:

an example of an image 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.

an example of an image 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. 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.

an example of an image 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.

Lists

Unordered list

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
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

Forms

Form title

This is how forms and their elements appear:

Custom styles

This section demonstrates all elements that can be styled differently to the above when adding a

class or id attribute to the element.

List of images

This is a handy list of images as shown on the homepage. Just create an unordered list with an

images class and add images as normal.

Wrap anchor tags around the images to link them (as shown in the example below).

List of links

This is a handy list of links as shown on the homepage. Just create an unordered list with

a links class and add links as normal.

Columns

If you need more than one column within a page you can use the following unordered list with a cols class followed

by the number of columns you require.

The CSS currently only allows for up to three columns as shown below.

Highlight

If you want to highlight something, just add a highlight class to any element to give a yellow background.

A highlighted paragraph.

Here is some text within a highlighted div.

Button link

If you would like an anchor tag to appear as though it’s a button you can add a btn

class to the anchor, as shown below:

My button

This entry was posted on Sunday, August 24th, 2008 at 6:34 pm and is filed under Portfolio. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

You must be logged in to post a comment.