پست های وبلاگ

HTML
Pug

<!-- No Post Format -->
  <div class="card blog-card">
    <div class="card-body">
      <h5 class="post-title">
        <a href="#">Default Blog Post Title Goes Here. No Post Format.</a>
      </h5>
      <p class="text-muted">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
      <a class="tag-link" href="#">Business</a>
      <a class="tag-link" href="#">Technology</a>
    </div>
    <div class="card-footer">
      <a class="post-author" href="#">
        <div class="post-author-avatar">
          <img src="path-to-image" alt="Post Author"/>
        </div>
        <div class="post-author-name">Sara Palson</div>
      </a>
      <div class="post-meta">
        <a href="#"><i class="fe-icon-message-square"></i>21</a>
        <span><i class="fe-icon-clock"></i>Sep 03, 2018</span>
      </div>
    </div>
  </div>

  <!-- Post Format - Gallery -->
  <div class="card blog-card">
    <div class="card-body">
      <span class="post-format"><i class="fe-icon-copy"></i></span>
      <h5 class="post-title">
        <a href="#">Post Format - Gallery</a>
      </h5>
      <p class="text-muted">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      <a class="tag-link" href="#">Management</a>
    </div>
    <div class="card-footer">
      <a class="post-author" href="#">
        <div class="post-author-avatar">
          <img src="path-to-image" alt="Post Author"/>
        </div>
        <div class="post-author-name">Mark Peterson</div>
      </a>
      <div class="post-meta">
        <a href="#"><i class="fe-icon-message-square"></i>19</a>
        <span><i class="fe-icon-clock"></i>Aug 26, 2018</span>
      </div>
    </div>
  </div>

  <!-- Post Format - Quotation -->
  <div class="card blog-card">
    <div class="card-body">
      <span class="post-format">
        <i class="font-family-heading h4 text-primary pt-1">“</i>
      </span>
      <h5 class="post-title">
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</a>
      </h5>
      <p class="text-muted">Someone famous</p>
      <a class="tag-link" href="#">Business Wisdom</a>
    </div>
    <div class="card-footer">
      <a class="post-author" href="#">
        <div class="post-author-avatar">
          <img src="path-to-image" alt="Post Author"/>
        </div>
        <div class="post-author-name">Jessica Jones</div>
      </a>
      <div class="post-meta">
        <a href="#"><i class="fe-icon-message-square"></i>7</a>
        <span><i class="fe-icon-clock"></i>Aug 13, 2018</span>
      </div>
    </div>
  </div>

  <!-- Post Format - Link -->
  <div class="card blog-card">
    <div class="card-body">
      <span class="post-format"><i class="fe-icon-link"></i></span>
      <h5 class="post-title post-title-link">
        <a href="#">Post Format - Link. Display link to 3rd party resources.</a>
      </h5>
      <a class="tag-link" href="#">Business</a>
      <a class="tag-link" href="#">Marketing</a>
    </div>
    <div class="card-footer">
      <a class="post-author" href="#">
        <div class="post-author-avatar">
          <img src="path-to-image" alt="Post Author"/>
        </div>
        <div class="post-author-name">Emanuel Ortega</div>
      </a>
      <div class="post-meta">
        <a href="#"><i class="fe-icon-message-square"></i>5</a>
        <span><i class="fe-icon-clock"></i>Aug 07, 2018</span>
      </div>
    </div>
  </div>

  <!-- Post Format - Video -->
  <div class="card blog-card">
    <div class="card-body">
      <span class="post-format"><i class="fe-icon-video"></i></span>
      <h5 class="post-title">
        <a href="#">Post Format - Video</a>
      </h5>
      <p class="text-muted">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      <a class="tag-link" href="#">Travelling</a>
      <a class="tag-link" href="#">Lifestyle</a>
    </div>
    <div class="card-footer">
      <a class="post-author" href="#">
        <div class="post-author-avatar">
          <img src="path-to-image" alt="Post Author"/>
        </div>
        <div class="post-author-name">Endrew Wilson</div>
      </a>
      <div class="post-meta">
        <a href="#"><i class="fe-icon-message-square"></i>31</a>
        <span><i class="fe-icon-clock"></i>Jul 29, 2018</span>
      </div>
    </div>
  </div>

  <!-- Post Format - Audio -->
  <div class="card blog-card">
    <div class="card-body">
      <span class="post-format"><i class="fe-icon-mic"></i></span>
      <h5 class="post-title">
        <a href="#">Post Format - Audio</a>
      </h5>
      <p class="text-muted">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      <a class="tag-link" href="#">Education</a>
      <a class="tag-link" href="#">Courses</a>
    </div>
    <div class="card-footer">
      <a class="post-author" href="#">
        <div class="post-author-avatar">
          <img src="path-to-image" alt="Post Author"/>
        </div>
        <div class="post-author-name">Silvia Clark</div>
      </a>
      <div class="post-meta">
        <a href="#"><i class="fe-icon-message-square"></i>3</a>
        <span><i class="fe-icon-clock"></i>Jul 15, 2018</span>
      </div>
    </div>
  </div>

