Our Fancy Page Elements

By

Heading 1

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.

Heading 2

Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum.

Heading 3

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.

Heading 4

Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.

Heading 5

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.

Heading 6

Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

List Types

Horizontal List

Unordered List

  • List Item 1
  • List Item 2
    • Nested list item A
      • Nested Nested list item
    • Nested list item B
    • Toucans are a family, Ramphastidae, of near passerine birds from the neotropics (i.e. Southern Mexico, Central, South American, and Caribbean region).
  • List Item 3

Ordered List

  1. List Item 1
  2. List Item 2
    1. Nested list item A
    2. Nested list item B
  3. List Item 3

Definition List

Single room
$199 breakfast included, VAT not included
Double room
$239 breakfast included, VAT not included

Figures & Images

Furniture and Cobwebs

That figures.

Above is an img, and you’re presently reading a figcaption, both of which are happily coexisting inside a figure.

Figure Element Easy Act to Follow

Here is some text to illustrate how text might appear below the figure element. As a matter of fact, the parent element here is even an article. We’re looking pretty good here, yes?

From Beuu Hotel Window

Room with a Beuu

No figure used here. Just the ol’ <p><img /></p> inside an article.

The photo is from my first night in Calcutta, India, from the third floor of the Beuu Hotel. It was shot at around 5:00 am; I was so scared I couldn’t sleep.

Asleep on the Job

Zzzz...

I can haz webcatz!?

Seriously, what development stylesheet would be complete without the obligatory, cheezy internet meme?

Actually, they’re here for a reason. On small monitors and handhelds, these little cats fill the viewport.

Go ahead. Resize your browser to a narrow, little column.

Mmmm. Responsive.

Table

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

Blockquotes

Let’s keep it simple. Italics are good to help set it off from the body text (and italic Georgia is lovely at this size). Be sure to style the citation.

Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you’d like to hear it I can sing it for you.

— HAL 9000

And here’s a bit of trailing paragraph text to follow the blockquote.

Preformatted Text

Preformatted Text

Typographically, preformatted text is not the same thing as code. Sometimes, a faithful execution of the text requires preformatted text that may not have anything to do with code. A monospaced font is traditionally used for preformatted text.

"Beware the Jabberwock, my son!
			The jaws that bite, the claws that catch!
			Beware the Jubjub bird, and shun
			The frumious Bandersnatch!"

Code

Code can be presented inline, like <?php echo ('Your mom.');?>, or within a <pre> block:

.line { width:100%; *zoom:1; margin-bottom:1.2em; }

Form elements

Labels and Input Types