Median UI All Typography Template Features: Median UI All Features
Compose mode
This paragraph is standard with the <p> tag of this template with no additional indents, the font size and line-height have been set to make the text easier to read.
The quote text paragraph will appear like this with a different text color than a regular paragraph
- First list
- Second list
- Third list
- Fourth List
- First list
- Second list
- Third list
- Fourth List
No. | City name | Total population | Ages 19-25 | Age 25-40 | Age> 40 |
---|---|---|---|---|---|
1 | Kolkata | 10,023,211 | 5,000,223 | 2,500,332 | 2,499,232 |
2 | Mumbai | 10,023,211 | 5,000,223 | 2,500,332 | 2,499,232 |
3 | Delhi | 10,023,211 | 5,000,223 | 2,500,332 | 2,499,232 |
4 | Chennai | 10,023,211 | 5,000,223 | 2,500,332 | 2,499,232 |
<div class='table'>
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>City</td>
<td>Kolkata</td>
</tr>
<tr>
<td>2</td>
<td>City</td>
<td>Mumbai</td>
</tr>
<tr>
<td>3</td>
<td>City</td>
<td>Delhi</td>
</tr>
</tbody>
</table>
</div>
The additional format that can only be used in HTML mode
// To use Syntax Highlighter the writing is like this
<pre>
<code>
<!-- html code, css ata javascript here -->
</code>
</pre>
// Additional syntax features you can use when writing code
<i>Comment</i> = The code in this tag will not automatically be highlighted
<i class='comment'>Comment</i> = <!-- html, css or javascript code here -->
<i class='tag'>div</i> = <div>
<span>CSS Property</span> = main{display: block;position: relative}
<span class='block'>Block Text</span> = Used to highlight parts that need to be replaced by the user
You can write HTML code outside the syntax like this example: </div>, it's quite easy just by writing the code as below. Make sure the tag you are going to write is parsed as shown below
<span class='code'><div></span>
Paragraph Break
<p>Fill_in_the_paragraph</p>
<i class='separate'></i>
<p>Fill_in_the_paragraph
</p>
Blockquote
Lorem ipsum dolor sit amet, elite adipiscing consectetur. Proin vestibule dignissim silence, et efficitur felis commodo et. Mauris Vel silent 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='style-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> // Optionally can be used or deleted
<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>
Table of contents or table of content
HTML format:
<div class='daftar-isi'>
<input class='isi-input hidden' id='daftar-isi01' type='checkbox'>
<label class='isi-judul' for='daftar-isi01'>Daftar isi</label>
<div class='isi-content' id='isi-content'>
<ol>
<li><a href='#toc-1'>Judul heading satu</a>
<ol>
<li><a href='#toc-1a'>Subheading satu</a></li>
<li><a href='#toc-2b'>Subheading dua</a></li>
<li><a href='#toc-3c'>Subheading tiga</a></li>
<li><a href='#toc-4d'>Subheading empat</a></li>
<li><a href='#toc-5e'>Subheading lima</a></li>
</ol>
</li>
<li><a href='#toc-2'>Judul heading dua</a></li>
<li><a href='#toc-3'>Judul heading tiga</a></li>
<li><a href='#toc-4'>Judul heading empat</a></li>
<li><a href='#toc-5'>Judul heading lima</a></li>
</ol>
</div>
</div>
// Edit tulisan yang ditandai dengan subjudul Anda, kemudian tambahkan id='toc-1' disetiap heading atau tag <h2>, <h3>, <h3> pada artikel Anda. Contoh:
<h3>Judul subheading</h3>
Isi paragraf pada subheading artikel
// Tambahkan id pada heading menjadi seperti dibawah :
<h3 id='toc-1'>Judul subheading</h3>
Isi paragraf pada subheading artikel
You can hide the table of contents at the beginning and only appear after the title of the table of contents is clicked, how to add the checked attribute to the <input> tag as shown below:
<div class='daftar-isi'>
<input class='isi-input hidden' id='daftar-isi01' type='checkbox' checked>
<label class='isi-judul' for='daftar-isi01'>Daftar isi</label>
<div class='isi-content' id='isi-content'>
<ol>
<li><a href='#toc-1'>Judul heading satu</a>
<ol>
<li><a href='#toc-1a'>Subheading satu</a></li>
<li><a href='#toc-2b'>Subheading dua</a></li>
<li><a href='#toc-3c'>Subheading tiga</a></li>
<li><a href='#toc-4d'>Subheading empat</a></li>
<li><a href='#toc-5e'>Subheading lima</a></li>
</ol>
</li>
<li><a href='#toc-2'>Judul heading dua</a></li>
<li><a href='#toc-3'>Judul heading tiga</a></li>
<li><a href='#toc-4'>Judul heading empat</a></li>
<li><a href='#toc-5'>Judul heading lima</a></li>
</ol>
</div>
</div>
Button
<a class='button' href='url_anda_disini'>Tombol</a>
<a class='button outline' href='url_anda_disini'><i class='m-icon download'></i>Download</a>
<a class='button whatsapp' href='url_anda_disini'><i class='m-icon whatsapp'></i>Butuh Bantuan?</a>
<div class='button-info'>
<a class='button' href='url_anda_disini'><i class='m-icon download'></i>Download</a>
<a class='button outline' href='url_anda_disini'>Demo</a>
</div>
<div class='download-info'>
<span class='file-icon'>Zip</span>
<span class='file-text'>Template-kalender-2021.zip</span>
<a class='button file-link' href='url_anda_disini' target='_blank' rel='noreferrer noopener'><i class='m-icon download'></i>Download</a>
</div>
Lazy YouTube
- Copy the youtube video playback code that you want to display
- Example of youtube video url: youtube.com/watch?v=s1tAYmMjLdY
- All you need to copy is the code ' s1tAYmMjLdY ' then paste it on the part that has been marked in this code
<div class='lazy-youtube' data-embed='rvrZJ5C_Nwg'>
<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>
Spoiler or show hide button
Lorem ipsum dolor sit amet, elite adipiscing consectetur. Proin vestibule dignissim silence, et efficitur felis commodo et. Mauris Vel silent 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.
<div class='spoiler'>
<input class='spoiler-input hidden' id='spoiler-01' type='checkbox'>
<div class='spoiler-judul'><b>Judul Spoiler</b: ><label aria-label='Spoiler' class='button' for='spoiler-01'></label></div>
<div class='spoiler-isi'>
<div>Isi spoiler</div>
</div>
</div>
Faq / Accordion Menu
-
Lorem ipsum dolor sit amet, elite adipiscing consectetur. Proin vestibule dignissim silence, et efficitur felis commodo et. Mauris Vel silent 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.
-
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.
HTML format:
<ul class='accordion'>
<!-- Baris pertama -->
<li>
<div class='accor-content'>
<input class='accor-menu hidden' id='offaccor-menu1' name='accordion-menu' type='radio' />
<label class='accor-title' for='offaccor-menu1'>
<i class='accor-icon'></i>
<span class='title'>Pertanyaan pertama</span>
</label>
<div class='content'>Jawaban pertanyaan pertama</div>
</div>
</li>
<!-- Baris kedua -->
<li>
<div class='accor-content'>
<input class='accor-menu hidden' id='offaccor-menu2' name='accordion-menu' type='radio' />
<label class='accor-title' for='offaccor-menu2'>
<i class='accor-icon'></i>
<span class='title'>Pertanyaan kedua</span>
</label>
<div class='content'>Jawaban pertanyaan kedua</div>
</div>
</li>
<!-- Baris ketiga -->
<li>
<div class='accor-content'>
<input class='accor-menu hidden' id='offaccor-menu3' name='accordion-menu' type='radio' />
<label class='accor-title' for='offaccor-menu3'>
<i class='accor-icon'></i>
<span class='title'>Pertanyaan ketiga</span>
</label>
<div class='content'>Jawaban pertanyaan ketiga</div>
</div>
</li>
<!-- Baris seterusnya... -->
</ul>
Every time you add a new line, make sure to change the part marked of factor-menu-1 on each line, adding a new line is not limited to 100 lines