//- No Post Format
  .card.blog-card
    .card-body
      h5.post-title
        a(href="#") Default Blog Post Title Goes Here. No Post Format.
      p.text-muted Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.
      a(href="#").tag-link Business
      a(href="#").tag-link Technology
    .card-footer
      a(href="#").post-author
        .post-author-avatar
          +image("path-to-image", "Post Author")
        .post-author-name Sara Palson
      .post-meta
        a(href="#")
          i.fe-icon-message-square
          | 21
        span
          i.fe-icon-clock
          | Sep 03, 2018

  //- Post Format - Gallery
  .card.blog-card
    .card-body
      span.post-format
        i.fe-icon-copy
      h5.post-title
        a(href="#") Post Format - Gallery
      p.text-muted Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
      a(href="#").tag-link Management
    .card-footer
      a(href="#").post-author
        .post-author-avatar
          +image("path-to-mage", "Post Author")
        .post-author-name Mark Peterson
      .post-meta
        a(href="#")
          i.fe-icon-message-square
          | 19
        span
          i.fe-icon-clock
          | Aug 26, 2018

  //- Post Format - Quotation
  .card.blog-card
    .card-body
      span.post-format
        i.font-family-heading.h4.text-primary.pt-1 “
      h5.post-title
        a(href="#") Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
      p.text-muted Someone famous
      a(href="#").tag-link Business Wisdom
    .card-footer
      a(href="#").post-author
        .post-author-avatar
          +image("path-to-image", "Post Author")
        .post-author-name Jessica Jones
      .post-meta
        a(href="#")
          i.fe-icon-message-square
          | 7
        span
          i.fe-icon-clock
          | Aug 13, 2018

  //- Post Format - Link
  .card.blog-card
    .card-body
      span.post-format
        i.fe-icon-link
      h5.post-title.post-title-link
        a(href="#") Post Format - Link. Display link to 3rd party resources.
      a(href="#").tag-link Business
      a(href="#").tag-link Marketing
    .card-footer
      a(href="#").post-author
        .post-author-avatar
          +image("path-to-image", "Post Author")
        .post-author-name Emanuel Ortega
      .post-meta
        a(href="#")
          i.fe-icon-message-square
          | 5
        span
          i.fe-icon-clock
          | Aug 07, 2018

  //- Post Format - Video
  .card.blog-card
    .card-body
      span.post-format
        i.fe-icon-video
      h5.post-title
        a(href="#") Post Format - Video
      p.text-muted Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
      a(href="#").tag-link Travelling
      a(href="#").tag-link Lifestyle
    .card-footer
      a(href="#").post-author
        .post-author-avatar
          +image("path-to-image", "Post Author")
        .post-author-name Endrew Wilson
      .post-meta
        a(href="#")
          i.fe-icon-message-square
          | 31
        span
          i.fe-icon-clock
          | Jul 29, 2018

  //- Post Format - Audio
  .card.blog-card
    .card-body
      span.post-format
        i.fe-icon-mic
      h5.post-title
        a(href="#") Post Format - Audio
      p.text-muted Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
      a(href="#").tag-link Education
      a(href="#").tag-link Courses
    .card-footer
      a(href="#").post-author
        .post-author-avatar
          +image("path-to-image", "Post Author")
        .post-author-name Silvia Clark
      .post-meta
        a(href="#")
          i.fe-icon-message-square
          | 3
        span
          i.fe-icon-clock
          | Jul 15, 2018

