Blog components

Tabler is a great choice when it comes to the blog management. It allows you to create advanced systems with which you’ll be able to administrate your posts without the mess. With our components, your blog will be transparent and really nice-looking.

Post card

The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the .card-img-top class:

And this isn't my nose. This is a false one.

Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...

Rose Bradley 3 days ago

<div class="card">
  <a href="#"><img class="card-img-top" src="./assets/images/photos/david-klaasen-54203-500.jpg" alt="And this isn&#39;t my nose. This is a false one."></a>
  <div class="card-body d-flex flex-column">
    <h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
    <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
    <div class="d-flex align-items-center pt-5 mt-auto">
      <div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/female/18.jpg)"></div>
      <div>
        <a href="./profile.html" class="text-default">Rose Bradley</a>
        <small class="d-block text-muted">3 days ago</small>
      </div>
      <div class="ml-auto text-muted">
        <a href="#" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
      </div>
    </div>
  </div>
</div>

We’ve added the .d-flex .flex-column classes to the .card-body to have the author details be on the bottom of the card.

If you want to create a couple of posts next to each other, add the .row-deck class to .row—then they will all have the same height:

Short content

Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Short content

<div class="row row-cards row-deck">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">Short content</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">Short content</div>
        </div>
    </div>
</div>

Post card with aside image

You can also add the image on the left side of the card. All you need do to is: add the .card-aside class to the element with the .card class. Then add the image in the .card-aside-column element. No worries, tabler will automatically center it and scale to right size:

And this isn't my nose. This is a false one.

Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...

Rose Bradley 3 days ago

<div class="card card-aside">
  <a href="#" class="card-aside-column" style="background-image: url(./assets/images/photos/david-klaasen-54203-500.jpg)"></a>
  <div class="card-body d-flex flex-column">
    <h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
    <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
    <div class="d-flex align-items-center pt-5 mt-auto">
      <div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/female/18.jpg)"></div>
      <div>
        <a href="./profile.html" class="text-default">Rose Bradley</a>
        <small class="d-block text-muted">3 days ago</small>
      </div>
      <div class="ml-auto text-red">
        <a href="#" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
      </div>
    </div>
  </div>
</div>

See more live examples here.