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

<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:

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

        <figcaption>
          Barcelona. Photo by Maciek
          </figcaption>
      </figure>
    

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

        <figcaption>
          Barcelona. Photo by Maciek
        </figcaption>
      </figure>
    

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

      <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"
          class="codepen">
          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>.
        </div>
      </div>
      <script async src="src"></script>
    

<table> Example Table:

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.