Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.
Blocks - Blog
Copy any custom block snippet below and paste it on your page to build your website easily.
Our Journal
Here are the latest company news from our blog that got the most attention.
<template>
<section id="snippet-1" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<h2 class="display-4 mb-3 text-center">Our Journal</h2>
<p class="lead fs-lg mb-10 text-center px-md-16 px-lg-21 px-xl-0">
Here are the latest company news from our blog that got the most
attention.
</p>
<div class="swiper-container blog grid-view mb-6">
<Swiper
:space-between="30"
:pagination="{ el: '.pagi1', clickable: true }"
:modules="[Pagination]"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 2 },
1024: { slidesPerView: 3 },
1200: { slidesPerView: 3 },
}"
>
<SwiperSlide v-for="(elm, i) in blogs1" :key="i">
<article>
<figure class="overlay overlay-1 hover-scale rounded mb-5">
<nuxt-link to="/blog-post">
<nuxt-img :src="elm.imageSrc" :alt="elm.imageAlt" />
<span class="bg"></span>
</nuxt-link>
<figcaption>
<h5 class="from-top mb-0">Read More</h5>
</figcaption>
</figure>
<div class="post-header">
<div class="post-category text-line">
<a href="#" class="hover" rel="category">{{
elm.category
}}</a>
</div>
<!-- /.post-category -->
<h2 class="post-title h3 mt-1 mb-3">
<nuxt-link class="link-dark" to="/blog-post">{{
elm.postTitle
}}</nuxt-link>
</h2>
</div>
<!-- /.post-header -->
<div class="post-footer">
<ul class="post-meta">
<li class="post-date">
<i class="uil uil-calendar-alt"></i
><span>{{ elm.postDate }}</span>
</li>
<li class="post-comments">
<a href="#"
><i class="uil uil-comment"></i>{{ elm.comments }}</a
>
</li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.post-footer -->
</article>
</SwiperSlide>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal pagi1"
></div>
</div>
</div>
<!-- /.swiper-container -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { blogs1 } from "~/data/blogs";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
</script>
<style lang="scss" scoped></style><template>
<section id="snippet-2" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gx-lg-8 gx-xl-12 gy-10 gy-lg-0">
<div class="col-lg-4 mt-lg-2">
<h2 class="display-4 mb-3">Our Journal</h2>
<p class="lead fs-lg mb-6 pe-xxl-5">
Here are the latest news from our blog that got the most attention.
</p>
<a href="#" class="btn btn-soft-primary rounded-pill"
>View All News</a
>
</div>
<!-- /column -->
<div class="col-lg-8">
<div
class="swiper-container blog grid-view mb-6"
data-margin="30"
data-dots="true"
data-items-md="2"
data-items-xs="1"
>
<Swiper
:space-between="30"
:pagination="{ el: '.pagi2', clickable: true }"
:modules="[Pagination]"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 2 },
1024: { slidesPerView: 2 },
1200: { slidesPerView: 2 },
}"
>
<SwiperSlide v-for="(elm, i) in blogs1" :key="i">
<article>
<figure class="overlay overlay-1 hover-scale rounded mb-5">
<nuxt-link to="/blog-post">
<nuxt-img :src="elm.imageSrc" :alt="elm.imageAlt" />
<span class="bg"></span>
</nuxt-link>
<figcaption>
<h5 class="from-top mb-0">Read More</h5>
</figcaption>
</figure>
<div class="post-header">
<div class="post-category text-line">
<a href="#" class="hover" rel="category">{{
elm.category
}}</a>
</div>
<!-- /.post-category -->
<h2 class="post-title h3 mt-1 mb-3">
<nuxt-link class="link-dark" to="/blog-post">{{
elm.postTitle
}}</nuxt-link>
</h2>
</div>
<!-- /.post-header -->
<div class="post-footer">
<ul class="post-meta mb-0">
<li class="post-date">
<i class="uil uil-calendar-alt"></i
><span>{{ elm.postDate }}</span>
</li>
<li class="post-comments">
<a href="#"
><i class="uil uil-comment"></i>{{ elm.comments }}</a
>
</li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.post-footer -->
</article>
</SwiperSlide>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal pagi2"
></div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { blogs1 } from "~/data/blogs";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
</script>
<style lang="scss" scoped></style>Our News
Here are the latest company news from our blog that got the most attention.
Read More
Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.
Read More
Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.
Read More
Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.
<template>
<section id="snippet-3" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row">
<div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto">
<h2 class="fs-15 text-uppercase text-primary text-center">
Our News
</h2>
<h3 class="display-4 mb-6 text-center">
Here are the latest company news from our blog that got the most
attention.
</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="position-relative">
<div
class="shape bg-dot primary rellax w-17 h-20"
style="top: 0; left: -1.7rem"
></div>
<div class="swiper-container dots-closer blog grid-view mb-6">
<Swiper
:space-between="6"
:pagination="{ el: '.pagi3', clickable: true }"
:modules="[Pagination]"
:grab-cursor="true"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 2 },
1024: { slidesPerView: 3 },
1200: { slidesPerView: 3 },
}"
>
<SwiperSlide v-for="(elm, i) in blogs1" :key="i">
<div class="item-inner">
<article>
<div class="card">
<figure class="card-img-top overlay overlay-1 hover-scale">
<nuxt-link to="/blog-post">
<nuxt-img :src="elm.imageSrc" alt="" />
<span class="bg"></span>
</nuxt-link>
<figcaption>
<h5 class="from-top mb-0">Read More</h5>
</figcaption>
</figure>
<div class="card-body">
<div class="post-header">
<div class="post-category text-line">
<a href="#" class="hover" rel="category">{{
elm.category
}}</a>
</div>
<!-- /.post-category -->
<h2 class="post-title h3 mt-1 mb-3">
<nuxt-link class="link-dark" to="/blog-post">{{
elm.postTitle
}}</nuxt-link>
</h2>
</div>
<!-- /.post-header -->
<div class="post-content">
<p>{{ elm.desc }}</p>
</div>
<!-- /.post-content -->
</div>
<!--/.card-body -->
<div class="card-footer">
<ul class="post-meta d-flex mb-0">
<li class="post-date">
<i class="uil uil-calendar-alt"></i
><span>{{ elm.postDate }}</span>
</li>
<li class="post-comments">
<a href="#"
><i class="uil uil-comment"></i
>{{ elm.comments }}</a
>
</li>
<li class="post-likes ms-auto">
<a href="#"
><i class="uil uil-heart-alt"></i>{{ elm.likes }}</a
>
</li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
</article>
<!-- /article -->
</div>
</SwiperSlide>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal pagi3"
></div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.position-relative -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { blogs1 } from "~/data/blogs";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
</script>
<style lang="scss" scoped></style>Company news from our blog that got the most attention.
Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<template>
<section id="snippet-4" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row align-items-center mb-10">
<div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20">
<h2 class="display-4 mb-0">
Company news from our blog that got the most attention.
</h2>
</div>
<!--/column -->
<div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">
<a href="#" class="btn btn-soft-primary rounded-pill mb-0"
>View All News</a
>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row gx-lg-8 gx-xl-11 gy-10 blog grid-view">
<div class="col-lg-8">
<article class="post">
<div class="post-slider rounded mb-6">
<div class="swiper-container dots-over">
<Swiper
:space-between="5"
:pagination="{ el: '.pagi5', clickable: true }"
:modules="[Pagination]"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 1 },
1024: { slidesPerView: 1 },
1200: { slidesPerView: 1 },
}"
>
<SwiperSlide v-for="(elm, i) in blogs2" :key="i">
<nuxt-img :src="elm.image" alt="" />
</SwiperSlide>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal pagi5"
></div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.post-slider -->
<div class="post-header mb-5">
<div class="post-category text-line">
<a href="#" class="hover" rel="category">Ideas</a>
</div>
<!-- /.post-category -->
<h2 class="post-title mt-1 mb-4">
<nuxt-link class="link-dark" to="/blog-post"
>Fringilla Ligula Pharetra Amet</nuxt-link
>
</h2>
<ul class="post-meta mb-0">
<li class="post-date">
<i class="uil uil-calendar-alt"></i><span>5 Jul 2022</span>
</li>
<li class="post-author">
<a href="#"
><i class="uil uil-user"></i><span>By Sandbox</span></a
>
</li>
<li class="post-comments">
<a href="#"
><i class="uil uil-comment"></i>3<span> Comments</span></a
>
</li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.post-header -->
<div class="post-content">
<p>
Maecenas sed diam eget risus varius blandit sit amet non magna.
Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam
eget risus varius blandit sit amet non magna. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
<!-- /.post-content -->
</article>
<!-- /.post -->
</div>
<!-- /column -->
<div class="col-lg-4">
<div class="row gy-10">
<div
v-for="(elm, i) in blogs1.slice(0, 2)"
:key="i"
class="col-md-6 col-lg-12"
>
<article class="post">
<figure class="overlay overlay-1 hover-scale rounded mb-5">
<a href="#"> <nuxt-img :src="elm.imageSrc" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Read More</h5>
</figcaption>
</figure>
<div class="post-header">
<div class="post-category text-line">
<a href="#" class="hover" rel="category">{{
elm.category
}}</a>
</div>
<!-- /.post-category -->
<h2 class="post-title h3 mt-1 mb-3">
<nuxt-link class="link-dark" to="/blog-post">{{
elm.postTitle
}}</nuxt-link>
</h2>
</div>
<!-- /.post-header -->
<div class="post-footer">
<ul class="post-meta">
<li class="post-date">
<i class="uil uil-calendar-alt"></i
><span>{{ elm.postDate }}</span>
</li>
<li class="post-comments">
<a href="#"
><i class="uil uil-comment"></i>{{ elm.comments }}</a
>
</li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.post-footer -->
</article>
<!-- /.post -->
</div>
<!-- /column -->
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { blogs1, blogs2 } from "~/data/blogs";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
</script>
<style lang="scss" scoped></style>
<template>
<section id="snippet-5" class="wrapper bg-light wrapper-border">
<div class="overflow-hidden">
<div class="container py-14 py-md-16">
<div class="row">
<div class="col-xl-7 col-xxl-6 mx-auto text-center">
<i class="icn-flower text-primary fs-30 opacity-25"></i>
<h2 class="display-5 text-center mt-2 mb-10">
Here are the latest posts from my blog that grabbed the most
attention.
</h2>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="swiper-container nav-bottom nav-color mb-4">
<Swiper
class="mb-4"
:space-between="30"
:navigation="{
prevEl: '.sbp1',
nextEl: '.sbn1',
}"
:modules="[Navigation]"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 2 },
1024: { slidesPerView: 3 },
1200: { slidesPerView: 3 },
}"
>
<SwiperSlide v-for="(elm, i) in blogs3" :key="i">
<article>
<div class="card shadow-lg mb-7">
<figure class="card-img-top overlay overlay-1">
<nuxt-link to="/blog-post">
<nuxt-img :src="elm.imageSrc" alt="" />
<span class="bg"></span
></nuxt-link>
<figcaption>
<h5 class="from-top mb-0">Read More</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<div class="post-header">
<div class="post-category">
<a href="#" class="hover" rel="category">{{
elm.category
}}</a>
</div>
<!-- /.post-category -->
<h2 class="post-title h3 mt-1 mb-3">
<nuxt-link class="link-dark" to="/blog-post">{{
elm.postTitle
}}</nuxt-link>
</h2>
</div>
<!-- /.post-header -->
<div class="post-footer">
<ul class="post-meta d-flex mb-0">
<li class="post-date">
<i class="uil uil-calendar-alt"></i
><span>{{ elm.postDate }}</span>
</li>
<li class="post-comments">
<a href="#"
><i class="uil uil-comment"></i
>{{ elm.comments }}</a
>
</li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.post-footer -->
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</article>
</SwiperSlide>
</Swiper>
<div class="swiper-controls">
<div class="swiper-navigation">
<div class="swiper-button swiper-button-prev sbp1"></div>
<div class="swiper-button swiper-button-next sbn1"></div>
</div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.container -->
</div>
<!-- /.overflow-hidden -->
<!-- /.container -->
</section>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
import { blogs3 } from "~/data/blogs";
</script>
<style lang="scss" scoped></style>Think unique and be creative. Make a difference with Sandbox.
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox Nuxtjs