All Typography And Writing Formats For Median Ui

Note
Below given codes for typography can be used in Writedroid website and median Ui template

Image with grid layout

https://1.bp.blogspot.com/-vFEJV8v5Bms/X1WnI01Q71I/AAAAAAAAP5w/do4OYrEPQBAcceIkM2sq9fcQbnhca9nOQCNcBGAsYHQ/s0/travel-boating-experience.jpg

<!--[ 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>

Lazyload image

You can use this code if you want delay loading speed of uploaded image so that the blog's pagespeed is higher

<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>Read also :</b>

  <ul>
    <li><a href="Link_here">How to add presenantion frame in your website</a></li>
    <li><a href="Link_here">How to add material desing box in website</a></li>
    <li><a href="Link_here">How to add click ripple effect in website</a></li>
  </ul>
</div>

To use this code just replace your link with Link_here with your link and replace the titles with that title which you want to use.

Post break

<i class='seperate'></i>

Paragraph with text indent

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

This above given code for seperating and paragraph with text indent may work only in old version of median ui, Imagz and fletrp pro.

Paragraph with drop cap

Hi there, Welcome to Writedroid. Please share our website with your family members and reltaives. With your support we can elliminate all problems.

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

Blockquote

Hi there, Welcome to Writedroid. Please share our website with your family members and reltaives. With your support we can elliminate all problems.

<blockquote>Your_text_here</blockquote>

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

Just replace your text with Your_text_here to use this code or Blackquote. Second one code for Blackquote is not working on median ui v1.6.

Table

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

To write HTML, CSS or JAVA code in post

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

Writing Syntax for CSS

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

Writing Syntax for JAVA

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

Writing Syntax for Link

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

Writing Syntax to deactivate scrolling function

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

Show hide button

Spoiler:

Your_content_here

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

Note block

Yout_text_here

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

Yout_text_here

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

Buttons

Standard button

Standard_button

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

Download button

Download

<a class="button In" href="#"><i class="icon dl"></i>Download</a>

Demo button

Demo

<a class='button' href='#'><i class='icon demo'></i>Demo</a>

Two button in one bar

Demo Download

<div class='btnF'>
  <a class='button ln' href='#'>Demo</a>
  <a class='button' href='#'><i class='icon dl'></i>Download</a>

Download button with file size and name

file_name.zip 200kb

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

Just replace the link with # to add link in buttons.

[ Source Code by Jagodesian ]

Below is the additional code which is added manually by Writedroid. If you want to use this below codes then visit Flamingo tezh.

Material box

You can use material designs box mainly for lable/to display your products/to write description and etc.

Get codes

Click on above button to get codes of material design box.

Custom pink list

Your_text_here
Your_text_here
Your_text_here
Your_text_here
Your_text_here

<ol class="style1">
<li>Your_text_here</li>
<li>Your_text_here</li>
<li>Your_text_here</li>
<li>Your_text_here</li>
<style>
/* Custom List Numbering*/
ol.style1 {
counter-reset:numbers;
list-style:none;
padding:0;
}
ol.style1 > li {
counter-increment:numbers;
margin-bottom:25px;
position:relative;
margin-left:55px;
}
ol.style1 > li img {
margin:15px 0;
width:100%;
display:block;
}
ol.style1 > li #box-download img {
margin:0;}
ol.style1 > li::before {
content: counter(numbers);
line-height: 23px;
font-family: 'Noto Sans',sans-serif;
font-size: 14px;
font-weight: 700;
left: -45px;
width: 32px;
height: 32px;
text-align: center;
position: absolute;
color: #9c27b0;
border: 5px solid rgba(116,103,251,.17);
border-radius: 50px;
top: -2px;
}
ol.standard li, ol.style2 li, ol.style0 li, ol.style1 li ul li {
margin-bottom:15px;
}
ol.style1 li ul {
margin-top:15px;
}
.dark-mode ol.style1 > li::before {
color:rgb(80, 103, 197);
border-color:rgba(57, 60, 155, 0.3);
}
</style>

More codes for typography has been coming soon

[ Source Code by Flamingo tezh ]

ThemeSilk

Search Suggest