Blog Post Cards

Code

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

Code

<!-- 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
CreateX
UI Kit

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.

BusinessTechnology
Post Author
Sara Palson
21Sep 03, 2018
Post Format - Gallery

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Management
Post Author
Mark Peterson
19Aug 26, 2018
“
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...

Someone famous

Business Wisdom
Post Author
Jessica Jones
7Aug 13, 2018
Post Format - Link. Display link to 3rd party resources.
BusinessMarketing
Post Author
Emanuel Ortega
5Aug 07, 2018
Post Format - Video

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

TravellingLifestyle
Post Author
Endrew Wilson
31Jul 29, 2018
Post Format - Audio

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

EducationCourses
Post Author
Silvia Clark
3Jul 15, 2018

With thumbnails

  Show code
Post Thumbnail
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.

SpaceTechnology
Post Author
Sara Palson
21Sep 03, 2018
Post Thumbnail
Post Format - Gallery

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

TravellingLifestyle
Post Author
Mark Peterson
19Aug 26, 2018
“
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...

Someone famous

Business Wisdom
Post Author
Jessica Jones
7Aug 13, 2018
Post Format - Video

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Management
Post Author
Endrew Wilson
31Jul 29, 2018
Post Format - Audio

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

MusicClassic Rock
Post Author
Silvia Clark
3Jul 15, 2018