HTML
Pug

<!-- No Post Format -->
  <div class="card blog-card">
    <a class="post-thumb" href="#">
      <img src="path-to-image" alt="Post Thumbnail"/>
    </a>
    <div class="card-body">
      <h5 class="post-title">
        <a href="#">Default Blog Post Title Goes Here. No Post Format.</a>
      </h5>
      <p class="text-muted">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      <a class="tag-link" href="#">Space</a>
      <a class="tag-link" href="#">Technology</a>
    </div>
    <div class="card-footer">
      <a class="post-author" href="#">
        <div class="post-author-avatar">
          <img src="path-to-image" alt="Post Author"/>
        </div>
        <div class="post-author-name">Sara Palson</div>
      </a>
      <div class="post-meta">
        <a href="#"><i class="fe-icon-message-square"></i>21</a>
        <span><i class="fe-icon-clock"></i>Sep 03, 2018</span>
      </div>
    </div>
  </div>

  <!-- Post Format - Gallery -->
  <div class="card blog-card">
    <a class="post-thumb" href="#">
      <img src="path-to-image" alt="Post Thumbnail"/>
    </a>
    <div class="card-body">
      <h5 class="post-title">
        <a href="#">Post Format - Gallery</a>
      </h5>
      <p class="text-muted">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      <a class="tag-link" href="#">Travelling</a>
      <a class="tag-link" href="#">Lifestyle</a>
    </div>
    <div class="card-footer">
      <a class="post-author" href="#">
        <div class="post-author-avatar">
          <img src="path-to-image" alt="Post Author"/>
        </div>
        <div class="post-author-name">Mark Peterson</div>
      </a>
      <div class="post-meta">
        <a href="#"><i class="fe-icon-message-square"></i>19</a>
        <span><i class="fe-icon-clock"></i>Aug 26, 2018</span>
      </div>
    </div>
  </div>

  <!-- Post Format - Quotation -->
  <div class="card blog-card">
    <div class="card-body" style="background-image: url(path-to-image);">
      <span class="post-format bg-gradient">
        <i class="font-family-heading h4 text-white pt-1">“</i>
      </span>
      <h5 class="post-title">
        <a class="text-white" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</a>
      </h5>
      <p class="text-white">Someone famous</p>
      <a class="tag-link" href="#">Business Wisdom</a>
    </div>
    <div class="card-footer">
      <a class="post-author" href="#">
        <div class="post-author-avatar">
          <img src="path-to-image" alt="Post Author"/>
        </div>
        <div class="post-author-name">Jessica Jones</div>
      </a>
      <div class="post-meta">
        <a href="#"><i class="fe-icon-message-square"></i>7</a>
        <span><i class="fe-icon-clock"></i>Aug 13, 2018</span>
      </div>
    </div>
  </div>

  <!-- Post Format - Video -->
  <div class="card blog-card">
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/VideoID?color=ac32e4&amp;title=0&amp;byline=0&amp;portrait=0" allowfullscreen></iframe>
    </div>
    <div class="card-body">
      <h5 class="post-title">
        <a href="#">Post Format - Video</a>
      </h5>
      <p class="text-muted">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      <a class="tag-link" href="#">Management</a>
    </div>
    <div class="card-footer">
      <a class="post-author" href="#">
        <div class="post-author-avatar">
          <img src="path-to-image" alt="Post Author"/>
        </div>
        <div class="post-author-name">Endrew Wilson</div>
      </a>
      <div class="post-meta">
        <a href="#"><i class="fe-icon-message-square"></i>31</a>
        <span><i class="fe-icon-clock"></i>Jul 29, 2018</span>
      </div>
    </div>
  </div>

  <!-- Post Format - Audio -->
  <div class="card blog-card">
    <iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/AudioID&amp;color=%23ac32e4&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true" allowfullscreen></iframe>
    <div class="card-body">
      <h5 class="post-title">
        <a href="#">Post Format - Audio</a>
      </h5>
      <p class="text-muted">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      <a class="tag-link" href="#">Music</a>
      <a class="tag-link" href="#">Classic Rock</a>
    </div>
    <div class="card-footer">
      <a class="post-author" href="#">
        <div class="post-author-avatar">
          <img src="path-to-image" alt="Post Author"/>
        </div>
        <div class="post-author-name">Silvia Clark</div>
      </a>
      <div class="post-meta">
        <a href="#"><i class="fe-icon-message-square"></i>3</a>
        <span><i class="fe-icon-clock"></i>Jul 15, 2018</span>
      </div>
    </div>
  </div>

