Blog Components in Metis library

Blog from Metis

<section class="section">
  <div class="container">
    <h2 class="title">Our Blog</h2>
    <div class="columns is-multiline is-desktop">
      <div class="column is-4-desktop mb-5">
        <a href="#">
          <img class="image is-fullwidth is-radius is-object-cover is-h-80" src="https://images.unsplash.com/photo-1585441695325-21557ef66366?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </a>
        <div class="mt-4">
          <a href="#">CATEGORY</a>
          <span class="has-text-grey">24 Jan, 2020</span>
        </div>
        <h3 class="mt-4 mb-4 title is-size-4 is-spaced"><a href="#">Lorem ipsum dolor sit amet.</a></h3>
        <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
      <div class="column is-8-desktop mb-5">
        <a href="#">
          <img class="image is-fullwidth is-radius is-object-cover is-h-80" src="https://images.unsplash.com/photo-1519017524945-ed31bb7a3786?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </a>
        <div class="mt-4">
          <a href="#">CATEGORY</a>
          <span class="has-text-grey">24 Jan, 2020</span>
        </div>
        <h3 class="mt-4 mb-4 title is-size-4 is-spaced"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h3>
        <p class="subtitle">Aenean tempus orci eu est ultrices hendrerit. Fusce suscipit, leo a semper venenatis, felis urna pulvinar nibh, vitae porta erat risus sed mauris. Vestibulum vehicula leo eget libero eleifend.</p>
      </div>
      <div class="column is-4-desktop mb-5">
        <a href="#">
          <img class="image is-fullwidth is-radius is-object-cover is-h-80" src="https://images.unsplash.com/photo-1602536100338-c7762727ddb7?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
        </a>
        <div class="mt-4">
          <a href="#">CATEGORY</a>
          <span class="has-text-grey">24 Jan, 2020</span>
        </div>
        <h3 class="mt-4 mb-4 title is-size-4 is-spaced"><a href="#">Lorem ipsum dolor sit amet.</a></h3>
        <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
      <div class="column is-4-desktop mb-5">
        <a href="#">
          <img class="image is-fullwidth is-radius is-object-cover is-h-80" src="https://images.unsplash.com/photo-1603665330306-dd1a67e0cc4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
        </a>
        <div class="mt-4">
          <a href="#">CATEGORY</a>
          <span class="has-text-grey">24 Jan, 2020</span>
        </div>
        <h3 class="mt-4 mb-4 title is-size-4 is-spaced"><a href="#">Lorem ipsum dolor sit amet.</a></h3>
        <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
      <div class="column is-4-desktop mb-5">
        <a href="#">
          <img class="image is-fullwidth is-radius is-object-cover is-h-80" src="https://images.unsplash.com/photo-1603665270146-bbdf9858ea55?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
        </a>
        <div class="mt-4">
          <a href="#">CATEGORY</a>
          <span class="has-text-grey">24 Jan, 2020</span>
        </div>
        <h3 class="mt-4 mb-4 title is-size-4 is-spaced"><a href="#">Lorem ipsum dolor sit amet.</a></h3>
        <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
    </div>
    <div class="has-text-centered"><a class="button is-primary" href="#">Show all posts</a></div>
  </div>
</section>

Blog from Metis

Bootstrap

Metis

