Posts

Post horizontal

Going Freelance: Pros and Cons

There’s a tendency within the design community to depict freelancing as a goal to be achieved. Who wouldn’t want to lie in

The basic widget HTML markup to display one element looks the following way:

<article class="post-boxed post-boxed-xs-horizontal">
  <div class="post-boxed-image-wrap"><img class="post-boxed-image" src="images/*.jpg" alt="" width="" height=""/>
  </div>
  <div class="post-boxed-body">
    <p class="post-boxed-title"><a href="#"> ... </a></p>
    <div class="post-boxed-text">
      <p> ... </p>
    </div>
    <div class="post-boxed-footer">
      <ul class="post-meta">
        <li>
          ...
        </li>
      </ul>
    </div>
  </div>
</article>

Post vertical

The basic widget HTML markup to display one element looks the following way:

<article class="post-boxed">
  <img class="post-boxed-image" src="images/*.jpg" alt="" width="" height=""/>
  <div class="post-boxed-body">
    <p class="post-boxed-title"><a href="#"> ... </a></p>
    <div class="post-boxed-text">
      <p> ... </p>
    </div>
    <div class="post-boxed-footer">
      <ul class="post-meta">
        <li>
          ...
        </li>
      </ul>
    </div>
  </div>
</article>

The basic widget HTML markup to display one element looks the following way:

<article class="post-preview post-preview-center">
  <img class="img-responsive" src="images/blog-post-06-222x232.jpg" alt="" width="222" height="232"/>
  <div class="caption">
    <p class="post-preview-title"><a href="blog-page.html">Top 5 Design Trends of This Month You Must Use</a></p>
    <ul class="post-meta">
      <li>
        <time datetime="2017-01-01">May 12, 2017</time>
      </li>
      <li><a href="blog-page.html"><span>1 Comment</span></a></li>
    </ul>
  </div>
</article>

Mixed posts

Going Freelance: Pros and Cons

There’s a tendency within the design community to depict freelancing as a goal to be achieved. Who wouldn’t want to lie in

The basic widget HTML markup to display one element looks the following way:

<article class="post-preview">
  <div class="unit unit-spacing-xs unit-horizontal unit-top">
    <div class="unit-left"><img class="post-preview-image" src="images/*.jpg" alt="" width="" height=""/>
    </div>
    <div class="unit-body text-left">
      <p class="post-preview-title"><a href="blog-page.html"> ... </a></p>
      <ul class="post-meta">
        <li>
          <time datetime="2017-01-01"> ... </time>
        </li>
        <li><a href="blog-page.html"><span> ... </span></a></li>
      </ul>
    </div>
  </div>
</article>

The basic widget HTML markup to display one element looks the following way:

  <article class="post-default">
    <div class="post-boxed-body">
      <p class="post-boxed-title"><a href="#"> ... </a></p>
      <div class="post-boxed-footer">
        <ul class="post-meta">
          <li><span class="icon icon-xs icon-primary material-icons-access_time"></span>
            <time datetime="2017-01-01"> ... </time>
          </li>
          <li><a href="blog-page.html"><span class="icon icon-xs icon-primary mdi mdi-comment-outline"></span><span>450 Comments</span></a></li>
          <li><span class="icon icon-xs icon-primary mdi mdi-thumb-up"></span><span> ... </span></li>
        </ul>
      </div>
    </div><img class="post-boxed-image" src="images/*.jpg" alt="" width="" height=""/>

</article>

Timeline posts

The basic widget HTML markup to display one element looks the following way:

<article class="post-news">
  <div class="post-news-image"><img src="images/*.jpg" alt="" width="" height=""/>
  </div>
  <div class="post-news-body">
    <div class="unit unit-horizontal">
      <div class="unit-left">
        <time class="post-news-time" datetime="2017-01-01">
           <span class="big"> ... </span>
           <span class="small"> ... </span>
         </time>
      </div>
      <div class="unit-body">
        <p class="post-news-title"><a href="blog-page.html"> ... </a></p>
        <div class="post-news-text">
          <p> ... </p>
        </div>
      </div>
    </div>
  </div>
</article>