All Style and Typography for Lantro UI v2.0

Lantro UI v2.0 brings a complete collection of modern styles and typography elements designed to enhance your Blogger website with a clean, professional, and responsive user interface. From beautifully structured lists and alert notes to advanced blockquotes and interactive components, this guide covers everything you need to build visually appealing and highly readable content.

Whether you're a beginner or an experienced creator, Lantro UI helps you create stunning posts without complex coding. In this article, you'll explore all available styles, learn how to use them effectively, and understand how they can improve user experience, readability, and overall SEO performance.

🦥 Lazy Image

<div class="separator"><img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" class="lantro-lazy" alt="alt_here" data-src="image_url_here"/></div>

Not recommend to use in post thumbnail or featured image.

📸 Image with Caption (Auto Lightbox)

Click the image – lightbox works automatically (unless inside <figure>).

Your caption goes here. Lightbox works on click.

<table class='tr-caption-container'>
    <tbody><tr><td><img alt="alt_here" class="fullImg" src="Image_URL"/></td></tr>
    <tr><td class='tr-caption'>Your caption goes here. Lightbox works on click.</td></tr>
    </tbody>
</table>

🖼️ Image Grid Layout

<div class='psImg grImg'>
    <img alt="Grid 1" class="lantro-lazy" data-src="image_url_here" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
    <img alt="Grid 2" class="lantro-lazy" data-src="image_url_here" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
</div>

🔓 Show All – Hidden images revealed by button

Show All

<input class='inImg hidden' id='for-hideImageDemo' type='checkbox'>
<div class='psImg hdImg'>
  <img alt="visible 1" class="lantro-lazy" data-src="image_url_here" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
  <div class='btImg'>
    <img alt="button image" class="lantro-lazy" data-src="image_url_here" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
    <label for='for-hideImageDemo' aria-label='Show all image'>Show All</label>
  </div>
  <div class='psImg shImg'>
    <img alt="hidden 1" class="lantro-lazy" data-src="image_url_here" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
  </div>
</div>

📱 Scroll Layout – horizontal swipe on mobile

<div class='psImg scImg scrlH'>
    <img alt="scroll 1" class="lantro-lazy" data-src="image_url_here" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
    <img alt="scroll 2" class="lantro-lazy" data-src="image_url_here" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
</div>

You may like :

<div class='pRelate notranslate'>
  <b>You may like :</b>
  <ul>
    <li><a href="URL">Title</a></li>
  </ul>
</div>

💬 Blockquote & Special Quotes

The sample blockquote for showing demo to you!

—Coshix

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.

<!-- Style 1 -->
  <blockquote><i>The sample blockquote for showing demo to you!<br/><br/>—Coshix</i></blockquote>
  
  <!-- Style 2 -->
<blockquote class='s-1 notranslate'>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.</div>
</blockquote>

✨ Mark Tag – Highlight & Decorate Text

Your theme supports these <mark> variants. Use them to highlight, underline, blink, or add stylish backgrounds.

Yellow highlight Green success Red warning Blue info Purple rounded Underline orange Double underline blue Blinking effect Shiny metallic Tag style Custom data-text prefix

<mark class='y'>your_text_here</mark> 
<mark class='g'>your_text_here</mark> 
<mark class='r'>your_text_here</mark> 
<mark class='b'>your_text_here</mark> 
<mark class='p'>your_text_here</mark> 
<mark class='u'>your_text_here</mark> 
<mark class='u2'>your_text_here</mark> 
<mark class='blink'>your_text_here</mark> 
<mark class='shine'>your_text_here</mark> 
<mark class='t'>your_text_here</mark> 
<mark data-text='your_text_here'>your_text_here</mark>

Use data-text='your_text_here'> for showing label near mark tag.

Using mark tag in codebox disables code auto highlighting to avoid parse errors.

📑 Manual Table of Contents

Contents

Image with Caption
Image Grid Layout
Show All Function
Scroll Layout
Manual Related Post
Blockquote
Mark Tag Reference
Manual ToC
Semi Automatic ToC
Syntax Highlighter
MultiTabs Syntax
Accordion / Toggle
Note Block
Buttons & Icons
Download Link
Lazy YouTube

<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Contents</summary>  
  <div class='toC'>
    <ol>
      <li><a href="#heading-id">Title</a></li>
    </ol>
  </div>
</details>

Don't forget to add id='your_id_here'in your headings also.

🤖 Semi Automatic Table of Contents

Table of Contents

