Bulma Blog Components

<section class="has-background-white py-24 is-clipped">
    <div class="container px-8">
        <h2 class="mb-4 title is-size-1 has-text-centered has-text-weight-bold">Latest from Blog</h2>
        <p class="mb-24 has-text-weight-medium has-text-grey has-text-centered">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condimentum vitae vel purus.</p>
        <div class="columns">
            <div class="column is-6">
                <div class="is-flex is-flex-wrap-wrap -m-4">
                    <div class="p-4">
                        <img src="flaro-assets/images/blog/blog.png" alt="">
                    </div>
                    <div class="p-4" style="flex: 1;">
                        <div class="mb-6">
                            <p class="mb-1 has-text-grey has-text-weight-medium is-uppercase">Product</p>
                            <a class="has-text-dark has-text-weight-semibold is-size-4" href="#">An IT services company that can grow your business</a>
                        </div>
                        <div class="is-flex is-flex-wrap-wrap is-align-items-center -m-1">
                            <div class="p-1">
                                <img src="flaro-assets/images/blog/blog-avatar.png" alt="">
                            </div>
                            <div class="p-1">
                                <p class="has-text-weight-semibold has-text-dark">Wade Warren</p>
                            </div>
                        </div>
                    </div>

<section class="is-relative section py-20" style="overflow: hidden;">
  <img class="is-absolute is-left-0 is-top-0 mt-24 is-hidden-touch" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="is-absolute is-right-0 is-top-0 mt-52 is-hidden-touch" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container">
    <div class="has-mw-2xl mx-auto mb-20 has-text-centered">
      <span class="is-size-7"><small class="has-text-info has-text-weight-semibold">What&apos;s new at Shuffle</small></span>
      <h2 class="mt-8 mb-10 title is-2">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="is-size-5 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="columns is-multiline">
      <div class="column is-8 mb-16">
        <div class="mb-10">
          <a href="#">
            <img class="image is-fullwidth is-cover is-rounded" style="height:400px;" src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </a>
        </div>
        <span class="is-inline-block mb-4 has-text-grey-dark">10 Jun 2021 19:40</span>
        <h2 class="mb-4 title is-3">Lorem ipsum dolor sit amet</h2>
        <p class="mb-8 is-size-5 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a class="is-size-6" href="#">Read more</a>
      </div>
      <div class="column is-4 mb-16">
        <div class="mb-10">
          <img class="image is-fullwidth is-cover is-rounded" style="height:400px;" src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">

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

<section class="section py-28 has-background-white">
  <div class="container">
    <div class="mb-16 mb-20-tablet columns is-vcentered is-multiline">
      <div class="column is-6-tablet">
        <h2 class="title mb-0 is-size-2-touch is-size-1-tablet">Recent articles</h2>
      </div>
      <div class="column is-6-tablet">
        <p class="subtitle">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
      </div>
    </div>
    <div class="mb-20 columns is-multiline">
      <div class="column is-6-tablet is-4-desktop mb-8-touch">
        <a href="#">
          <span class="tag is-primary">Category</span>
        </a>
        <a class="mb-6 is-inline-block" href="#">
          <h2 class="title mt-6 mb-4 is-size-3">Lorem ipsum random blog article</h2>
          <div class="mb-4 is-flex is-align-items-center">
            <span class="has-text-primary">6 min read</span>
            <span class="has-text-primary mx-2">•</span>
            <span class="has-text-primary">10 July 2022</span>
          </div>
          <p class="subtitle">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
        </a>

<section class="section py-16">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">
      <span>Recent on</span>
      <span class="has-text-primary">blog</span>
    </small>
    <div class="columns is-align-items-center mb-12">
      <div class="column is-7">
        <h2 class="title">Finish what you started today before you forget to do it</h2>
      </div>
      <div class="column is-5">
        <div class="buttons"><a class="button is-primary is-outlined ml-auto-tablet" href="#">Check all posts</a></div>
      </div>
    </div>
    <div class="columns is-vcentered">
      <div class="column is-narrow-widescreen">
        <a class="is-block is-relative" href="#">
          <div class="is-absolute p-8 is-bottom-0" style="z-index: 1;">
            <p class="has-text-white is-size-6 title mb-2">
              <span>#people</span>
              <span class="ml-4">#family</span>
            </p>
            <h3 class="title is-size-3 has-text-white mb-4">Take care of the relationship</h3>
            <p class="subtitle has-text-white has-mw-sm mb-6 is-hidden-touch">The best way to archive better skills is by challenging yourself with exciting projects on the side.</p>