<section class="py-5">
  <div class="container">
    <h2 class="mb-4 fw-bold">Our Blog</h2>
    <div class="row mb-5">
      <div class="col-12 col-lg-4 mb-3">
        <a class="text-decoration-none" href="#">
          <img class="w-100 mb-3 rounded" style="object-fit: cover; height: 20rem;" src="https://images.unsplash.com/photo-1585441695325-21557ef66366?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </a>
        <div>
          <a class="text-decoration-none" href="#">CATEGORY</a>
          <span class="text-muted">24 Jan, 2021</span>
        </div>
        <h4 class="my-2 fw-bold"><a class="text-decoration-none" href="#">Lorem ipsum dolor sit amet.</a></h4>
        <p class="text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
      <div class="col-12 col-lg-8 mb-3">
        <a class="text-decoration-none" href="#">
          <img class="w-100 mb-3 rounded" style="object-fit: cover; height: 20rem;" src="https://images.unsplash.com/photo-1519017524945-ed31bb7a3786?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </a>
        <div>
          <a class="text-decoration-none" href="#">CATEGORY</a>
          <span class="text-muted">24 Jan, 2021</span>
        </div>
        <h4 class="my-2 fw-bold"><a class="text-decoration-none" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
        <p class="text-muted lh-lg">Aenean tempus orci eu est ultrices hendrerit. Fusce suscipit, leo a semper venenatis, felis urna pulvinar nibh, vitae porta erat risus sed mauris. Vestibulum vehicula leo eget libero eleifend.</p>
      </div>
      <div class="col-12 col-lg-4 mt-3">
        <a class="text-decoration-none" href="#">
          <img class="w-100 mb-3 rounded" style="object-fit: cover; height: 20rem;" src="https://images.unsplash.com/photo-1602536100338-c7762727ddb7?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
        </a>
        <div>
          <a class="text-decoration-none" href="#">CATEGORY</a>
          <span class="text-muted">24 Jan, 2021</span>
        </div>
        <h4 class="my-2 fw-bold"><a class="text-decoration-none" href="#">Lorem ipsum dolor sit amet.</a></h4>
        <p class="text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
      <div class="col-12 col-lg-4 mt-3">
        <a class="text-decoration-none" href="#">
          <img class="w-100 mb-3 rounded" style="object-fit: cover; height: 20rem;" src="https://images.unsplash.com/photo-1603665330306-dd1a67e0cc4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
        </a>
        <div>
          <a class="text-decoration-none" href="#">CATEGORY</a>
          <span class="text-muted">24 Jan, 2021</span>
        </div>
        <h4 class="my-2 fw-bold"><a class="text-decoration-none" href="#">Lorem ipsum dolor sit amet.</a></h4>
        <p class="text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
      <div class="col-12 col-lg-4 mt-3">
        <a class="text-decoration-none" href="#">
          <img class="w-100 mb-3 rounded" style="object-fit: cover; height: 20rem;" src="https://images.unsplash.com/photo-1603665270146-bbdf9858ea55?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
        </a>
        <div>
          <a class="text-decoration-none" href="#">CATEGORY</a>
          <span class="text-muted">24 Jan, 2021</span>
        </div>
        <h4 class="my-2 fw-bold"><a class="text-decoration-none" href="#">Lorem ipsum dolor sit amet.</a></h4>
        <p class="text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
    </div>
    <div class="text-center"><a class="btn btn-primary" href="#">Show all posts</a></div>
  </div>
</section>

Blog from Metis

Tailwind CSS

Metis

<section class="py-20" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <h2 class="text-3xl lg:text-4xl mb-8 font-bold font-heading">Our Blog</h2>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full lg:w-1/3 px-3 mb-12">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1585441695325-21557ef66366?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet.</h3>
          <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        </a>
      </div>
      <div class="w-full lg:w-2/3 px-3 mb-12">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1519017524945-ed31bb7a3786?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
          <p class="text-blueGray-400 leading-loose">Aenean tempus orci eu est ultrices hendrerit. Fusce suscipit, leo a semper venenatis, felis urna pulvinar nibh, vitae porta erat risus sed mauris. Vestibulum vehicula leo eget libero eleifend.</p>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-12">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1602536100338-c7762727ddb7?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet.</h3>
          <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-12">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1603665330306-dd1a67e0cc4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet.</h3>
          <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-12">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1603665270146-bbdf9858ea55?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet.</h3>
          <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        </a>
      </div>
      <div class="w-full lg:w-2/3 px-3 mb-12 hidden" :class="{ 'hidden': !showContent }">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1519017524945-ed31bb7a3786?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
          <p class="text-blueGray-400 leading-loose">Aenean tempus orci eu est ultrices hendrerit. Fusce suscipit, leo a semper venenatis, felis urna pulvinar nibh, vitae porta erat risus sed mauris. Vestibulum vehicula leo eget libero eleifend.</p>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-12 hidden" :class="{ 'hidden': !showContent }">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1585441695325-21557ef66366?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet.</h3>
          <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-12 hidden" :class="{ 'hidden': !showContent }">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1602536100338-c7762727ddb7?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet.</h3>
          <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-12 hidden" :class="{ 'hidden': !showContent }">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1603665330306-dd1a67e0cc4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet.</h3>
          <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-12 hidden" :class="{ 'hidden': !showContent }">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1603665270146-bbdf9858ea55?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet.</h3>
          <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        </a>
      </div>
    </div>
    <div class="text-center"><a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent }" class="inline-block py-4 px-8 text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Show all posts</a></div>
  </div>
</section>

Blog Components by Shuffle

Choose from 21 variations of Blog UI components. Presented here are variants available in Metis library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Blog UI components, code and our visual editor. Try the demo for free!

Try for Free →

Redirecting to PayPal

Supporting tools

Plans

Blog Components in Metis library

Framework

UI Library

Components

Blog from Metis

Blog from Metis

Blog from Metis

Blog Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Why the Lifetime License price is changing

New in your Lifetime License

AI Agent

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Blog Components in Metis library

Framework

UI Library

Components

Blog from Metis

Blog from Metis

Blog from Metis

Blog Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Products

UI Components

Extensions

Support

Company