Blog Components in Yofte library

Blog from Yofte

<section class="py-20 bg-gray-100 overflow-x-hidden" x-data="{ showContent: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <h2 class="mb-16 md:mb-24 text-4xl md:text-5xl font-bold font-heading">Latest Blog</h2>
    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="mb-20 flex transition-transform duration-500 ease-in-out -m-3">
      <div x-ref="slide1" class="flex-shrink-0 w-full max-w-3xl p-3">
        <div class="relative">
          <a class="absolute z-10 top-0 mt-80 right-0 m-5 px-8 py-2 bg-white rounded-md font-bold font-heading text-gray-400 hover:text-orange-300 uppercase tracking-widest" href="#">Summer</a>
          <a class="relative block group" href="#">
            <div class="relative h-96">
              <img class="w-full h-96 object-cover object-top" src="yofte-assets/images/placeholder-surfboard-stands.png" alt="">
            </div>
            <div class="relative mt-12">
              <div class="absolute top-0 h-44 px-px bg-blue-300 group-hover:bg-orange-300"></div>
              <div class="px-12">
                <h3 class="mb-8 text-3xl md:text-4xl font-bold font-heading">After curabitur eu laoreet libero eget en vel odio ultricies!</h3>
                <span class="text-lg font-bold font-heading text-blue-300 uppercase">15 MAY 2021</span>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div x-ref="slide2" class="flex-shrink-0 w-full max-w-3xl p-3">
        <div class="relative">
          <a class="absolute z-10 top-0 mt-80 right-0 m-5 px-8 py-2 bg-white rounded-md font-bold font-heading text-gray-400 hover:text-orange-300 uppercase tracking-widest" href="#">Summer</a>
          <a class="relative block group" href="#">
            <div class="relative h-96">
              <img class="w-full h-96 object-cover object-top" src="yofte-assets/images/placeholder-girl.png" alt="">
            </div>
            <div class="relative mt-12">
              <div class="absolute top-0 h-44 px-px bg-blue-300 group-hover:bg-orange-300"></div>
              <div class="px-12">
                <h3 class="mb-8 text-3xl md:text-4xl font-bold font-heading">Next year: one ultricies condimentum phare</h3>
                <span class="text-lg font-bold font-heading text-blue-300 uppercase">14 MAY 2021</span>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div x-ref="slide3" class="flex-shrink-0 w-full max-w-3xl p-3">
        <div class="relative">
          <a class="absolute z-10 top-0 mt-80 right-0 m-5 px-8 py-2 bg-white rounded-md font-bold font-heading text-gray-400 hover:text-orange-300 uppercase tracking-widest" href="#">Summer</a>
          <a class="relative block group" href="#">
            <div class="relative h-96">
              <img class="w-full h-96 object-cover object-top" src="yofte-assets/images/placeholder-surfboard-stands.png" alt="">
            </div>
            <div class="relative mt-12">
              <div class="absolute top-0 h-44 px-px bg-blue-300 group-hover:bg-orange-300"></div>
              <div class="px-12">
                <h3 class="mb-8 text-3xl md:text-4xl font-bold font-heading">Within aliquam erat volutpat ut pharetra sit amet aliquam id.</h3>
                <span class="text-lg font-bold font-heading text-blue-300 uppercase">15 MAY 2021</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="mb-20 flex-shrink-0 w-full">
      <div class="w-full px-3 flex items-center justify-between">
        <div class="relative mr-4 bg-gray-300 py-px w-full md:w-10/12">
          <div class="absolute top-0 bottom-0 left-0 bg-yellow-600" :class="{ 'w-1/3': activeSlide == 0, 'w-2/3': activeSlide == 1, 'w-full': activeSlide == 2 }"></div>
        </div>
        <div class="ml-auto md:w-2/12 flex items-center justify-end">
          <a x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="mr-5 flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md" href="#">
            <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
            </svg>
          </a>
          <a x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="flex items-center justify-center w-12 h-12 bg-blue-300 hover:bg-blue-400 rounded-md" href="#">
            <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <a x-on:click.prevent="showContent = true" :class="{'hidden': showContent}" class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-5 px-8 rounded-md uppercase" href="#">Show More</a></div>
  
</section>

Blog from Yofte

Bulma

Yofte

