Welcome to Lite UI. Test Link
Home
Median Ui 1.5

All Typography and Writing Formats

All Typography and Writing Formats for Plus UI v1.2. All Typography Codes.

Image with Caption

All Style Typography and Format Posts
Caption_here 
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='Image_Alt_Here' src='image_src.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Caption_here</td>
    </tr>
  </tbody>
</table>

Image with Grid Layout

Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations Boating Experience in Pokhara 
<!--[ Grid Image ]-->
<div class='gridImage'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
</div>

Image with Show All Function

Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations
Boating Experience in Pokhara
Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations Boating Experience in Pokhara 
<!--[ Show All Image ]-->
<input class='imageInput hidden' id='for-hideImage' type='checkbox'>
<div class='hideImage'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  
  <div class='buttonImage'>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage' aria-label='Show all image'></label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='showImage'>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    <img alt='Image_Alt_Here' src='image_src.png'/>
  </div>
</div>

Image with Scroll Layout

Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations 
<!--[ Scroll Image ]-->
<div class='scrollImage'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
</div>

Lazyload Image

<img class='lazy' alt='Image_Alt_Here' data-src='image_src.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Manual Related Post

Read also : 
<div class='postRelated'>
  <!--[ Related title ]-->
  <b>Baca juga :</b>

  <ul>
    <li><a href='javascript:;'>Lorem ipsum dolor sit amet consectetur adipiscing</a></li>
    <li><a href='javascript:;'>Proin vestibulum dignissim diam</a></li>
    <li><a href='javascript:;'>Sed suscipit sapien sed turpis ultrices viverra</a></li>
  </ul>
</div>

Post Break

<i class='separate'></i>

Paragraph with Text Indent

<p class='textIndent'>Your_text_here</p>

Paragraph with Drop cap

<p><span class='dropCap'>Y</span>our_text_here</p>

Blockquote

<blockquote>Your_text_here</blockquote>



<blockquote class='style-1'>Your_text_here</blockquote>

Table

 
<div class='table'>
  <table>
    <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>

Syntax Highlighter

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

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

// Tags to add color

<i class='comment'>...</i>			= Grey
<i class='tag'>...</i>					= Red
<i class='blue'>...</i>					= Blue
<span>...</span>								= Green
<span class='block'>...</span>	= Block Blue

<pre class='html'><code>Your_code_here</code></pre>

<pre class='css'><code>Your_CSS_code_here</code></pre>

<pre class='js'><code>Your_JS_code_here</code></pre>

<pre class='link'><code>Your_link_here</code></pre>

<pre><code style='white-space:pre-wrap'>Your_JS_code_here</code></pre>

Show Hide Button

<div class='spoiler'>
  <input class='spoilerInput hidden' id='spoiler-01' type='checkbox' />
  <div class='spoilerTitle'>
    <!--[ Show/hide Title ]-->
    <b>Spoiler: </b>
    <label for='spoiler-01'></label>
  </div>
  
  <!--[ Show/hide content ]-->
  <div class='spoilerContent'>
    <p>Your_content_here</p>
  </div>
</div>

Accordion / Toggle

<!--[ Accordion start ]-->
<ul class='accordion'>
  <!--[ Accordion line 1 ]-->
  <li>
    <div class='accorContent'>
      <input class='accorMenu hidden' id='offaccor-menu1' name='accordion-menu' type='checkbox'/>
      <label class='accorTitle' for='offaccor-menu1'>
        <i class='accorIcon'></i>
        
        <!--[ Question ]-->
        <span>Accordion_first_title</span>
      </label>

      <!--[ Answer ]-->
      <div class='content'>
        <p>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.</p>
        
        <p>Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</p>
      </div>
    </div>
  </li>
  
  <!--[ Accordion line 2 ]-->
  <li>
    <div class='accorContent'>
      <input class='accorMenu hidden' id='offaccor-menu2' name='accordion-menu' type='checkbox'/>
      <label class='accorTitle' for='offaccor-menu2'>
        <i class='accorIcon'></i>
        
        <!--[ Question ]-->
        <span>Accordion_second_title</span>
      </label>

      <!--[ Answer ]-->
      <div class='content'>Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus.</div>
    </div>
  </li>
  
  <!--[ Accordion line 3 ]-->
  <li>
    <div class='accorContent'>
      <input class='accorMenu hidden' id='offaccor-menu3' name='accordion-menu' type='checkbox'/>
      <label class='accorTitle' for='offaccor-menu3'>
        <i class='accorIcon'></i>

        <!--[ Question ]-->
        <span>Accordion_third_title</span>
      </label>

      <!--[ Answer ]-->
      <div class='content'>Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus. Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo.</div>
    </div>
  </li>
</ul>

Note Block

<p class='note'>Yout_text_here</p>

// Another style

<p class='note noteAlert'>Yout_text_here</p>

External Link


<a class='extLink' href='#' rel='noreferrer' target='_blank'>Sample_external_link</a>
<a class='extLink alt' href='#' rel='noreferrer' target='_blank'>Sample_link_alt</a>

Button







<a class='button' href='#'>Standard_button</a>
<a class='button' href='#'><i class='icon download'></i>Download</a>
<a class='button outline' href='#'><i class='icon download'></i>Download</a>
<a class='button' href='#'><i class='icon demo'></i>Demo</a>
<a class='button' href='#'><i class='icon cart'></i>Buy now</a>
<a class='button whatsapp' href='#'><i class='icon whatsapp'></i>Whatsapp me</a>

<div class='buttonInfo'>
  <a class='button' href='#'><i class='icon download'></i>Download</a>
  <a class='button outline' href='#'>Demo</a>
</div>

Download Link

<div class='downloadInfo'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fileType' data-text='zip'></span>
  <div class='fileName'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fileSize'>200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button fileLink' aria-label='Download' href='#'><i class='icon download'></i></a>
</div>

Lazy Youtube

<!--[ Lazy youtube ]-->
<div class='lazyYoutube' data-embed='7tSlCHgDgMA'>
  <div class='playBut'>
    <svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='triangle' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg>
  </div>
</div>

Post Reference

Reference:
www.example.com

<p class='postReference'>Reference:<br> www.example.com</p>

Post a Comment