Lazy Image
Loads images lazily to improve website performance
<img class='lantro-lazy' alt='your_img_alt_here' data-src='your_img_src_here'/> <noscript><img alt='your_img_alt_here' src='your_img_src_here'/></noscript> </div>
Image With Caption
It applies a neobrutalism design and add image with caption
|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
<table class='tr-caption-container'>
<tbody>
<tr>
<td>
<img alt="your_img_alt_here" class="fullImg" src="your_img_src_here"/>
</td>
</tr>
<tr>
<td class='tr-caption'>Your Caption goes here</td>
</tr>
</tbody>
</table>Grid Images
It show collection of images in a grid view layout.
<!--[ Grid Image ]--> <div class='imgPs'> <!--[ Image 1 ]--> <img alt="your_img_alt_here" class="lantro-lazy" data-src="your_img_src_here" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/> <!--[ Image 2 ]--> <img alt="your_img_alt_here" class="lantro-lazy" data-src="your_img_src_here" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/> <!--[ Image 3 ]--> <img alt="your_img_alt_here" class="lantro-lazy" data-src="your_img_src_here" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/> <!--[ Image 4 ]--> <img alt="your_img_alt_here" class="lantro-lazy" data-src="your_img_src_here" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/> </div>
List Images With Show All Button
This is similar to grid image function but you can hide some images here
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='imgPs hdImg'>
<img alt="your_img_alt_here" class="lantro-lazy"
data-src="your_img_src_here"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
<img alt="your_img_alt_here" class="lantro-lazy"
data-src="your_img_src_here"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
<img alt="your_img_alt_here" class="lantro-lazy"
data-src="your_img_src_here"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
<div class='imgBt'>
<img alt="your_img_alt_here" class="lantro-lazy"
data-src="your_img_src_here"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
<label for='for-hideImage' aria-label='Show all image'>Show All</label>
</div>
<div class='imgPs shImg'>
<img alt="your_img_alt_here" class="lantro-lazy"
data-src="your_img_src_here"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
<img alt="your_img_alt_here" class="lantro-lazy"
data-src="your_img_src_here"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
<img alt="your_img_alt_here" class="lantro-lazy"
data-src="your_img_src_here"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
<img alt="your_img_alt_here" class="lantro-lazy"
data-src="your_img_src_here"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
</div>
</div>Live Syntax
This allows you to add a live preview of your code to your website without the help of third-party libraries
Live Preview
<div class="lantro-codebox"><div class="lc-header"><div class="lc-tabs"><button class="active" data-tab="html">HTML</button><button data-tab="css">CSS</button><button data-tab="js">JS</button></div><div class="lc-actions"><button class="lc-full">⛶</button><button class="lc-run">▶ Preview</button></div></div>
<div class="lc-editors">
<!--[ Tab 1 ]-->
<textarea data-code="html">your HTML code here</textarea>
<!--[ Tab 2 ]-->
<textarea data-code="css">your CSS here</textarea>
<!--[ Tab 3 ]-->
<textarea data-code="js">your JS here</textarea>
<!--[ Preview ]-->
</div><div class="lc-previewWrap"><iframe class="lc-preview"></iframe></div></div><div class="lc-modal"><div class="lc-modalBar"><span>Live Preview</span><button class="lc-close">✕</button></div><iframe class="lc-modalFrame"></iframe></div>
<!--[ JS Activation ]-->
<script>setTimeout(function(){window.lantroCodeBoxInit&&window.lantroCodeBoxInit()},200);</script>You don't need to escape the code, you can directly paste your code here.
Normal Codebox
Here you can highlight the codes that your are going to share.
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
<div class='pre'><pre>Your_escaped_code_here</pre></div>
If you want to highlight something in codebox use <span class='block'>your_code_here</span>
Multi Tab Code Box
Using this codebox you can share multiple codes in your website.
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
/* Trial CSS */body{
background: #fff;
color: #000;
}
alert( 'Hello, world!' );
<div class='pre tb'>
<!--[ Active function ]-->
<input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
<input class='prei hidden' id='preT-2' type='radio' name='preTab'>
<input class='prei hidden' id='preT-3' type='radio' name='preTab'>
<!--[ Codebox Header ]-->
<div class='preH tbHd scrlH'>
<label for='preT-1' data-text='HTML'></label>
<label for='preT-2' data-text='CSS'></label>
<label for='preT-3' data-text='JS'></label>
</div>
<!--[ Content ]-->
<div class='preC-1'>
<pre>your_escaped_code_here</pre>
</div>
<div class='preC-2'>
<pre>your_escaped_code_here</pre>
</div>
<div class='preC-3'>
<pre>your_escaped_code_here</pre>
</div>
</div>Highlight Code On Text
By using this you can highlight code part in your website<div class='lantro'>Lantro UI</div> like this.
<code>your_code_here</code>
TOC
This will help you to add automatic table of content in your website.
Table of Content
<details class='sp toc'>
<summary data-show='Show all' data-hide='Hide all'>Table of Content</summary>
<div class='toC' id='toContent'></div>
</details>
<!--[ Activation JS ]-->
<script>document.addEventListener('DOMContentLoaded', () =>
new TableOfContents({
from: document.querySelector('#postBody'),
to: document.querySelector('#toContent')
}).generateToc()
);</script>Related Posts (Manual)
Using this you can add related posts manually in your posts
<div class='postR'>
<ul>
<li><a href="link_here">Post 1 title here</a></li>
<li><a href="link_here">Post 2 title here</a></li>
<li><a href="link_here">Post 3 title here</a></li>
</ul>
</div>Post Break
It help you to add break bar in your post, its common in most of the HTML based theme.
<hr/>
Paragraph Drop Cap
This will help you to add drop cap to your pragraph.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien lacus, ullamcorper a scelerisque vel, venenatis at leo. Sed sit amet dapibus ligula, sit amet dignissim massa.
<span class='dropCap'>Your_Letter_here</span>
Blockquote
It help you to add blockquote in your website.
Style 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
- Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.
- Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.
Style 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.
—commodo et.
Table
This will help you to add table in your post.
| No | Column_1 | Column_2 | Column_3 | Column_4 | Column_5 |
|---|---|---|---|---|---|
| 1 | Data_table_1 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
| 2 | Data_table_2 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
| 3 | Data_table_3 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
| 4 | Data_table_4 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
<div class='table'>
<table style='white-space: nowrap;'>
<thead>
<tr>
<th>No</th>
<th>Column_1</th>
<th>Column_2</th>
<th>Column_3</th>
<th>Column_4</th>
<th>Column_5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Data_table_1</td>
<td>00.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
</tr>
<tr>
<td>2</td>
<td>Data_table_2</td>
<td>00.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
</tr>
<tr>
<td>3</td>
<td>Data_table_3</td>
<td>00.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
</tr>
<tr>
<td>4</td>
<td>Data_table_4</td>
<td>00.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
</tr>
</tbody>
</table>
</div>Note Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Warning note style example for important message.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is an info note for additional details.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Success message example shown here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pro tip for better understanding content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Download instruction note example.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Updated content notification note.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Frequently asked question note block.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Highlighted featured note content.
<!--[ Default Note ]--> <div class="note"> Your text here </div> <!--[ Warning Note ]--> <div class="note wr"> Your text here </div> <!--[ Info Note ]--> <div class="note inf"> Your text here </div> <!--[ Success Note ]--> <div class="note suc"> Your text here </div> <!--[ Tip Note ]--> <div class="note tip"> Your text here </div> <!--[ Download Note ]--> <div class="note dl"> Your text here </div> <!--[ Update Note ]--> <div class="note up"> Your text here </div> <!--[ Question Note ]--> <div class="note q"> Your text here </div> <!--[ Highlight Note ]--> <div class="note star"> Your text here </div>
Block With View / Hide Button
This will help you to add text with view / hide button.
Message:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien lacus, ullamcorper a scelerisque vel, venenatis at leo.
<details class='sp'> <summary data-show='View all' data-hide='Hide all'>Message:</summary> <p>Your_text_here</p> </details>
Accordion
Using this you can accordion to your post where you can add content like FAQ.
Accordion_first_title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion_second_title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion_third_title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion_fourth_title (alt)
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
<!--[ Accordion Wrapper ]-->
<div class='showH'>
<!--[ Accordion line 1 ]-->
<details class='accdin'>
<summary>Accordion title here</summary>
<div class='accDin'>
Your content here
</div>
</details>
<!--[ Accordion line 2 ]-->
<details class='accdin'>
<summary>Accordion title here</summary>
<div class='accDin'>
Your content here
</div>
</details>
<!--[ Accordion line 3 ]-->
<details class='accdin'>
<summary>Accordion title here</summary>
<div class='accDin'>
Your content here
</div>
</details>
<!--[ Accordion alt style ]-->
<details class='accdin alt'>
<summary>Accordion title here (alt)</summary>
<div class='accDin'>
Your content here
</div>
</details>
</div>
Buttons
Here are different kind of buttons that you can use in your website post.
<!--[ Button Group ]-->
<div class="btnF">
<!--[ Normal Button ]-->
<a class="button" href="#">
Normal button text
</a>
<!--[ Outline Button ]-->
<a class="button ln" href="#">
Outline button text
</a>
<!--[ Download Button ]-->
<a class="button" href="#">
<span class="icon dl"></span>
Download now
</a>
<!--[ Demo Button ]-->
<a class="button ln" href="#">
<span class="icon demo"></span>
Live demo
</a>
</div>
<!--[ Download Box ]-->
<div class="dlBox">
<div class="fT" data-text="ZIP"></div>
<div class="fN">
<span class="fNn">File name here</span>
<span class="fS">File size here</span>
</div>
<a class="button" href="#">
<span class="icon dl"></span>
Download
</a>
</div>
<!--[ Primary Button ]--> <button class="btn-primary"> Primary button </button> <!--[ Inverse Button ]--> <button class="btn-inverse"> Inverse button </button> <!--[ Icon Button ]--> <button class="btn-primary btn-icon"> <span class="icon dl"></span> Icon button </button>
External Link
Using this you can add styled external link in your website.
<!--[ External Link ]--> <a class='extL' href='#'> Your text here </a> <!--[ External Link (open in new tab) ]--> <a class='extL' href='#' target='_blank' rel='noopener noreferrer'> Your text here </a>
Lazy YouTube
Using this you get theme based styled YouTube lazy load which also help to improve website performance.
<div class='ytLazy' data-embed='yt_video_id_here'>
<div class='play'>
<svg viewbox='0 0 213.7 213.7'>
<polygon class='t' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon>
<circle class='c' cx='106.8' cy='106.8' r='103.3'></circle>
</svg>
</div>
</div>Lazy YouTube (iframe)
Uses lazy load in iframe
<div class='videoYt'>
<iframe
title='Lazy Iframe'
class='lantro-lazy'
data-src='//www.youtube.com/embed/YOUR_VIDEO_ID_HERE'
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
allowfullscreen>
</iframe>
</div>
Post Reference
If you want to mention anyone or want to give reference then you can use this for it.
Reference:
www.teorzo.xyz
<p class='pRef'>Reference:<br> www.example.com</p>