<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>
<p class="title is-size-6 has-text-weight-medium has-text-white is-flex is-align-items-center">
Read more
<img class="ml-4" src="acros-assets/icons/blog/arrow-right-light.svg" alt="">
</p>
</div>
<img class="image is-fullwidth" src="acros-assets/images/blog/robot-635x558.jpg" alt="">
</a>
</div>
<div class="column">
<div class="columns is-multiline">
<div class="column is-12-tablet is-narrow-widescreen">
<a class="is-block is-relative" href="#">
<div class="is-absolute p-6 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>
<h4 class="title is-size-4 has-text-white mb-4">Take care of the relationship</h4>
<p class="title is-size-6 has-text-weight-medium has-text-white is-flex is-align-items-center">
Read more
<img class="ml-4" src="acros-assets/icons/blog/arrow-right-light.svg" alt="">
</p>
</div>
<img class="image is-fullwidth" src="acros-assets/images/blog/work-man-445x264.jpg" alt="">
</a>
</div>
<div class="column is-12-tablet is-narrow-widescreen">
<a class="is-block is-relative" href="#">
<div class="is-absolute p-6 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>
<h4 class="title is-size-4 has-text-white mb-4">Take care of the relationship</h4>
<p class="title is-size-6 has-text-weight-medium has-text-white is-flex is-align-items-center">
Read more
<img class="ml-4" src="acros-assets/icons/blog/arrow-right-light.svg" alt="">
</p>
</div>
<img class="image is-fullwidth" src="acros-assets/images/blog/woman-445x264.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Bulma
UI Library
All Libraries
Components
- Application 38
- Blog 45
- Call to action 73
- Contact 24
- Content 10
- Content 31
- Cookies 26
- FAQ 27
- Features 100
- Footer 29
- HTTP codes 26
- Headers 55
- How it works 29
- Logo clouds 53
- Modals 4
- Navigation (horizontal) 57
- Newsletter 30
- Portfolio 28
- Pricing 25
- Sign in / Sign up 44
- Stats 17
- Tables 2
- Team 25
- Testimonials 34
Having a blog is one of the most commonly chosen SEO strategies. However, for a blog to fulfill this role, it should be well designed and attractive to the audience. Our selection of Bulma blog components will help you achieve this effect.
Choose from many variations of Bulma blog posts components. Presented here are variants available in various UI libraries. You will also find many other types of components 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 Bulma blog posts components, code and our editor. Try the demo for free.
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
