Sandbox Jekyll documentation
Blog
Copy any custom block snippet below and paste it on your page to build your website easily.
Example 1
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<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">{{ page.blog1.description }}</p>
<div class="swiper-container blog grid-view mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
{% for post in site.posts limit:3 %}
<div class="swiper-slide">
<article>
<figure class="overlay overlay-1 hover-scale rounded mb-5">
<a href="{{ post.url }}">
<img src="{{ post.image }}" alt="{{ post.title }}" />
</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="/category/{{ post.category | slugify }}" class="hover" rel="category">{{ post.category }}</a>
</div>
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="{{ post.url }}">{{ post.title }}</a></h2>
</div>
<div class="post-footer">
<ul class="post-meta">
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>{{ post.date | date: "%d %b %Y" }}</span></li>
<li class="post-comments"><a href="{{ post.url }}#comments"><i class="uil uil-comment"></i>{{ post.comments | default: 0 }}</a></li>
</ul>
</div>
</article>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section># Blog Section 1
blog1:
enable: true
title: "Our Journal"
description: "Here are the latest company news from our blog that got the most attention."Example 2
<!-- Your converted HTML code here --> # Blog Section 2
blog2:
enable: true
title: "Our Journal"
description: "Here are the latest news from our blog that got the most attention."
button_text: "View All News"
button_url: "/blog"Example 3
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row">
<div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto">
<h2 class="display-4 mb-3 text-center">Latest News</h2>
<p class="lead fs-lg mb-10 text-center">{{ page.blog3.description }}</p>
</div>
</div>
<div class="swiper-container blog grid-view mb-10" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
{% for post in site.posts limit:6 %}
<div class="swiper-slide">
<article>
<figure class="overlay overlay-1 hover-scale rounded mb-6">
<a href="{{ post.url }}">
<img src="{{ post.featured_image }}" alt="{{ post.title }}" />
</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="/category/{{ post.category | slugify }}" class="hover" rel="category">{{ post.category }}</a>
</div>
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="{{ post.url }}">{{ post.title }}</a></h2>
</div>
<div class="post-footer">
<ul class="post-meta">
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>{{ post.date | date: "%d %b %Y" }}</span></li>
<li class="post-comments"><a href="{{ post.url }}#comments"><i class="uil uil-comment"></i>{{ post.comments | default: 0 }}</a></li>
</ul>
</div>
</article>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section># Blog Section 3
blog3:
enable: true
title: "Latest News"
description: "Here are the latest company news from our blog that got the most attention."Example 4
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<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">{{ page.blog4.title }}</h2>
</div>
<div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">
<a href="{{ page.blog4.button_url }}" class="btn btn-soft-primary rounded-pill mb-0">{{ page.blog4.button_text }}</a>
</div>
</div>
<div class="row gx-lg-8 gx-xl-11 gy-10 blog grid-view">
<div class="col-lg-8">
{% assign featured_post = site.posts.first %}
<article class="post">
{% if featured_post.images %}
<div class="post-slider rounded mb-6">
<div class="swiper-container dots-over" data-margin="5" data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
{% for image in featured_post.images %}
<div class="swiper-slide"><img src="{{ image }}" alt="" /></div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}
<div class="post-header mb-5">
<div class="post-category text-line">
<a href="/category/{{ featured_post.category | slugify }}" class="hover" rel="category">{{ featured_post.category }}</a>
</div>
<h2 class="post-title mt-1 mb-4"><a class="link-dark" href="{{ featured_post.url }}">{{ featured_post.title }}</a></h2>
<ul class="post-meta mb-0">
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>{{ featured_post.date | date: "%d %b %Y" }}</span></li>
<li class="post-author"><a href="#"><i class="uil uil-user"></i><span>By {{ featured_post.author | default: site.author }}</span></a></li>
<li class="post-comments"><a href="{{ featured_post.url }}#comments"><i class="uil uil-comment"></i>{{ featured_post.comments | default: 0 }}<span> Comments</span></a></li>
</ul>
</div>
<div class="post-content">
<p>{{ featured_post.excerpt }}</p>
</div>
</article>
</div>
<div class="col-lg-4">
<div class="row gy-10">
{% for post in site.posts offset:1 limit:2 %}
<div class="col-md-6 col-lg-12">
<article class="post">
<figure class="overlay overlay-1 hover-scale rounded mb-5">
<a href="{{ post.url }}">
<img src="{{ post.featured_image }}" alt="{{ post.title }}" />
</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="/category/{{ post.category | slugify }}" class="hover" rel="category">{{ post.category }}</a>
</div>
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="{{ post.url }}">{{ post.title }}</a></h2>
</div>
<div class="post-footer">
<ul class="post-meta">
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>{{ post.date | date: "%d %b %Y" }}</span></li>
<li class="post-comments"><a href="{{ post.url }}#comments"><i class="uil uil-comment"></i>{{ post.comments | default: 0 }}</a></li>
</ul>
</div>
</article>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section># Blog Section 4
blog4:
enable: true
title: "Company News"
description: "Company news from our blog that got the most attention."
button_text: "View All News"
button_url: "#"Example 5
<section class="wrapper bg-light">
<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">{{ page.blog5.description }}</h2>
</div>
</div>
<div class="swiper-container nav-bottom nav-color mb-14" data-margin="30" data-dots="false" data-nav="true" data-items-lg="3" data-items-md="2" data-items-xs="1">
<div class="swiper overflow-visible pb-2">
<div class="swiper-wrapper">
{% for post in site.posts limit:6 %}
<div class="swiper-slide">
<article>
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1">
<a href="{{ post.url }}">
<img src="{{ post.featured_image }}" alt="{{ post.title }}" />
</a>
<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="/category/{{ post.category | slugify }}" class="hover" rel="category">{{ post.category }}</a>
</div>
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="{{ post.url }}">{{ post.title }}</a></h2>
</div>
<div class="post-footer">
<ul class="post-meta d-flex mb-0">
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>{{ post.date | date: "%d %b %Y" }}</span></li>
<li class="post-comments"><a href="{{ post.url }}#comments"><i class="uil uil-comment"></i>{{ post.comments | default: 0 }}</a></li>
</ul>
</div>
</div>
</div>
</article>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</section> # Blog Section 5
blog5:
enable: true
title: "Latest Blog Posts"
description: "Here are the latest posts from my blog that grabbed the most attention."Sign In
Please enter your credentials to continue.
Password
Sign In
Don’t have an account? Sign up
or
Create Account
Create your account to get started.
Name
Password
Confirm Password
Create Account
Already have an account? Sign in
or