<details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='toContent'></div>
</details>
<!-- Script at the bottom of post activates this -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
      if (typeof TableOfContents !== 'undefined') {
        new TableOfContents({
          from: document.querySelector('#postBody'),
          to: document.querySelector('#toContent')
        }).generateToc();
      }
    });
  </script>

To keep table of content open add open='' in opening details tag eg: <details class='sp toc' open=''>

💻 Syntax Highlighter

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

<div class='pre'>
  <pre><code>...your code...</code></pre>
</div>

If auto detection show wrong language name then add data-comment='your_language' in opening pre tag <pre data-comment='html'>

📚 MultiTabs Syntax Highlighter

<div>HTML content</div>

body { margin:0; }

console.log('JS');

<div class='pre tb'>
  <input class='prei hidden' id='tab1' type='radio' name='tabs' checked>
  <input class='prei hidden' id='tab2' type='radio' name='tabs'>
  <div class='preH tbHd scrlH'>
    <label for='tab1' data-text='HTML'></label>
    <label for='tab2' data-text='CSS'></label>
  </div>
  <div class='preC-1'><pre><code>...</code></pre></div>
  <div class='preC-2'><pre><code>...</code></pre></div>
</div>

🎛️ Accordion / Toggle Menu

Accordion first title

Content here...

Accordion second title

🎛️ FAQ in Microdata

Title_here

text_here

Title_here

text_here

Title_here

text_here

Title_here

text_here

<div class='showH' itemscope itemtype='https://schema.org/FAQPage'>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
</div>

📝 Note Block

Info! A simple info alert - Lorem ipsum dolor sit amet.

Warning! A simple warning alert - Lorem ipsum dolor sit amet.

Error! Something went wrong.

Success! Task completed.

Tip! Try this shortcut.

Info! Outlined version.

Warning! Outlined version.

Error! Outlined version.

Success! Outlined version.

Tip! Outlined version.

<div class="note note-info"><b>Info!</b> A simple info alert - Lorem ipsum dolor sit amet.</div>
<div class="note note-warning"><b>Warning!</b> A simple warning alert - Lorem ipsum dolor sit amet.</div>
<div class="note note-error"><b>Error!</b> Something went wrong.</div>
<div class="note note-success"><b>Success!</b> Task completed.</div>
<div class="note note-tip"><b>Tip!</b> Try this shortcut.</div>

<div class="note note-outline note-info"><b>Info!</b> Outlined version.</div>
<div class="note note-outline note-warning"><b>Warning!</b> Outlined version.</div>
<div class="note note-outline note-error"><b>Error!</b> Outlined version.</div>
<div class="note note-outline note-success"><b>Success!</b> Outlined version.</div>
<div class="note note-outline note-tip"><b>Tip!</b> Outlined version.</div>

🔘 Buttons & Icons

Standard button Download Demo

Demo Download

<a class="button" href="javascript:;">Standard button</a>
<a class="button ln" href="javascript:;"><i class='icon dl'></i>Download</a>
<a class="button" href="javascript:;"><i class='icon demo'></i>Demo</a>

<div class='btnF'>
  <a class="button ln" href="javascript:;">Demo</a>
  <a class="button" href="javascript:;"><i class='icon dl'></i>Download</a>
</div>

⬇️ Download Link Box

file_name.zip200kb

<div class='dlBox'>
  <span class='fT' data-text='file_format'></span>
  <div class='fN'>
    <span>file_name</span>
    200kb
  </div>
  <a aria-label="Download" class="button" href="DOWNLOAD_URL">
    <i class='icon dl'></i>
  </a>
</div>

🕛 Timer Version

index.html 0 KB

<div class="dlBox tmr" data-sec="12">
<span class="fT" data-text="file_format"></span>
    <div class="fN">
      <span>file_name</span>
      <span>0 KB</span>
    </div>
    <a class="button" href="DOWNLOAD_URL" data-filename="file_name">
      <i class='icon dl'></i>
    </a>
  </div>
  
  <!-- Open in new tab -->
  <div class="dlBox tmr" data-sec="12">