//- No Post Format
  .card.blog-card
    a(href="#").post-thumb
      +image("path-to-image", "Post Thumbnail")
    .card-body
      h5.post-title
        a(href="#") Default Blog Post Title Goes Here. No Post Format.
      p.text-muted Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
      a(href="#").tag-link Space
      a(href="#").tag-link Technology
    .card-footer
      a(href="#").post-author
        .post-author-avatar
          +image("img/blog/authors/th01.jpg", "Post Author")
        .post-author-name Sara Palson
      .post-meta
        a(href="#")
          i.fe-icon-message-square
          | 21
        span
          i.fe-icon-clock
          | Sep 03, 2018

  //- Post Format - Gallery
  .card.blog-card
    a(href="#").post-thumb
      +image("path-to-image", "Post Thumbnail")
    .card-body
      h5.post-title
        a(href="#") Post Format - Gallery
      p.text-muted Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
      a(href="#").tag-link Travelling
      a(href="#").tag-link Lifestyle
    .card-footer
      a(href="#").post-author
        .post-author-avatar
          +image("path-to-image", "Post Author")
        .post-author-name Mark Peterson
      .post-meta
        a(href="#")
          i.fe-icon-message-square
          | 19
        span
          i.fe-icon-clock
          | Aug 26, 2018

  //- Post Format - Quotation
  .card.blog-card
    .card-body(style="background-image: url(path-to-image);")
      span.post-format.bg-gradient
        i.font-family-heading.h4.text-white.pt-1 “
      h5.post-title
        a(href="#").text-white Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
      p.text-white Someone famous
      a(href="#").tag-link Business Wisdom
    .card-footer
      a(href="#").post-author
        .post-author-avatar
          +image("path-to-image", "Post Author")
        .post-author-name Jessica Jones
      .post-meta
        a(href="#")
          i.fe-icon-message-square
          | 7
        span
          i.fe-icon-clock
          | Aug 13, 2018

  //- Post Format - Video
  .card.blog-card
    .embed-responsive.embed-responsive-16by9
      iframe(src="https://player.vimeo.com/video/VideoID?color=ac32e4&title=0&byline=0&portrait=0" allowfullscreen).embed-responsive-item
    .card-body
      h5.post-title
        a(href="#") Post Format - Video
      p.text-muted Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
      a(href="#").tag-link Management
    .card-footer
      a(href="#").post-author
        .post-author-avatar
          +image("path-to-image", 'Post Author')
        .post-author-name Endrew Wilson
      .post-meta
        a(href="#")
          i.fe-icon-message-square
          | 31
        span
          i.fe-icon-clock
          | Jul 29, 2018

  //- Post Format - Audio
  .card.blog-card
    iframe(src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/AudioID&color=%23ac32e4&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true" allowfullscreen)
    .card-body
      h5.post-title
        a(href="#") Post Format - Audio
      p.text-muted Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
      a(href="#").tag-link Music
      a(href="#").tag-link Classic Rock
    .card-footer
      a(href="#").post-author
        .post-author-avatar
          +image("path-to-image", "Post Author")
        .post-author-name Silvia Clark
      .post-meta
        a(href="#")
          i.fe-icon-message-square
          | 3
        span
          i.fe-icon-clock
          | Jul 15, 2018

Post formats

Show code

Default Blog Post Title Goes Here. No Post Format.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.

Business Technology