Rapier has many different styles! Choose one below to see the demo in a different style!
X

This is a Blog post which shows everything

Golden Gate Bridge

Example Picture with Caption

In this post you can check almost everything which can be used in a blog post with Rapier. It has images, captions, all sizes of headings, lists, tables blockquotes, citations and many other HTML5 elements.

This post is very suitable for checking and testing different styles – change the style from style selector and see how everything changes! How this post appears will change greatly with every style you change.

This is a strong point of Rapier – its almost certain that you will find one style which is to your liking and suitable for your purpose.

All of the elements you see in this page can be formatted from Rapier’s admin panel – sizes, borders, colors, border colors, border curves, fonts, font sizes, font colors and styles – the formatting you can do is endless.

Note – you don’t ever need to format anything – you can just pick a style you like, put in your logo and get going in minutes! Rapier is desigend for both people with no code/design knowledge and veteran professionals alike.

Lets drop a blockquote below.

Proin vestibulum. Ut ligula. Nullam sed dolor id odio volutpat pulvinar. Integer a leo. In et eros at neque pretium sagittis. Sed sodales lorem a ipsum suscipit gravida. Ut fringilla placerat arcu. Phasellus imperdiet. Mauris ac justo et turpis pharetra vulputate.Quote Source

Image Alignment 150x150

Image Alignment 150×150

That was cool. Now lets drop a right aligned image here. That fits in perfectly. Left, right aligned images are a staple of blog posts anyway.

But hey, no post is complete without subheadings

That was a H2 subheading. The H1 heading was already on top of the page, or in the page header depending on which style is chosen. There has to be only one H1 heading in a page for best SEO practices anyway. But there is no limit to H2, H3 and smaller headings – those we can use freely, wherever and whenever, inside a post or page. But hey – lets drag this paragraph further to have this text wrap around the right aligned image which is – well, on the right. Which will show us the image is well aligned and floating…. It indeed is – and this text is well wrapped under the image itself, so there is no need to drag this on and on. Lets get to a new paragraph.

But do it with a H3 heading

So it will look stylish. But the point of headings get lost as the headings go smaller – from H3 and on the heading size is almost similar to the text size on a page. Any bigger, and the bigger headings look out of place. But hey – everything has a use in some place in the end. Hey, while at it, lets drop a wide image below.

Image Alignment 580x300

This should span all across the post

Nice one

Such spanning images have more impact in blog posts. Its good to occasionally drop them to help narrative. The above was a H4 heading, by the way.

Lets see a H5 Heading

Even smaller. Going smaller and smaller.

H6 Is even smaller now…

Thats seems enough.

Now lets go through all other elements that can be used in this post

From blockquotes, single line to cited quotes to tables – all of the elements below can be styled and shaped in admin.

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
Jane $1 Because that’s all Steve Job’ needed for a salary.
John $100K For all the blogging he does.
Jane $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Jane $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

The acronym ftw stands for “for the win”.

Big Tag

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 scarcely 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;
}

Quote Tag

Developers, developers, developers… –Steve Ballmer

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

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

Variable Tag

This allows you to denote variables.

2 thoughts on “This is a Blog post which shows everything”

    Howdy! This is an admin comment.

    Here is a non-admin comment.

    It has multiple lines, some code, and a bit more text.

Reply to admin Cancel

Your email address will not be published.