<section class="section has-background-light is-clipped">
  <div class="container">
    <h2 class="title mb-16 mb-24-tablet">Latest Blog</h2>
    <div class="columns">
      <div class="column is-5 mb-20 is-flex-shrink-0">
        <div class="is-relative">
          <a class="button is-light is-small mt-80 mr-6 is-absolute is-top-0 is-right-0" href="#" style="z-index: 10;">Summer</a>
          <a class="is-block is-relative" href="#">
            <div class="is-relative" style="height: 384px;">
              <img class="image is-fullwidth is-cover" style="height: 100%" src="yofte-assets/images/placeholder-surfboard-stands.png" alt="">
            </div>
            <div class="mt-12 is-relative">
              <div class="pl-1 is-absolute is-top-0 has-background-info" style="height:176px;"></div>
              <div class="px-12">
                <h3 class="title mb-8 is-size-3 has-text-dark">After curabitur eu laoreet libero eget en vel odio ultricies!</h3>
                <span class="has-text-info is-size-6 is-uppercase has-text-weight-bold">15 MAY 2021</span>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="column is-5 mb-20 is-flex-shrink-0">
        <div class="is-relative">
          <a class="button is-light is-small mt-80 mr-6 is-absolute is-top-0 is-right-0" href="#" style="z-index: 10;">Summer</a>
          <a class="is-block is-relative" href="#">
            <div class="is-relative" style="height: 384px;">
              <img class="image is-fullwidth is-cover" style="height: 100%" src="yofte-assets/images/placeholder-girl.png" alt="">
            </div>
            <div class="mt-12 is-relative">
              <div class="pl-1 is-absolute is-top-0 has-background-info" style="height:176px;"></div>
              <div class="px-12">
                <h3 class="title is-size-3 has-text-dark mb-8">Next year: one ultricies condimentum phare</h3>
                <span class="has-text-info is-size-6 is-uppercase has-text-weight-bold">14 MAY 2021</span>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="column is-5 is-hidden-touch is-flex-shrink-0" style="opacity: 40%;">
        <div class="is-relative">
          <a class="button is-light is-small mt-80 mr-6 is-absolute is-top-0 is-right-0" href="#" style="z-index: 10;">Summer</a>
          <a class="is-block is-relative" href="#">
            <div class="is-relative" style="height: 384px;">
              <img class="image is-fullwidth is-cover" style="height: 100%" src="yofte-assets/images/placeholder-girl.png" alt="">
            </div>
            <div class="mt-12 is-relative">
              <div class="pl-1 is-absolute is-top-0 has-background-info" style="height:176px;"></div>
              <div class="px-12">
                <h3 class="title mb-8 is-size-3 has-text-dark">Next year: one ultricies condimentum phare</h3>
                <span class="has-text-info is-size-6 is-uppercase has-text-weight-bold">14 MAY 2021</span>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="column is-5 is-flex-shrink-0">
        <div class="is-relative">
          <a class="button is-light is-small mt-80 mr-6 is-absolute is-top-0 is-right-0" href="#" style="z-index: 10;">Summer</a>
          <a class="is-block is-relative" href="#">
            <div class="is-relative" style="height: 384px;">
              <img class="image is-fullwidth is-cover" style="height: 100%" src="yofte-assets/images/placeholder-girl.png" alt="">
            </div>
            <div class="mt-12 is-relative">
              <div class="pl-1 is-absolute is-top-0 has-background-info" style="height:176px;"></div>
              <div class="px-12">
                <h3 class="title mb-8 is-size-3 has-text-dark">Next year: one ultricies condimentum phare</h3>
                <span class="has-text-info is-size-6 is-uppercase has-text-weight-bold">14 MAY 2021</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="mb-24 columns is-multiline is-justify-content-space-between is-align-items-center">
      <div class="column is-9 mx-auto-mobile mr-4 is-relative has-background-grey-light p-0" style="height: 2px;">
        <div class="column is-3 is-absolute is-top-0 is-bottom-0 is-left-0 has-background-primary p-0"></div>
      </div>
      <div class="column is-2 ml-auto is-flex is-justify-content-end is-align-items-center">
        <a class="button is-primary p-0 mr-5 is-flex is-justify-content-center is-align-items-center is-flex-shrink-0" style="width: 48px; height: 48px;" href="#">
          <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
          </svg>
        </a>
        <a class="button is-info p-0 is-flex is-justify-content-center is-align-items-center is-flex-shrink-0" style="width: 48px; height: 48px;" href="#">
          <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
          </svg>
        </a>
      </div>
    </div>
    <div><a class="button is-primary" href="#">Show More</a></div>
  </div>
</section>

Blog from Yofte

Bootstrap

Yofte

