FOrmating style

Formatting Style Demo (Bento x Ignies)

Demo lengkap elemen format: heading, typography, code, button, box, quote, image, table, list, dan kartu promo.

1) Heading Variants

<h2>Heading H2</h2>
<h3>Heading H3</h3>
<h4>Heading H4</h4>
<h5>Heading H5</h5>
<h6>Heading H6</h6>

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

2) Text Formatting Lengkap

<strong>Bold</strong>, <em>Italic</em>, <u>Underline</u>, <s>Strike</s>
<mark>Highlight</mark>, <code>inline code</code>, <kbd>Ctrl</kbd>+<kbd>S</kbd>
E = MC<sup>2</sup>, H<sub>2</sub>O, <small>Small text</small>

Bold, Italic, Underline, ~~Strike~~.

Highlight, inline code, Ctrl + S.

E = MC², H₂O, Small text.

3) Center + Dropcap

<div class="center">Teks di tengah</div>
<p><span class="drop">L</span>orem ipsum...</p>

Teks di tengah

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius libero in faucibus laoreet.

4) Syntax Highlighter

<pre><code>function hello(){
  console.log('Bento Demo');
}</code></pre>

function hello(){
  console.log('Bento Demo');
}

5) Buttons

<a class="btn" href="#">Button Fill</a>
<a class="btn-fill" href="#">Button Fill 2</a>
<a class="btn-outline" href="#">Button Outline</a>

Button Fill Button Fill 2 Button Outline

6) Boxes

<div class="box">Default</div>
<div class="box info">Info</div>
<div class="box success">Success</div>
<div class="box warning">Warning</div>
<div class="box danger">Danger</div>

Box default.

Box info.

Box success.

Box warning.

Box danger.

7) Blockquote

<blockquote>
  Karena sesungguhnya sesudah kesulitan itu ada kemudahan.
  <cite>QS. Ash-Sharh:5</cite>
</blockquote>

Karena sesungguhnya sesudah kesulitan itu ada kemudahan. QS. Ash-Sharh:5

8) Figure + Caption

<figure>
  <img src="https://via.placeholder.com/900x500" alt="Demo"/>
  <figcaption>Caption gambar demo</figcaption>
</figure>

9) Table Default

<table>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

No	Nama	Kota
1	Ignies	Jakarta
2	Bento	Bandung
3	Textrim	Surabaya

10) Table Horizontal Scroll

<div class="table">
  <table>...many columns...</table>
</div>

Col1	Col2	Col3	Col4	Col5	Col6	Col7	Col8	Col9	Col10	Col11	Col12
1	2	3	4	5	6	7	8	9	10	11	12
1	2	3	4	5	6	7	8	9	10	11	12

11) Ordered / Unordered / Nested List

<ol>...</ol>
<ul>...</ul>

Satu
Dua
1. Dua satu
2. Dua dua
Tiga

Alpha
Beta
- Beta satu
- Beta dua
Gamma

12) Related / Promo Card (.relmid)

<a class="relmid" href="#">
  <img class="relmid-thumb" src="..."/>
  <div>
    <span class="relmid-label">Rekomendasi</span>
    <div class="relmid-title">Judul konten</div>
  </div>
</a>

Rekomendasi

Contoh kartu rekomendasi dalam konten