Archives

Pattern Example

placeholder hero image
placeholder card image

This is a headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

placeholder card image

This is a headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

placeholder card image

This is a headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading Goes Here

Lorem ipsum dolor set afsdaf asd saddfds sd asdsd sadfsdfdsf asdf dfsdf sadf sdfsdf adsf ad asd sdf sdfsdf ad ad dsfsd fsadsdfLorem ipsum dolor set afsdaf asd saddfds sd asdsd sadfsdfdsf asdf dfsdf sadf sdfsdf adsf ad asd sdf sdfsdf ad ad dsfsd fsadsdfLorem ipsum dolor set afsdaf asd saddfds sd asdsd sadfsdfdsf asdf dfsdf sadf sdfsdf adsf ad asd sdf sdfsdf ad ad dsfsd fsa.

This is a post is a post is a post

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum lobortis nisl ut commodo. Aenean enim nisi, facilisis in tristique et, commodo eget augue. Nulla eget tortor vel mauris imperdiet convallis a scelerisque metus. Vestibulum nec est molestie, varius lorem a, pretium ex. Donec sollicitudin hendrerit nibh, sit amet suscipit risus facilisis nec. Nullam nec quam vel elit varius finibus sed vel leo. Mauris malesuada nibh eget massa viverra, nec dignissim orci iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.

In viverra hendrerit pulvinar. Aliquam condimentum scelerisque purus, sed accumsan tellus porttitor et. Vestibulum a orci sem. Pellentesque tempus eu nisl vitae condimentum. In luctus, nulla porttitor lacinia cursus, lacus elit hendrerit lacus, ac interdum massa augue sed nulla. Donec posuere ex sed nibh feugiat venenatis. Vestibulum tristique nisl ligula, at malesuada odio sollicitudin hendrerit.

Integer eu vestibulum nisl. Ut eget risus lorem. Ut fermentum, libero at pharetra laoreet, tellus augue sollicitudin nisl, a tristique massa ante quis est. Nullam ac suscipit arcu. Fusce tincidunt sed erat a blandit. Vestibulum interdum augue quis diam consequat, nec rutrum odio sagittis. Etiam interdum tristique arcu. Nam varius ante felis, nec tempus sapien viverra at. Sed pulvinar molestie ornare. Duis eget diam in arcu vulputate pretium. Curabitur mi leo, gravida nec sem quis, tristique efficitur augue.

Donec pretium ipsum a laoreet vehicula. Cras rutrum ipsum vitae finibus auctor. Ut rutrum sapien nec leo luctus, id molestie purus dapibus. Donec elit nisi, volutpat eget mauris ut, commodo aliquam ex. Etiam elementum vehicula ullamcorper. Sed sit amet nulla nec orci venenatis pretium. Cras vel nisl facilisis, semper eros quis, commodo urna. Etiam moles

This is a post with a long title that should wrap to a few lines at least

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum lobortis nisl ut commodo. Aenean enim nisi, facilisis in tristique et, commodo eget augue. Nulla eget tortor vel mauris imperdiet convallis a scelerisque metus. Vestibulum nec est molestie, varius lorem a, pretium ex. Donec sollicitudin hendrerit nibh, sit amet suscipit risus facilisis nec. Nullam nec quam vel elit varius finibus sed vel leo. Mauris malesuada nibh eget massa viverra, nec dignissim orci iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.

In viverra hendrerit pulvinar. Aliquam condimentum scelerisque purus, sed accumsan tellus porttitor et. Vestibulum a orci sem. Pellentesque tempus eu nisl vitae condimentum. In luctus, nulla porttitor lacinia cursus, lacus elit hendrerit lacus, ac interdum massa augue sed nulla. Donec posuere ex sed nibh feugiat venenatis. Vestibulum tristique nisl ligula, at malesuada odio sollicitudin hendrerit.

Integer eu vestibulum nisl. Ut eget risus lorem. Ut fermentum, libero at pharetra laoreet, tellus augue sollicitudin nisl, a tristique massa ante quis est. Nullam ac suscipit arcu. Fusce tincidunt sed erat a blandit. Vestibulum interdum augue quis diam consequat, nec rutrum odio sagittis. Etiam interdum tristique arcu. Nam varius ante felis, nec tempus sapien viverra at. Sed pulvinar molestie ornare. Duis eget diam in arcu vulputate pretium. Curabitur mi leo, gravida nec sem quis, tristique efficitur augue.

Donec pretium ipsum a laoreet vehicula. Cras rutrum ipsum vitae finibus auctor. Ut rutrum sapien nec leo luctus, id molestie purus dapibus. Donec elit nisi, volutpat eget mauris ut, commodo aliquam ex. Etiam elementum vehicula ullamcorper. Sed sit amet nulla nec orci venenatis pretium. Cras vel nisl facilisis, semper eros quis, commodo urna. Etiam moles

Single Post Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt imperdiet interdum. Nullam vitae pulvinar dui. Aliquam eget scelerisque massa, et eleifend odio. Phasellus at pretium dolor.

This is a <h1> tag

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt imperdiet interdum. Nullam vitae pulvinar dui. Aliquam eget scelerisque massa, et eleifend odio. Phasellus at pretium dolor. Donec eget mauris eu massa aliquet tristique ut ultricies felis. Maecenas interdum, diam ut tempor suscipit, felis mauris iaculis orci, ac consectetur sem tortor non nunc. Aliquam vitae rutrum neque, id vestibulum erat. Donec placerat volutpat leo quis posuere. Aliquam sit amet metus dui.

