Igniplex v3.1 Elements (Styles, Typography, Button, Boxes, etc)
NORMAL FONT. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Heading <h2>
Subheading <h3>
Minor heading <h4>
Bold
Italic
Underscore
Striketrough
UPPERCASE
lowercase
E = MC2
H2O
Google (link) or Zoetami (external link).
<mark> (highlight)
<code>
<kbd>
<samp>
<var>
Syntax Highlighter
You can add class to display what kind of code it is.
1. Default
.post-body pre {
background-color: #333;
border-left: 5px solid #009688;
padding: 0;
margin: .5em auto;
}<html>
<head>
<title>Igniel</title>
</head>
<body>
....
....
</body>
</html>https://www.igniel.comSyntax highlighter without numbering and "copy" button.B. Multi Tab
- HTML
- CSS
- JS
<html>
<head>
<title>Igniel</title>
</head>
<body>
....
....
</body>
</html>.post-body pre {
background-color: #333;
border-left: 5px solid #009688;
padding: 0;
margin: .5em auto;
}!function() {
// Estimated Reading Time by igniel.com
const post = document.querySelector('.post-body')[0],
tx = post.innerText,
wpm = 225,
wd = tx.trim().split(/\s+/).length,
tm = Math.ceil(wd / wpm);
if (document.querySelector('.read-time')) {
document.querySelector('.read-time i').innerText = tm;
}
}();Tombol (Button)
A. Fill
B. Outline
Download Box
If you have a dedicated image, you can use it like this.
Or if you DO NOT have an image, just use an alternative icon. You can even change the icon as you like.
Kotak (Box)
Badge
A simple indicator at the top of your text to emphasize the importance. It has several color options.
- The primary one New. The color will automatically adjusts to the theme.
- The green one New
- The blue one New
- The red one New
- The yellow one New
Blockquote
A. Default
Social media marketing, social media optimization, blogger tutorial for beginners. Stimulate your passion! #Nganggurpreneur
B. Dengan Author
Karena sesungguhnya sesudah kesulitan itu ada kemudahan.
Tabs (Multi Tab)
Create multi tab with unlimited content. You can add up to as many as you want because the title will be scrollable.
A. Horizontal (Default)
- First Tab
- Second Tab
- Third Tab
- Fourth Tab
- Fifth Tab
- Sixth Tab
B. Vertical
IMPORTANT! Will automatically change to horizontal on a screen size 480px and smaller.
- First Tab
- Second Tab
- Third Tab
- Fourth Tab
- Fifth Tab
- Sixth Tab
Two Column
Split text in two column. IMPORTANT! Will automatically change to one column on a screen size 480px and smaller (border and padding will also disappear).
A. With Border (Default)
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
B. Without Border
PRO
+ One
+ Two
+ Three
CONS
- One
- Two
- Three
Accordion
Hide or reveal contents. Very common in FAQ (Frequently Asked Question) section.
A. Single
Accordion Open By Default
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Accordion
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Accordion
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.B. Multi
Accordion Open By Default
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Accordion
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Accordion
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Spoiler
Show / hide content with click event to trigger.
Spoiler
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Images
A. Blogger Default
Image dimension is according to selected size in Blogger editor.
 |
| Default style of image with caption on Blogger editor |
B. Figure
Standard figure tag with figcaption. Even if don't have <a href> tag, image still displayed into Lightbox.
C. Gallery (Carousel)
Multiple images with carousel style. Very similar to Instagram gallery. Scroll or click arrow button to navigate.
D. Gallery (Swipe)
Multiple images with swipe style. Best for mobile view. Lighter than carousel.
E. Gallery (Grid with Show All)
Images will be displayed as grid. If you have more than 4 images, Show All function will be added automatically. It's similar to Facebook gallery style.
YouTube Lazy Load
Lazy load YouTube video will make your pages lighter.
Dropcaps
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
Table
A. Default
| No. | Nama | Kota |
|---|---|---|
| 1 | Igniel | Sukabumi |
| 2 | Rain | Bandung |
| 3 | RedSky | Jakarta |
| 4 | Queen | Bekasi |
| 5 | Bjita | Tangerang |
| 6 | Alphabetees | Bogor |
B. Horizontal Scroll
Better for a table with many columns.
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 | Column 7 | Column 8 | Column 9 | Column 10 |
|---|---|---|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
List
A. Custom Number
List with bigger number indicator. Best for explaining step by step tutorials.
- Sociis tellus condimentum non commodo amet vulputate leo conubia nunc egestas duis sociosqu fringilla tristique lacinia consequat a pellentesque iaculis!
- Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
- Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
- Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
- At libero bibendum semper integer phasellus ultrices volutpat nascetur vel platea hendrerit hac per lorem elementum dolor maecenas venenatis erat?
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
- Vivamus vestibulum ntulla nec ante.
- Nascetur imperdiet congue facilisi habitasse viverra sit pharetra vulputate tellus viverra amet interdum magna posuere neque class dui suspendisse netus.
- Posuere a quam varius natoque blandit primis dui massa tempor praesent non massa orci class vehicula molestie nec nibh cum.
- Porta dolor odio diam laoreet augue sed et est tortor.
B. Ordered List
Is a standard list with number.
- Satu satu satu
- Dua dua dua
- Tiga tiga tiga
- Empat empat empat
- Lima lima lima
- Enam enam enam
- Tujuh tujuh tujuh
- Delapan delapan delapan
- Sembilan sembilan sembilan
- Sepuluh sepuluh sepuluh
C. Unordered List
Is a standard list without number.
- Satu satu satu
- Dua dua dua
- Tiga tiga tiga
- Empat empat empat
- Lima lima lima
- Enam enam enam
- Tujuh tujuh tujuh
- Delapan delapan delapan
- Sembilan sembilan sembilan
- Sepuluh sepuluh sepuluh
D. Nested
- Satu
- Satu satu
- Satu satu satu
- Dua
- Tiga
- Satu
- Satu satu
- Satu satu satu
- Dua
- Tiga
- Satu
- Satu satu
- Satu satu satu
- Dua
- Tiga
