LayZee UI Typography

Typography's and Writing Format for : LayZee UI Theme
Template Updated on : Jan 1, 2023

Table of Contents

Donation Box

Where do you want to donate?

Bank Transfer Paypal

SBI Bank - Kaily / Account number - 12345xxx

Treat the creator to coffee by giving a small donation. click the arrow icon above

<input id="Kaily-check-dnt" type="checkbox" />
<div class="Kaily-dnt-box">
<label class="Kaily-dnt-sw" for='Kaily-check-dnt'><svg viewbox="0 0 24 24"><g transform="translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)"><path d="M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0"></path></g></svg></label>
<div class="Kaily-dnt-icon"><svg class="Kaily-dnt-svg line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" x2="6" y1="1" y2="4"></line><line x1="10" x2="10" y1="1" y2="4"></line><line x1="14" x2="14" y1="1" y2="4"></line></svg></div>
<div class="Kaily-dnt-hidden">
<h2>Where do you want to donate?</h2> 
<label class="Kaily-dnt-trn">
<svg class="Kaily-dnt-svg line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect height="16" rx="2" ry="2" width="22" x="1" y="4"></rect><line x1="1" x2="23" y1="10" y2="10"></line></svg>
<span>Bank Transfer</span></label>
<input id="Kaily-check-bnk" type="checkbox" />
<a class="Kaily-dnt-pp" href="https://www.paypal.com/paypalme/paykaily" target="_blank">
<svg class="Kaily-dnt-svg" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g><path d="M26.28,9.58A6.64,6.64,0,0,0,19.65,3H10a1,1,0,0,0-1,.84L5.58,25.29a1,1,0,0,0,.23.8,1,1,0,0,0,.76.36H10.7l-.22,1.39a1,1,0,0,0,1,1.16h4.65a1,1,0,0,0,1-.83l1-6.11h3.15a7.46,7.46,0,0,0,7.43-7.45v-.28A5.87,5.87,0,0,0,26.28,9.58ZM10.85,5h8.8a4.64,4.64,0,0,1,4.51,3.61,5.68,5.68,0,0,0-1.32-.15H14.5a1,1,0,0,0-1,.84L12.91,13a1,1,0,0,0,2,.32l.46-2.88h7.49a3.87,3.87,0,0,1,1.4.27,6.47,6.47,0,0,1-6.4,5.69H13.22a1,1,0,0,0-1,.83L11,24.45H7.74Zm15.86,9.61a5.46,5.46,0,0,1-5.43,5.45h-4a1,1,0,0,0-1,.83l-1,6.11H12.64l.22-1.39h0l1.2-7.19h3.78A8.46,8.46,0,0,0,26,12.1a3.82,3.82,0,0,1,.71,2.23Z"></path></g></svg>
<span>Paypal</span></a>
<div class="Kaily-dnt-rk">
SBI Bank - Kaily / Account number - 12345xxx
</div>
</div>
<div class="Kaily-dnt-txt">
    Treat the creator to coffee by giving a small donation. click the arrow icon above
</div>
</div>

Download button (Timer)

Zip

file_name.zip 200kb

https://blogkaily.blogspot.com

<div class="downloadInfo">
    <span class="fileType">Zip</span>
    <div class="fileName">
        <span class="textd">file_name.zip</span>
        <span class="fileSize">200kb</span>
    </div>
    <a aria-label="Download" class="fileLink"><i class="icon download"></i></a>
</div>
<div class="kailyTargetLink">https://blogkaily.blogspot.com</div>

<script>
    //<![CDATA[
    // CountDown Download By Kaily
    var timeLeft = 10; //set the time here
    var downloadBtn = document.querySelector('.fileLink'), countdown = document.querySelector('.textd'); downloadBtn.addEventListener('click', () => { var e = document.querySelector('.kailyTargetLink').innerText, t = setInterval(function () { timeLeft -= 1, countdown.innerHTML = 'Please wait for <span>' + timeLeft + '</span> Seconds.', timeLeft <= 0 && (clearInterval(t), window.location.href = e, setTimeout()) }, 1e3) });
