<h1> Heading level 1

<h2> Heading level 2

<h3> Heading level 3

<h4> Heading level 4

<h1 class="headline"> Post heading

Header image

<figure class="header-image">
    <div class="header-image-wrapper">
      <img src="/images/header-images/test-header-image.jpeg" alt="alt" />
    <figcaption class="header-image-caption">Some caption about the image</figcaption>
Some caption about the image (optional)

<h2> Post heading level 2

<h3> Post heading level 3

<h4> Post heading level 4

<p> Paragraph. Our brains work in weird ways. Sometimes you struggle to think of anything, you sit there looking at the blank computer screen for hours, unable to make something look good. Never mind whether you are a designer or developer, you have trouble to put pieces together so the website behaves the way you want.
<strong><b> Strong/bold text
<a> Link
<em><i> Emphasized, italic text
<small> Small text
<ul> Unordered list:
  • A point
  • Another point
  • Another point
    • A nested point
    • Another nested point
    • Another nested point
<ol> Ordered list:
  1. A point
  2. Another point
  3. Another point
    1. A nested point
    2. Another nested point
    3. Another nested point
<blockquote> Blockquote (with <cite>):

This was a vision, fresh and clear as a mountain stream, the mind revealing itself to itself. In my vision, I was on the veranda of a vast estate, a palazzo of some fantastic proportion. There seemed to emanate from it a light from within, this gleaming, radiant marble. I'd known this place. I had in fact been born and raised there. This was my first return.

Major Briggs
Using markdown:
> Hi there!
  > -- <cite>Benjamin Franklin</cite>
<q>Inline quote, he said.
<code> or <span class="code"> or <`back-ticks`> in markdown Inline code
<pre><code> Block code:
code {
    line-height: 1.4em;
    padding-left: $ms0;
    padding-bottom: $ms0;
    margin: $ms3 0;
    overflow: auto;
<figure class="post-image-box"> Post image box:
Barcelona. Photo by Maciek

      <figure class="post-image-box">
        <img class="post-image" src="src" alt="alt" width="374" height="374" />

          Barcelona. Photo by Maciek

Or image that is visible only on bigger screens:

      <figure class="post-image-box-desktop">
        <img class="post-image-desktop" src="src" alt="alt" width="374" height="374" />

          Barcelona. Photo by Maciek

<hr> Separator:

<p class="post-iframe"> Iframe container:

See the Pen React slide-down menu component with ReactCSSTransitionGroup by Julia Jacobs (@gitjul) on CodePen.

      <div class="post-iframe">
        <div data-height="265" data-theme-id="0" data-slug-hash="WMNEdr" data-default-tab="js,result"
          data-user="gitjul" data-embed-version="2" data-pen-title="React slide-down menu component with ReactCSSTransitionGroup"
          See the Pen <a href="src">React slide-down menu component with ReactCSSTransitionGroup</a>
          by Julia Jacobs (<a href="src">@gitjul</a>) on <a href="https://codepen.io">CodePen</a>.
      <script async src="src"></script>
<table> Example Table:

Behaviour on mobile: table is full-width and horizontal scroll is added.

The styles for the table are applied by adding a class name to the <table> element.
table Adds default font and styles.
table--bottom-border Adds border between rows.
table--zebra Adds "zebra" background color efffect for easier reading of the table.
table--centered Centers text in the table.
table--no-break Stops text in the table from breaking into multiply lines.
Lunar 1 Lunar 2 Lunar 3 Lunar 4 Lunar 5 AVG
Candidate A 5 5 5 1 1 3.4
Candidate B 1 1 5 5 5 3.4
Candidate C 4 4 4 3 3 3.6
Candidate D 3 3 4 4 4 3.6

Good practices for writers


  • maintain proper heading structure; use <h2>/## for top-level headings inside the post content because the headline is the actual first-level heading <h1>/#
  • to avoid orphans or widows you can use &nbsp; to glue words together
  • when you add floating post images (with text wrapped around), don't put them in a separate paragraph
  • create gists for longer blocks of code
  • resize images for your post to the maximum width of 1050px and remember to always optimise them

When using <html>

  • use semantic <strong> rather than <b>
  • use semantic <em> rather than <i>

When using markdown

  • in lists, don't put an image as the first thing in <li> - it doesn't look good
  • best to use markdown for code blocks - just indent all the code by 4 spaces
  • see Markdown reference