Content Components in Acros library

<section>
  <div class="container px-4 mx-auto mb-14">
    <div class="flex items-center pt-4 mb-14">
      <a class="inline-block text-xs font-medium uppercase hover:underline" href="#">Home</a>
      <span class="mx-2 text-gray-300">
        <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.33325 1.66675L3.66659 4.00008L1.33325 6.33341" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <a class="inline-block text-xs font-medium uppercase hover:underline" href="#">Blog</a>
      <span class="mx-2 text-gray-300">
        <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.33325 1.66675L3.66659 4.00008L1.33325 6.33341" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <a class="inline-block text-xs text-gray-300 font-medium uppercase" href="#">Article</a>
    </div>
    <div class="max-w-3xl">
      <a class="inline-block font-heading text-green-500 hover:text-green-600 mb-2" href="#">#family</a>
      <h3 class="font-heading text-3xl sm:text-4xl mb-8">The generated Lorem Ipsum is therefore always free from repetition</h3>
      <div class="flex items-center">
        <img class="w-8 h-8 rounded-full mr-3" src="acros-assets/images/blog-content/man-32x32.png" alt="">
        <a class="text-sm leading-6 font-medium hover:underline" href="#">Denny Bailey</a>
        <div class="w-px h-8 mx-4 sm:mx-8 bg-gray-200"></div>
        <div class="flex items-center">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.09277 9.40421H20.9167" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16.4422 13.3097H16.4515" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M12.0045 13.3097H12.0137" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.55793 13.3097H7.5672" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16.4422 17.1962H16.4515" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M12.0045 17.1962H12.0137" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.55793 17.1962H7.5672" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16.0438 2V5.29078" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.9654 2V5.29078" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2383 3.5791H7.77096C4.83427 3.5791 3 5.21504 3 8.22213V17.2718C3 20.3261 4.83427 21.9999 7.77096 21.9999H16.229C19.175 21.9999 21 20.3545 21 17.3474V8.22213C21.0092 5.21504 19.1842 3.5791 16.2383 3.5791Z" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <a class="ml-2 text-sm leading-6 font-medium hover:underline" href="#">Denny Bailey</a>
        </div>
      </div>
    </div>
  </div>
  <img class="block w-full h-112 object-cover" src="acros-assets/images/blog-content/people-1100x480.jpg" alt="">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto pt-12 pb-14">
      <p class="text-lg leading-8 mb-6">Building websites from wireframes that I had received. Some of those questions were:</p>
      <p class="text-lg leading-8 mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="text-lg leading-8">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</section>

<div>
  <section class="section py-12">
    <div class="container">
      <nav class="breadcrumb has-succeeds-separator mb-8 py-4" aria-label="breadcrumbs">
        <ul class="is-align-items-center has-text-weight-medium is-uppercase is-size-7">
          <li><a class="has-text-grey-darker" href="#">Home</a></li>
          <li><a class="has-text-grey-darker" href="#">Blog</a></li>
          <li><a class="has-text-grey-darker" href="#" style="opacity: 0.5;">Article</a></li>
        </ul>
      </nav>
      <h2 class="title is-size-5 has-text-primary mb-2">#family</h2>
      <h1 class="title has-mw-3xl">The generated Lorem Ipsum is therefore always free from repetition</h1>
      <div class="columns is-vcentered is-mobile">
        <div class="column is-narrow">
          <div class="is-flex is-align-items-center">
            <img class="mr-2" src="acros-assets/images/blog-content/man-32x32.png" alt="">
            <small class="has-text-weight-medium">Denny Bailey</small>
          </div>
        </div>
        <div class="column is-narrow px-5">
          <div class="has-background-grey-darker" style="width: 1px; height: 32px; opacity: 0.25;"></div>
        </div>
        <div class="column is-narrow">
          <div class="is-flex is-align-items-center">
            <img class="mr-2" src="acros-assets/icons/blog-content/calendar.svg" alt="">
            <small class="has-text-weight-medium">27 Feb, 21</small>
          </div>
        </div>
      </div>
    </div>
  </section>
  <img class="image is-fullwidth" src="acros-assets/images/blog-content/people.jpg" alt="">
  <div class="container">
    <div class="has-mw-3xl py-12 mx-auto">
      <p class="subtitle mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="subtitle mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="subtitle">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it&rsquo;s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</div>