26 KiB

Raw Blame History

<head> </head> Ghost

Grouped Heading 1

Grouped Heading 2 and linked text too.

navigation item #1
navigation item #2
navigation item #3

UI Colours

#aaa9a2 Text

#c0bfb6 Icons

#edece4 Dividers

#242628 BG

#35393b Dividers

#7d878a Text/Icons

#e2edf2 Highlight

Actions

#4090ba Save

#e25440 Delete/Publish

#f59b0d Notifcation

An Article Headline

A longer article subheading that explains the article in a sentence

Tuesday, September 6^th 2011

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H1 Header + Link

H2 Header + Link

H3 Header + Link

H4 Header + Link

H5 Header + Link

H6 Header + Link

Text-level semantics

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The ~~del element~~ example
The dfn element and dfn element with title examples
The em element example
The img element example
The ins element example
The Ctrl + R kbd example
The mark element example
The q element inside a q element example
The ~~s element~~ example
The samp element example
The small element example
The span element example
The strong element example
The _{sub element} example
The ^{sup element} example
The var element example
The u element example

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Ut a est eget ligula molestie gravida. Curabitur massa.
Someone famous, in Source Title - The New Yorker, September 2009

Pre

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.

<html>
    <head>
    </head>
    <body>
        <div class="main"> <div>
    </body>
</html>

List Types

Ordered Lists

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. This bullet tests content going onto two lines

Un-ordered Lists

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. This bullet tests content going onto two lines

Lists Inside Lists Inside Lists

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus:
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
- Vestibulum auctor dapibus neque.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Definition Lists

Definition Title: Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Lorem ipsum dolor sit amet: Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris commodo consequat.

Embedded content

audio

img

figure

svg

video

Form

Inputs as descendents of labels (form legend) Text input Email input Search input Tel input URL input Password input File input Radio input Checkbox input Radio input Checkbox input Select field Option 01 Option 02 Textarea Textarea text Clickable inputs and buttons Reset (button) Button (button) Submit (button) box-sizing tests

Option 01Option 02

Textarea text

Reset (button)

Button (button)

Submit (button)

Button	class=""	Description
Default	`button`	Standard boring default button.
Save This	`button-save`	Stands out, identifies a "save" or "confirm" or "continue" action.
Add New	`button-new`	Used to indicate an action that will create something new.
Delete	`button-delete`	Strong warning - Used to indicate an action that will delete something.
Alternative	`button-alt`	Alternate dark gray button, not tied to a semantic action or use.
Link	`button-link`	Deemphasize a button by making it look like a link, maintaining same behavior.
Split Options	`splitbutton`	Standard boring default button + options.
Split Up Options	`splitbutton up`	The dropdown arrow points up on hover.
Split Save Options	`splitbutton-save`	Save button + options.
Split Add Options	`splitbutton-add`	Add button + options.
Split Delete Options	`splitbutton-delete`	Delete button + options.
Split Alt Options	`splitbutton-alt`	Alt button + options.

Name	Phone Number	Gender
Name	Phone Number	Gender
John Smith	555 - 3246591	Male
Lucy Carter	555 - 6327445	Female
Simon Fletcher	555 - 2335213	Male
Jeremy Edwards	555 - 4297642	Male
Sarah Jones	555 - 6678903	Female

This page is a Ghost custom template for checking CSS consistency.

</html>