Documentation

Hallo semua, pada halaman ini saya akan membuat dokumentasi tentang semua typography dan tata letak penulisan pada template Median UI V1.5 Jadi bagi kalian yang menggunakan template yang sama mungkin ini akan cukup membantu.

Image with Grid Layout

Writting Code:

<!--[ Grid Image ]-->
<div class='gridImage'>
  <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

Writting Code:

<!--[ Show All Image ]-->
<input class='imageInput hidden' id='for-hideImage' type='checkbox'>
<div class='hideImage'>
  <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='buttonImage'>
    <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='showImage'>
    <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

Writting Code:

<!--[ Scroll Image ]-->
<div class='scrollImage'>
  <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>

Post Break

Writting Code:

<!--[ To break paragraphs apart ]-->
<i class="separate"></i>

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.

Writting Code:

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

Paragraph with Drop cap

This is a paragraph with dropcap. Is a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of the descending limit is usually two or more lines.

Writting Code:

<p><span class='dropCap'>L</span>orem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Id faucibus nisl tincidunt
eget nullam non. Diam vulputate ut pharetra sit amet
aliquam id. Phasellus vestibulum lorem sed risus. </p>

Blockquote

Live as if you were to die tomorrow. Learn as if you were to live forever.
—Mahatma Gandhi

Another Blockquote Style You Can Use:

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.

Writting Code:

<!-- Style 1 -->
<blockquote><i>YOUR-QUOTE<br/><br/>
  &#8212;NAME</i></blockquote>

<!-- Style 2 -->
<blockquote class='style-1 notranslate'>
  <div>YOUR-QUOTE 
    <ul>
      <li>LINE</li>
      <li>LINE</li>
    </ul>
  </div>
</blockquote>

Table

Column_1	Column_2
Data_table_1	00.000.000
Data_table_2	00.000.000
Data_table_3	00.000.000
Data_table_4	00.000.000
Data_table_5	00.000.000

Writting Code:

<div class="table">
 <table style="min-width: 100%; white-space: nowrap;">
 <thead>
 <tr>
 <th>Column_1</th>
 <th>Column_2</th>
 </tr>
 </thead>
 <tbody>
 <tr><td>Data_table_1</td><td>00.000.000</td></tr>
 <tr><td>Data_table_2</td><td>00.000.000</td></tr>
 <tr><td>Data_table_3</td><td>00.000.000</td></tr>
 <tr><td>Data_table_4</td><td>00.000.000</td></tr>
 <tr><td>Data_table_5</td><td>00.000.000</td></tr>
 </tbody>
 </table>
 </div>

Syntax Highlighter

<!--[ Change html to css, js or any language ]-->
<pre class='html'>
  <code>Your_code_is_here</code>
</pre>

Manual Related Post

Related Post :

Writting Code:

<div class='postRelated'>
  <!--[ Related title ]-->
  <b>Related 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>