This is a <h2> tag

Aenean eleifend lorem id ipsum auctor eleifend. Nulla id dolor dui. Aenean accumsan dolor ut lacus pretium, ac faucibus felis sagittis. Donec faucibus sed est a facilisis. Curabitur in est dignissim, egestas ligula et, fringilla arcu. Morbi ut dictum felis. Ut nec dolor tellus. Nullam sagittis

Students using laptops listen to a lecture at the School of Business on April 28, 2014. (Al Ferreira/UConn Photo)

odio urna. Nunc rhoncus neque non magna placerat tincidunt. Donec quis tristique sem, sit amet dapibus urna. Nulla viverra nec nisl a egestas. Nullam sed placerat tellus. Proin dui massa, venenatis et ipsum in, pretium luctus elit.

This is a <h3> tag

Phasellus viverra vulputate facilisis. Quisque volutpat, dolor sed facilisis dignissim, turpis ante consequat quam, non tempus libero nunc euismod leo. Aenean lorem justo, interdum in diam congue, pretium vestibulum neque. Integer pharetra turpis a ante posuere cursus. Donec sit amet aliquam lacus, vel blandit massa. Phasellus lectus erat, porta nec sem et, venenatis efficitur ex. Cras sem risus, tincidunt sit amet nibh sed, pharetra molestie urna. Sed sollicitudin justo ligula, ac mollis ligula euismod vitae.

This is a <h4> tag

Cras a aliquet enim. Curabitur non purus turpis. Nunc facilisis, tortor vitae ultrices sollicitudin, ipsum lacus auctor risus, sit amet mattis nunc nisi eu augue. Vestibulum vel sem eu erat posuere mollis. Donec pellentesque lacinia mi, vitae blandit ex venenatis quis. Curabitur dignissim neque vitae sapien pellentesque consectetur. Aenean in eros nibh. Duis pellentesque libero sapien, eu porttitor arcu suscipit id. Mauris pretium facilisis accumsan. Pellentesque vehicula metus ipsum, sit amet volutpat metus faucibus et. Fusce hendrerit erat eget ante posuere faucibus. Ut porttitor, nisl id dignissim ultrices, nibh libero gravida ipsum, et feugiat dolor arcu at lorem. Maecenas vel convallis sapien.

This is a <h5> tag

Fusce id vehicula tortor. Sed sed diam tincidunt magna convallis ullamcorper id a lectus. Aenean faucibus vulputate tincidunt. Ut maximus magna non dui consequat ultrices. Mauris vitae tellus ac purus condimentum sollicitudin. Nulla volutpat enim quis metus tincidunt cursus. Curabitur id turpis in arcu placerat convallis.

This is a <h6> tag

Aenean eleifend lorem id ipsum auctor eleifend. Nulla id dolor dui. Aenean accumsan dolor ut lacus pretium, ac faucibus felis sagittis. Donec faucibus sed est a facilisis. Curabitur in est dignissim, egestas ligula et, fringilla arcu. Morbi u

This is preformatted text right here

Aenean eleifend lorem id ipsum auctor eleifend. Nulla id dolor dui. Aenean accumsan dolor ut lacus pretium, ac faucibus felis sagittis. Donec faucibus sed est a facilisis. Curabitur in est dignissim, egestas ligula et, fringilla arcu. Morbi u

Markup: HTML Tags and Formatting

Headings

Header one

Header two

Header three

Header four

Header five
Header six

Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Tables

Employee Salary
John Doe $1 Because that’s all Steve Jobs needed for a salary.
Jane Doe $100K For all the blogging she does.
Fred Bloggs $100M Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs $100B With hair like that?! Enough said…

Definition Lists

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.

Unordered Lists (Nested)

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Ordered List (Nested)

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

HTML Tags

These supported tags come from the WordPress.com code FAQ.

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (aka. Link)

This is an example of a link.

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Acronym Tag (deprecated in HTML5)

The acronym ftw stands for “for the win”.

Big Tag (deprecated in HTML5)

These tests are a big deal, but this tag is no longer supported in HTML5.

Cite Tag

“Code is poetry.” —Automattic

Code Tag

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Delete Tag

This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead).

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This scarsly known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

Quote Tag

Developers, developers, developers… –Steve Ballmer

Strike Tag (deprecated in HTML5)

This tag shows strike-through text

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the “2” down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up.

Teletype Tag (deprecated in HTML5)

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Variable Tag

This allows you to denote variables.

Markup: Image Alignment

Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started.

On the topic of alignment, it should be noted that users can choose from the options of NoneLeftRight, and Center. In addition, they also get the options of ThumbnailMediumLarge & Fullsize.

Image Alignment 580x300

The image above happens to be centered.

Image Alignment 150x150The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And just when you thought we were done, we’re going to do them all over again with captions!

Image Alignment 580x300
Look at 580×300 getting some caption love.

The image above happens to be centered. The caption also has a link in it, just to see if it does anything funky.

Image Alignment 150x150
Itty-bitty caption.

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400
Massive image comment for your eyeballs.

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200
Feels good to be right all the time.

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And that’s a wrap, yo! You survived the tumultuous waters of alignment. Image alignment achievement unlocked!