This post demonstrates all the typical blog post Markdown elements used. To start off with, here’s a full-width image. Full-width images are centered by default and do not need an extra class:

Example Image

To my left (or above if you’re viewing from a small viewport) is a left-aligned image. You can use the “l-img” class to accomplish this. If the viewport is small, the image shifts to be full-width.

To my right (or above if you’re viewing from a small viewport) is a right-aligned image. You can use the “r-img” class to accomplish this. Like the left-aligned image, if the viewport is small, the image shifts to be full-width.

Various header sizes:

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Bacon ipsum dolor amet veniam shoulder drumstick salami. Ut in bacon voluptate magna ham hock. Elit shoulder ribeye sirloin eu pariatur, strip steak ut dolore. Dolore excepteur prosciutto, adipisicing ball tip tempor incididunt pariatur occaecat cupim sed flank nulla.

Est frankfurter ullamco mollit, flank chuck adipisicing prosciutto fatback ham hock in. Ad swine elit aliqua commodo. Alcatra pork excepteur incididunt strip steak. Ipsum picanha pariatur exercitation, enim doner tempor meatloaf est drumstick culpa hamburger capicola.

An unordered list:

item 1
item 2
item 3

An ordered list:

Item 1
Item 2
Item 3

Hey, here’s a blockquote.

Using the standard Gruber syntax. Because I’m a purist.

— Andrew Lee

<!-- Here's some sample HTML code: -->
<div class="a-class">
    <p>Here's some HTML. Huzzah!</p>
    <p>HTML is:</p>
    <ul>
        <li>The structural layer of your site.</li>
        <li>HTML was invented by <a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee">Tim Berners-Lee</a>.</li>
    </ul>
</div>

Felipe García