Blog

This is a heading group intended to live at the start of blog posts.

This is a post title

Written by Author Name on

<header class="u-spaceItems01">
  <h1>
    <a href="#" class="u-textGrow1 u-linkEnter">This is a post title</a>
  </h1>
  <p>
    Written by
    <a href="#">Author Name</a> on
    <time datetime="2017-05-23T00:00">May 23, 2017</time>
  </p>
</header>

This is intended to contain the introductory portion of a blog post.

I have always considered myself a “designer who codes”. I enjoy that aspect of the web, even while in a purely visual design role.

<div class="u-bgGray u-pad1 u-pullSides1 u-textGrow1 u-spaceItems1">
  <p>
    I have always considered myself a “designer who codes”. I enjoy
    that aspect of the web, even while in a purely visual design
    role.
  </p>
</div>

This is an author bio summary intended to live at the end of blog posts.

Author Name

Author Name has an author bio. HTML elements can be within it. It should be relatively short. It should contain some links, possibly pointing to a @twitter profile or maybe a website.

<div class="u-cf u-bgGray u-pad1 ">
  <a class="Thumbnail Thumbnail--circle u-floatRight u-spaceLeft"
   href="#">
    <img src="/images/sandbox/orange-avatar.svg" width="75" height="75"
     alt="Author Name" />
  </a>
  <p>
    <a class="u-textBold" href="#">Author Name</a> has an author
    bio. HTML elements can be within it. It should be relatively
    short. It should contain some links, possibly pointing to
    a <a href="#">@twitter</a> profile or maybe a <a href="#">website</a>.
  </p>
</div>

Fixie tote bag ethnic keytar. Neutra vinyl American Apparel kale chips tofu art party, cardigan raw denim quinoa. Cray paleo tattooed, Truffaut skateboard street art PBR jean shorts Shoreditch farm-to-table Austin lo-fi Odd Future occupy.

<article class="u-padEnds u-spaceItems1 u-borderBottomMd js-comment"
 data-id="NaN">
  <p>Fixie tote bag ethnic keytar. Neutra vinyl American Apparel
    kale chips tofu art party, cardigan raw denim quinoa. Cray
    paleo tattooed, Truffaut skateboard street art PBR jean shorts
    Shoreditch farm-to-table Austin lo-fi Odd Future occupy.</p>
  <footer>
    <div class="u-flex u-flexAlignItemsCenter u-flexJustifyBetween js-comment-insertReply">
      <div class="u-flex u-flexWrap u-flexAlignItemsBaseline">
        <p class="u-textBold u-spaceRight01">
          Jack Reyes
        </p>
        <p class="u-textShrink1 u-spaceRight01">
          <time datetime="2016-03-04T00:00">Mar 4, 2016</time>
        </p>
      </div>
      <p>
        <a class="u-linkClean u-textBold u-textNoWrap js-comment-replyToggle"
         href="#">
              <svg viewBox="0 0 24 24" width="24" height="24" role="presentation" class="Icon">
  <g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
    <path d="M20,12H11C2,12,2,5,2,5"/>
    <polyline points="15 5 22 12 15 19"/>
  </g>
</svg>
              Reply
            </a>
      </p>
    </div>
  </footer>
</article>

Leave a Comment

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.

<form class="u-spaceItems1 " id="respond">
  <h2>Leave a Comment</h2>
  <p>Please be kind, courteous and constructive. You may use simple
    HTML or <a href="https://en.support.wordpress.com/markdown-quick-reference/">Markdown</a>    in your comments. All fields are required.</p>
  <div class="FloatLabel js-FloatLabel ">
    <label class="FloatLabel-label" for="comment">Message</label>
    <textarea class="Input js-ElasticTextarea" id="comment"></textarea>
  </div>

  <div class="Grid Grid--withGutter">
    <div class="Grid-cell u-sm-size1of2">
      <div class="FloatLabel js-FloatLabel ">
        <label class="FloatLabel-label" for="name">Name</label>
        <input class="Input " id="name" name="name" autocomplete="name"
         type="text" value="">
      </div>

    </div>
    <div class="Grid-cell u-spaceTop1 u-sm-spaceTopNone u-sm-size1of2">
      <div class="FloatLabel js-FloatLabel ">
        <label class="FloatLabel-label" for="email">Email</label>
        <input class="Input " id="email" name="email" autocomplete="home email"
         type="email" value="">
      </div>

    </div>
    <div class="Grid-cell u-spaceTop1">
      <button class="Button Button--default u-block u-sizeFull" type="button">
        Submit Comment
      </button>
    </div>
  </div>


</form>