<section class="position-relative py-20 bg-white overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
<div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);"></div>
<div class="position-relative container" style="z-index:1;">
<div class="mb-16 row align-items-center g-8">
<div class="col-12 col-md-8">
<div class="mw-md-5xl">
<span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Blog</span>
<h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Blog posts</h2>
<p class="mb-0 fs-9 fw-medium text-secondary">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
</div>
</div>
<div class="col-12 col-md-4">
<div class="row justify-content-end">
<div class="col-12 col-md-auto"><a class="btn btn-lg btn-success d-flex justify-content-center align-items-center fs-12 py-2 px-4 text-success-light w-100 shadow" href="#">View All Posts</a></div>
</div>
</div>
</div>
<div class="pb-20 row g-8">
<div class="col-12 col-md-4">
<img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news-block.png" alt="">
<p class="mb-2 text-secondary fw-medium">John Doe • 19 Jan 2022</p>
<a class="mb-4 d-inline-block" href="#">
<h3 class="font-heading fs-8 mb-0 text-light-dark link-light-dark">A small business is only as good as its tools and it is totally true.</h3>
</a>
<span class="badge bg-success-dark text-success text-uppercase shadow">Technology</span>
</div>
<div class="col-12 col-md-4">
<img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news2-block.png" alt="">
<p class="mb-2 text-secondary fw-medium">John Doe • 19 Jan 2022</p>
<a class="mb-4 d-inline-block" href="#">
<h3 class="font-heading fs-8 mb-0 text-light-dark link-light-dark">A small business is only as good as its tools and it is totally true.</h3>
</a>
<span class="badge bg-success-dark text-success text-uppercase shadow">Technology</span>
</div>
<div class="col-12 col-md-4">
<img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news3-block.png" alt="">
<p class="mb-2 text-secondary fw-medium">John Doe • 19 Jan 2022</p>
<a class="mb-4 d-inline-block" href="#">
<h3 class="font-heading fs-8 mb-0 text-light-dark link-light-dark">A small business is only as good as its tools and it is totally true.</h3>
</a>
<span class="badge bg-success-dark text-success text-uppercase shadow">Technology</span>
</div>
<div class="col-12 col-md-4">
<img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news5-block.png" alt="">
<p class="mb-2 text-secondary fw-medium">John Doe • 19 Jan 2022</p>
<a class="mb-4 d-inline-block" href="#">
<h3 class="font-heading fs-8 mb-0 text-light-dark link-light-dark">A small business is only as good as its tools and it is totally true.</h3>
</a>
<span class="badge bg-success-dark text-success text-uppercase shadow">Technology</span>
</div>
<div class="col-12 col-md-4">
<img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news6-block.png" alt="">
<p class="mb-2 text-secondary fw-medium">John Doe • 19 Jan 2022</p>
<a class="mb-4 d-inline-block" href="#">
<h3 class="font-heading fs-8 mb-0 text-light-dark link-light-dark">A small business is only as good as its tools and it is totally true.</h3>
</a>
<span class="badge bg-success-dark text-success text-uppercase shadow">Technology</span>
</div>
<div class="col-12 col-md-4">
<img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news4-block.png" alt="">
<p class="mb-2 text-secondary fw-medium">John Doe • 19 Jan 2022</p>
<a class="mb-4 d-inline-block" href="#">
<h3 class="font-heading fs-8 mb-0 text-light-dark link-light-dark">A small business is only as good as its tools and it is totally true.</h3>
</a>
<span class="badge bg-success-dark text-success text-uppercase shadow">Technology</span>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-auto">
<a class="btn btn-lg btn-success d-flex justify-content-center align-items-center fs-12 py-2 px-4 w-100 shadow" href="#">
<span class="me-3 text-success-light">View more</span>
<svg width="12" height="10" viewbox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7583 4.40833C10.6809 4.33023 10.5887 4.26823 10.4871 4.22592C10.3856 4.18362 10.2767 4.16183 10.1667 4.16183C10.0567 4.16183 9.94773 4.18362 9.84619 4.22592C9.74464 4.26823 9.65247 4.33023 9.575 4.40833L6.83333 7.15833V0.833333C6.83333 0.61232 6.74554 0.400358 6.58926 0.244078C6.43297 0.0877975 6.22101 0 6 0C5.77899 0 5.56702 0.0877975 5.41074 0.244078C5.25446 0.400358 5.16667 0.61232 5.16667 0.833333V7.15833L2.425 4.40833C2.26808 4.25141 2.05525 4.16326 1.83333 4.16326C1.61141 4.16326 1.39859 4.25141 1.24167 4.40833C1.08475 4.56525 0.99659 4.77808 0.99659 5C0.99659 5.22192 1.08475 5.43475 1.24167 5.59167L5.40833 9.75833C5.48759 9.8342 5.58104 9.89367 5.68333 9.93333C5.78308 9.97742 5.89094 10.0002 6 10.0002C6.10906 10.0002 6.21692 9.97742 6.31667 9.93333C6.41896 9.89367 6.51241 9.8342 6.59167 9.75833L10.7583 5.59167C10.8364 5.5142 10.8984 5.42203 10.9407 5.32048C10.9831 5.21893 11.0048 5.11001 11.0048 5C11.0048 4.88999 10.9831 4.78107 10.9407 4.67952C10.8984 4.57797 10.8364 4.4858 10.7583 4.40833Z" fill="#F0FDF4"></path>
</svg>
</a>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