<section class="py-20 bg-light overflow-hidden">
  <div class="container">
    <h2 class="mb-16 mb-md-24" >Latest Blog</h2>
    <div class="d-flex mb-20">
      <div class="flex-shrink-0 w-100">
        <div class="row">
          <div class="col-12 col-lg-6 mb-20">
            <div class="position-relative"><a class="btn position-absolute top-0 mt-80 end-0 m-5 px-8 py-2 bg-white rounded-2 text-muted" href="#" style="z-index: 10;" >Summer</a><a class="position-relative d-block link-dark text-decoration-none" href="#">
                <div class="position-relative" style="height: 384px;"><img class="img-fluid w-100 h-100" style="object-fit: cover;" src="yofte-assets/images/placeholder-surfboard-stands.png" alt=""/></div>
                <div class="position-relative mt-12">
                  <div class="position-absolute top-0 bg-info ps-1" style="height:176px;"></div>
                  <div class="px-12">
                    <h3 class="mb-8" >After curabitur eu laoreet libero eget en vel odio ultricies!</h3><span class="h6 text-info text-uppercase" >15 MAY 2021</span>
                  </div>
                </div></a></div>
          </div>
          <div class="col-12 col-lg-6 mb-20">
            <div class="position-relative"><a class="btn position-absolute top-0 mt-80 end-0 m-5 px-8 py-2 bg-white rounded-2 text-muted" href="#" style="z-index: 10;" >Summer</a><a class="position-relative d-block link-dark text-decoration-none" href="#">
                <div class="position-relative" style="height: 384px;"><img class="img-fluid w-100 h-100" style="object-fit: cover;" src="yofte-assets/images/placeholder-girl.png" alt=""/></div>
                <div class="position-relative mt-12">
                  <div class="position-absolute top-0 bg-info ps-1" style="height:176px;"></div>
                  <div class="px-12">
                    <h3 class="mb-8" >Next year: one ultricies condimentum phare</h3><span class="h6 text-info text-uppercase" >14 MAY 2021</span>
                  </div>
                </div></a></div>
          </div>
          <div class="col-12 d-flex align-items-center justify-content-between">
            <div class="position-relative me-4 bg-secondary-light col-7 col-md-9" style="height: 4px;">
              <div class="position-absolute top-0 bottom-0 start-0 bg-primary col-3"></div>
            </div>
            <div class="ms-auto col-md-2 d-flex align-items-center justify-content-end"><a class="me-5 d-flex align-items-center justify-content-center bg-primary rounded-3" style="width: 48px; height: 48px;" href="#">
                <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
                </svg></a><a class="d-flex align-items-center justify-content-center bg-info rounded-3" style="width: 48px; height: 48px;" href="#">
                <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
                </svg></a></div>
          </div>
        </div>
      </div>
      <div class="d-none row d-lg-flex flex-shrink-0 ms-6" style="opacity: 40%;">
        <div class="col-12 col-lg-6">
          <div class="position-relative"><a class="btn position-absolute top-0 mt-80 end-0 m-5 px-8 py-2 bg-white rounded-2 text-muted" href="#" style="z-index: 10;" >Summer</a><a class="position-relative d-block link-dark text-decoration-none" href="#">
              <div class="position-relative" style="height: 384px;"><img class="img-fluid w-100 h-100" style="object-fit: cover;" src="yofte-assets/images/placeholder-girl.png" alt=""/></div>
              <div class="position-relative mt-12">
                <div class="position-absolute top-0 bg-info ps-1" style="height:176px;"></div>
                <div class="px-12">
                  <h3 class="mb-8" >Next year: one ultricies condimentum phare</h3><span class="h6 text-info text-uppercase" >14 MAY 2021</span>
                </div>
              </div></a></div>
        </div>
        <div class="col-12 col-lg-6">
          <div class="position-relative"><a class="btn position-absolute top-0 mt-80 end-0 m-5 px-8 py-2 bg-white rounded-2 text-muted" href="#" style="z-index: 10;" >Summer</a><a class="position-relative d-block link-dark text-decoration-none" href="#">
              <div class="position-relative" style="height: 384px;"><img class="img-fluid w-100 h-100" style="object-fit: cover;" src="yofte-assets/images/placeholder-girl.png" alt=""/></div>
              <div class="position-relative mt-12">
                <div class="position-absolute top-0 bg-info ps-1" style="height:176px;"></div>
                <div class="px-12">
                  <h3 class="mb-8" >Next year: one ultricies condimentum phare</h3><span class="h6 text-info text-uppercase" >14 MAY 2021</span>
                </div>
              </div></a></div>
        </div>
      </div>
    </div>
    <div><a class="btn btn-primary" href="#" >Show More</a></div>
  </div>
</section>

Blog Components by Shuffle

Choose from 15 variations of Blog UI components. Presented here are variants available in Yofte 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 Yofte library

Framework

UI Library

Components

Blog from Yofte

Blog from Yofte

Blog from Yofte

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 Yofte library

Framework

UI Library

Components

Blog from Yofte

Blog from Yofte

Blog from Yofte

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