<section class="section py-24">
  <div class="container">
    <div class="has-mw-2xl mx-auto has-text-centered mb-16">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-5">Lorem ipsum</span>
      <h1 class="title is-size-3 has-leading-3 has-text-primary">Lorem ipsum dolor sit amet consectutar</h1>
      <p class="subtitle is-size-5 has-leading-4 mt-5">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="columns is-multiline -mb-20">
      <div class="column is-8 mb-20">
        <div class="is-relative">
          <img class="image is-fullwidth mb-8" style="height: 411px; object-fit: cover;" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <div class="is-absolute is-bottom-0 is-right-0 is-flex is-align-items-center is-justify-content-end pl-2 pr-8 py-2 has-background-info-light clip-path-left-top" style="width: 206px;">
            <span class="is-size-7 has-text-grey">10 jun 2022 | 19:40</span>
          </div>
        </div>
        <div class="has-mw-lg has-mw-xl-desktop">
          <h2 class="is-size-4 has-text-primary has-text-weight-semibold mb-3">Quick problem-solving contact</h2>
          <p class="has-text-grey has-leading-6 mb-4">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          <a class="is-inline-flex is-align-items-center is-size-7 has-text-primary is-uppercase has-text-weight-bold" href="#">
            <span class="mr-2">Read more</span>
            <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z" fill="#3C74F9"></path>
            </svg>
          </a>

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

<section class="section">
  <div class="container">
    <div class="has-mw-4xl mx-auto mb-12 has-text-centered">
      <span class="tag is-warning is-light">Lorem Ipsum</span>
      <h2 class="mt-6 mb-4 title is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="has-mw-xl subtitle mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="columns is-multiline">
      <div class="column is-12 is-8-desktop mb-16">
        <div class="mb-10">
          <img class="image is-fullwidth is-cover" style="height:400px;" src="https://images.unsplash.com/photo-1501854140801-50d01698950b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=840&amp;q=80" alt="">
        </div>
        <span class="is-size-7" style="font-size: 12px;">10 jun 2021 19:40</span>
        <h3 class="mt-4 mb-4 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
        <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a class="button is-ghost has-text-primary is-size-5 p-0 has-text-weight-bold" href="#">Read more</a>
      </div>
      <div class="column is-12 is-4-desktop mb-16">
        <div class="mb-10">
          <img class="image is-fullwidth is-cover" style="height:400px;" src="https://images.unsplash.com/photo-1492724724894-7464c27d0ceb?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=667&amp;q=80" alt="">
        </div>
        <span class="is-size-7">10 jun 2021 19:40</span>
        <h3 class="mt-4 mb-4 title is-size-3 is-spaced">Lorem ipsum dolor</h3>
        <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<section class="section">
  <div class="container">
    <div class="mb-6 columns is-multiline is-centered">
      <div class="column is-12 is-7-fullhd is-8-desktop has-text-centered">
        <span class="has-text-grey-dark">Lorem ipsum</span>
        <h2 class="mt-2 mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="subtitle has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-8 mb-5">
        <div class="mb-4 is-flex">
          <img class="image" src="bulma-plain-assets/images/green-400-horizontal.png" alt="">
        </div>
        <span><small class="has-text-grey-dark">10 jun 2021 19:40</small></span>
        <h2 class="mb-2 is-size-3 is-size-4-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="subtitle has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a href="#">Read More</a>
      </div>
      <div class="column is-4 mb-5">
        <div class="mb-4 is-flex">
          <img class="image" src="bulma-plain-assets/images/green-400-horizontal.png" alt="">
        </div>
        <span><small class="has-text-grey-dark">10 jun 2021 19:40</small></span>

<section class="section has-background-white-ter">
  <div class="container">
    <div class="mb-20 columns is-multiline is-align-items-end">
      <div class="column is-6-desktop mb-8 mb-0-desktop">
        <h1 class="title is-size-2-mobile is-size-1-tablet" style="letter-spacing: -0.04em;">Blog</h1>
      </div>
      <div class="column is-6-desktop has-text-right">
        <a class="button is-ghost px-0" href="#" style="height: 38px;">
          <span class="mr-2">See our blog</span>
          <svg class="is-rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-12-tablet-only is-6-desktop mb-8 mb-0-desktop">
        <a class="box p-0 is-block is-relative" href="#" style="overflow: hidden;">
          <img class="is-block image is-fullwidth" style="max-height: 670px; min-height: 600px;" src="asitrastudio-assets/blog/blog-shadow.png" alt="">
          <div class="has-mw-md is-absolute is-bottom-0 is-left-0 p-10">
            <div class="mb-3">
              <span class="tag mr-3 has-text-dark">Interior</span>
              <span class="is-size-7 has-text-white is-inline-block">9 min read</span>