<span class="fT" data-text="file_format"></span>
    <div class="fN">
      <span>file_name</span>
      <span>0 KB</span>
    </div>
    <a class="button" href="DOWNLOAD_URL" data-filename="file_name" target="_blank">
      <i class="icon dl"></i>
    </a>
  </div>
  
 <!-- Activation script (Required) --> 
 <script>!function(){document.addEventListener("click",function(e){var b=e.target.closest(".button");if(!b)return;var x=b.closest(".dlBox");if(!x||!x.classList.contains("tmr")||x._t)return;var s=parseInt(x.getAttribute("data-sec"),10);if(isNaN(s)||s<1)s=5;var h=b.getAttribute("href");if(!h||h==="#")return;e.preventDefault();e.stopPropagation();x._t=1;b.style.pointerEvents="none";var o=b.innerHTML,sp=document.createElement("span");sp.className="timer-digits";b.textContent="";b.appendChild(sp);b.classList.add("timer-active");var r=s;sp.textContent=r+"s";var i=setInterval(function(){r--;if(r<=0){clearInterval(i);b.innerHTML=o;b.classList.remove("timer-active");b.style.pointerEvents="auto";x._t=0;b.getAttribute("target")==="_blank"?window.open(h,"_blank"):location.href=h}else sp.textContent=r+"s"},1000)})}();</script>

🎬 Lazy YouTube & Iframe

<!-- Lazy YouTube (Modern) -->
<div class='lantro-lazyYt' data-embed='VIDEO_ID'>
  <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 iframe -->
<div class='videoYt'>
  <iframe class='lantro-lazy' data-src='//youtube.com/embed/your_video_id' allowfullscreen></iframe>
</div>

📊 Responsive Table (scroll on mobile)

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>

🔗 External Links

Your_link_name
Your_link_name

<!--[ External link ]-->
<a href='link_here' class='extL'>link_name</a>

<!--[ External link (open in new tab) ]-->
<a href='link_here' class='extL' target='_blank'>link_name</a>

Paragraph with Dropcap

orem 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.

<!--[ DropCap ]-->
<div class='dropCap'>L</div>

Paragraph with Text Indent

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.

<!--[ Text Indent ]-->
<p class='pIndent'>text_comes_here</p>

📋 Styled Lists

Install the theme and upload it to your Blogger dashboard.
Customize colors, fonts, and layout settings.
Start creating content using the typography elements.

Pros

Modern and clean UI
Fully responsive design
Easy customization

Cons

Requires basic HTML knowledge
Advanced features need setup

<!--- Chain style list -->
<ul class="steps">
  <li><span>Install the theme and upload it to your Blogger dashboard.</span></li>
  <li><span>Customize colors, fonts, and layout settings.</span></li>
  <li><span>Start creating content using the typography elements.</span></li>
</ul>

<!-- Pros and cons style -->
<h3>Pros</h3>
<ul class="pros">
  <li>Modern and clean UI</li>
  <li>Fully responsive design</li>
  <li>Easy customization</li>
</ul>

<h3>Cons</h3>
<ul class="cons">
  <li>Requires basic HTML knowledge</li>
  <li>Advanced features need setup</li>
</ul>

Spoiler

Spoiler:

You special text comes here

<!--[ Spoiler ]-->
<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Post Break

<hr/>

Post Reference

Reference:
www.coshix.in

<!--[ Reference ]-->
<p class="pRef">Reference:<br> www.example.com</p>

5 تعليقات

Coshix 4/12/2026 11:33:00 م

dummy comment
Coshix 4/12/2026 11:39:00 م

comment 2
1. Coshix 4/12/2026 11:49:00 م
  
  comment
2. Coshix 4/13/2026 12:34:00 ص
  
  Another reply comment
Coshix 4/13/2026 12:34:00 ص

The third comment

Don't put spam comments in the comment box. All comments are reviewed by the admin.

Color Mode

Accent Color

Color Palette

Background Pattern

Suggestions

All Style and Typography for Lantro UI v2.0

🦥 Lazy Image

📸 Image with Caption (Auto Lightbox)

🖼️ Image Grid Layout

🔓 Show All – Hidden images revealed by button

📱 Scroll Layout – horizontal swipe on mobile

🔗 Manual Related Posts

💬 Blockquote & Special Quotes

✨ Mark Tag – Highlight & Decorate Text

📑 Manual Table of Contents

🤖 Semi Automatic Table of Contents

💻 Syntax Highlighter

📚 MultiTabs Syntax Highlighter

🎛️ Accordion / Toggle Menu

🎛️ FAQ in Microdata

📝 Note Block

🔘 Buttons & Icons

⬇️ Download Link Box

🕛 Timer Version

🎬 Lazy YouTube & Iframe

📊 Responsive Table (scroll on mobile)

🔗 External Links

Paragraph with Dropcap

Paragraph with Text Indent

📋 Styled Lists

Pros

Cons

Spoiler

Post Break

Post Reference

5 تعليقات