//]]> 
</script>

YouTube Box

Kaily

87 subscriber • 2 video

SUBSCRIBE •••

Please Subscribe to my youtube channel For Awesome Tutorials

<div class="kaily-ytbox-wrap"> <img alt="Kaily" src="https://yt3.ggpht.com/pxeeelYoX_H7rI_hOezl5UykiKZHBx0XKbZdUGw0mkaPd0yF_VhWAePI9jsm0-S0oBU7XvYOlw=s88-c-k-c0x00ffffff-no-rj" />
    <div class="kaily-ytsub-name">Kaily</div>
    <div class="kaily-ytsub-info">87 subscriber • 2 video</div> <a class="kaily-ytsub-sub" href="https://link.kaily.in/youtube" target="_blank">SUBSCRIBE</a> <label class="kaily-ytsub-td">•••</label><input id="kaily-ytsub-check" type="checkbox" />
    <div class="kaily-ytsub-hdn"> <label class="kaily-ytsub-clsbtn"></label>
        <p> Please Subscribe to my youtube channel For Awesome Tutorials</p>
    </div>
</div>

Notes

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

<p class="note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.</p>

Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.

<p class="note wr">Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>

Table of content (Semi-Automatic)

Table of Contents

<details class="sp toc">
  <summary data-hide="Hide all" data-show="Show all">Table of Contents</summary>  
  <div class="toC" id="toContent"></div>
</details>

<!--[ Script to activate ToC ]-->
<script>document.addEventListener('DOMContentLoaded', () =>
  new TableOfContents({
      from: document.querySelector('#postBody'),
      to: document.querySelector('#toContent')
  }).generateToc()
);</script>

Spoiler

Spoiler:

Your_text_is_here.

<details class="sp">
  <summary data-hide="Hide all" data-show="Show all">Spoiler:</summary>
  <p>Your_text_is_here.</p>
</details>

Accordion

Title_is_here

Your_text_is_here.

Title_is_here (alt)

Your_text_is_here.

<!--[ Accordion start ]-->
<div class="showH">
  <!--[ Accordion line 1 ]-->
  <details class="ac">
    <summary>Title_is_here</summary>
    <div class="aC">
      <p>Your_text_is_here.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class="ac alt">
    <summary>Title_is_here (alt)</summary>
    <div class="aC">
      <p>Your_text_is_here.</p>
    </div>
  </details>
</div>

Image with Caption and Auto Lightbox

All images in the article will automatically have a lightbox function except the images in the <figure> tags, try clicking on one of the images in this post.

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_title_here' class='full' src='https://4.bp.blogspot.com/.../name.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Your_caption_is_here</td>
    </tr>
  </tbody>
</table>

Grid Images

<!--[ Grid Image ]-->
    <div class='psImg grImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    </div>

Image with Show All Function

Show All

<!--[ Show All Image ]-->
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  
  <div class='btImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage' aria-label='Show all image'>Show All</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  </div>
</div>

Image with Scroll Layout

<!--[ Scroll Image ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
</div>

Lazyload Images

This feature is useful for increasing PageSpeed score of blog, loading images will be delayed until user scrolls the page to image area.

Also use <noscript> to display the image when user disable javascript on their browser.

<div>
  <img class='lazy' alt='image_title_here' data-src='https://4.bp.blogspot.com/.../name.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/></noscript>
</div>

Manual Related Post

You may want to read this post :

<div class="pRelate">
  <!--[ Related title ]-->
  <b>You may want to read this post :</b>

  <ul>
    <li><a href="#">Your_post_title_here</a></li>
    <li><a href="#">Your_post_title_here</a></li>
    <li><a href="#">Your_post_title_here</a></li>
  </ul>
</div>

Post Break

<hr/>

Paragraph with Text Indent

This feature is used to make the first line of a paragraph indent with a predetermined value. You can also apply it to several other paragraphs.

<p class='pIndent'>Your_paragraph_is_here.</p>

Paragraph with Drop Cap

A large capital letter used as decorative element in the first paragraph, the size is usually two lines or more.

Drop cap will resize the first letter so that it drops one or more lines down. Many types of media print use drop caps such as books, magazines, newspapers and others because they can add visual appeal.

<p><span class='dropCap'>Y</span>our_paragraph_is_here.</p>

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

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</blockquote>

blockquote Style-2

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.

<blockquote class="s-1">
  <div>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. 
    <ul>
      <li>Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.</li>
      <li>Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</li>
    </ul>
  </div>
</blockquote>

Social Blockquote

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.

<div class="kaily_blq" data-author="Kaily"><blockquote class="scBlq">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.</blockquote></div>

Table

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700

white-space:nowrap; specifies the text to be a single line, it will not wrap to the next line and will continue until br tag is encountered
min-width:100%; defines the minimum width of table, you can change it to px for example 500px. Change it to 0 if you want the table width to be determined automatically.

<div class="table">
  <table style="min-width: 100%; white-space: nowrap;">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
      </tr>
    </tbody>
  </table>
</div>

Syntax Highlighter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Change classname html to define another code format, there are 3 options available, namely: html, css, and js.
Value white-space:pre-wrap; useful for disabling side scrolling, long code will be preserved and give a little scrolling function to keep it legible.
max-height:none; defines the maximum height of syntax isn't set (automatic), change the value of none to eg 400px to specify the maximum height of syntax is only 400 pixels.
Use code_here to add red/orage color.
Use code_here to add blue color.
Use code_here to add green color.
Use code_here to add gray color.
Use code_here to add a block of blue color.

<!--[ Change classname to html, css, or js ]-->
<div class='pre html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Multi Tab Syntax Highlighter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://layzeeui.kaily.in/",
  "name": "LayZee UI",
  "alternateName": "LayZee UI",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "layzeeui.kaily.in/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

<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'>
  <!--[ Header/title ]-->
  <div class='preH tbHd scrlH'>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <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_code_is_here</pre>
  </div>
  <div class='preC-2'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-3'>
    <pre>Your_code_is_here</pre>
  </div>
</div>

Multi Functional Syntax Highlighter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<div class="pre kaily_mdb" data-filename="fileName.html" data-type="html">your_pre_content_here</div>

Lazy YouTube Style 1

<!--[ Lazy youtube ]-->
<div class="ytShdw">
<div class="lazyYt" data-embed="[Your_VideoID]">
  <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>
</div>

Lazy YouTube Style 2

<!--[ Lazy youtube ]-->
<div class="lazyYt" data-embed="[Your_VideoID]">
  <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>

External Link

Click here

<a class="extLink" href="#" rel="noreferrer">Click here</a>

Internal Link

Click here

<a class="extLink alt" href="#" rel="noreferrer">Click here</a>

Button Link

Title_link

<a class="button" href="#">Title_link</a>

Or
Title_link

<a class="button ln" href="#">Title_link</a>

2 button in single line

Demo Download

<div class="btnF">
  <a class="button ln" href="#">Demo</a>
  <a class="button" href="#">Download</a>
</div>

Credit line

Credit:
www.kaily.in

<p class="pRef">Credit:<br /> www.kaily.in</p>

Kaily Docs

Kaily Docs

LayZee UI Typography

Donation Box

Where do you want to donate?

Download button (Timer)

YouTube Box

Notes

Table of content (Semi-Automatic)

Spoiler

Accordion

Image with Caption and Auto Lightbox

Grid Images

Image with Show All Function

Image with Scroll Layout

Lazyload Images

Manual Related Post

Post Break

Paragraph with Text Indent

Paragraph with Drop Cap

blockquote Style-1

blockquote Style-2

Social Blockquote

Table

Syntax Highlighter

Multi Tab Syntax Highlighter

Multi Functional Syntax Highlighter

Lazy YouTube Style 1

Lazy YouTube Style 2

External Link

Internal Link

Button Link

2 button in single line

Credit line

Auto Chapter

Post a Comment

Common Errors in LayZee UI theme

Oops! No Internet!