1	2	3	4	5	6	7	8	9	10	20	30	40	50	60	70	80	90	100

	5	10	20	30	40	50	60	70	80	90

Accent Color	Test	Test	Test	Test	Test	Test	Test	Test	Test	Test
Low	Test	Test	Test	Test	Test	Test	Test	Test	Test	Test
Normal	Test	Test	Test	Test	Test	Test	Test	Test	Test	Test
Important	Test	Test	Test	Test	Test	Test	Test	Test	Test	Test
Critical	Test	Test	Test	Test	Test	Test	Test	Test	Test	Test
Info	Test	Test	Test	Test	Test	Test	Test	Test	Test	Test
Success	Test	Test	Test	Test	Test	Test	Test	Test	Test	Test
Caution	Test	Test	Test	Test	Test	Test	Test	Test	Test	Test
Warning	Test	Test	Test	Test	Test	Test	Test	Test	Test	Test
Error	Test	Test	Test	Test	Test	Test	Test	Test	Test	Test
Danger	Test	Test	Test	Test	Test	Test	Test	Test	Test	Test

BAKUNG CSS
Bangun di desktop mentarget perangkat lebih kecil

Dari penulis

Sewaktu mendesain dan menulis pustaka Bakung CSS, ada beberapa hal yang menjadi pondasi atau target yang ingin dicapai.

Memiliki ukuran berkas kecil, murni CSS: Interaksi komponen tanpa ketergantungan Javascript.
Penulisan kelas yang sederhana: <buton class="btn primary bordered"></button>
Komponen-komponennya bisa digabung satu sama lain: Komponennya dibuat agar bisa saling mendukung untuk membuat komponen baru atau variasi turunan dari komponen yang ada.
Responsiv: Interaksi dengan komponen bisa menyesuaikan lebar layar.
Tanpa pengaturan diawal: Mudah disesuaikan tanpa harus mengetahui SASS/SCSS bahkan tanpa mengubah file css.

Ada hal-hal yang terlupakan dan tidak semua target yang di inginkan tercapai, tetapi saat ini jika dilihat apa yang bisa lakukan oleh Bakung CSS, yang terpikirkan adalah "tidak mengecewakan".

Kedepannya akan menambah fitur atau membuang hal-hal yang tidak diperlukan, satu hal yang tetap dilakukan saat ini adalah membuat Bakung CSS terus berkembang.

Memulai

Bakung CSS adalah pustaka framework CSS menyediakan komponen UI dan kelas-kelas utilitas dasar, murni hanya CSS tanpa javascript, keputusan ini dilakukan karena komponen HTML beserta CSS sudah memberikan nilai lebih pada interaksi antarmuka pengguna.

Agar Bakung CSS dapat memberikan tampilan yang seharusnya, diperlukan beberapa hal seperti fonts google dan @bakung-ui/minimax.css yang berfungsi sebagai pondasi dasar tampilan. Lihat cara penyusunan template html yang dianjurkan.

Lihat template dasar

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="view port" content="width=device-width, initial-scale=1">

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&family=Montserrat:wght@100..900&family=Sometype+Mono:wght@400..700&display=swap" rel="stylesheet">

        <!--
        Kamu tidak perlu @bakung-ui/minimax.css karena sudah termasuk dalam @bakung-ui/bakung.css.
        terkecuali saat pengembangan yang masih menggunakan @bakung-ui/css/_variables.css
        dan @bakung-ui/css/_bakung.css
        -->
        <link rel="stylesheet" href="./minimax.css" />
        <link rel="stylesheet" href="./bakung.css" />

        <title>Hello, world!</title>
    </head>
    <body>
        <h1>Hello, world!</h1>

    </body>
</html>

Bakung CSS bisa langsung digunakan untuk produksi, tetapi jika ingin terlihat berbeda, setidaknya lakukan penyesuaian terhadap warna-warna, khususnya warna semantik, selebihnya seperti font-font, bentuk, ukuran, spasi bisa kamu abaikan.

Penulisan kelas berdasar konvesi BEM (Block, ELement, Modifier), untuk menggunakan Bakung CSS tidak harus mempelajari BEM jadi bukan masalah kalau baru mengetahui ini, BEM tidak begitu sulit dipelajari, tetapi jika ingin mengetahui lebih lanjut bisa menuju ke getbem.com .

Satuan ukuran menggunakan REM dan EM, khususnya REM lebih sering digunakan dari ukuran font, komponen, hingga ikon bawaan. Dengan penggunan satuan ukuran ini membuat tampilan antar muka pengguna lebih dinamis.

View code

<button class="btn">
    ggjjGHGHGjjgg <i be-icon="left-check"></i>
</button>

<button class="btn" style="font-size: 2rem;">
    ggjjGHGHGjjgg <i be-icon="left-check"></i>
</button>

Breakpoints

Ada 3 breakpoint:

1280px ukuran sedang, bisa disingkat dengan kata md.
768px ukuran kecil, bisa disingkat dengan kata sm.
640px ukuran sangat kecil, bisa disingkat dengan kata xs.

Pada framework CSS lain penerapan breakpoint menggunakan aturan dimulai dari, contoh col-12 col-sm-5 akan menerapkan aturan lebar elemen adalah 12 kolom, tetapi jika lebar view port (peramban) sama dengan atau lebih besar 768px maka akan membuat elemen selebar 5 kolom. Bakung CSS memberlakukan breakpoint menggunakan aturan tertentu diterapkan sampai batas ukuran tertentu, contoh col-12 col-sm-5 membuat elemen selebar 5 kolom jika lebar view port (peramban) tidak lebih dari 768px, jika lebih dari 768px maka akan dibuat lebar elemen sebesar 12 kolom.

Dari semua breakpoint tadi, tidak semua komponen memilikinya, walaupun ada, tetapi dipisah berdasar kebutuhan berdasar lebar kontainer penampung atau lebar view port (peramban).

Komponen/elemen dengan kelas pengubah berdasar lebar view port (peramban) diawali dengan huruf v, contoh navbar dengan navbar--vsm-compact, jika berdasar lebar kontainer penampung, maka nama kelas menjadi navbar--sm-compact, tanpa huruf v. Pembedaan 2 jenis penerapan aturan ini untuk memaksimalkan interaksi pengguna dengan komponen, karena setiap komponen memiliki fungsi, kemampuan dan tampilan yang berbeda dengan lainnya, besar layar perangkat akses dan alat pendukungnya, komputer memiliki mouse, perangkat mobile dengan ukuran layar 768px keatas biasa memiliki pensil stylus, tapi tidak dengan ukuran layar 768px kebawah yang hanya mengandalkan jari, ini semua mempengaruhi cara interaksi pengguna dengan komponen.

Komponen navbar biasa ditampilkan secara membentang, interaksinya menggunakan mouse melayang pada elemen untuk melihat sub-elemen didalamnya, begitu seterusnya untuk sub-elemen didalamnya. Perubahan tampilan komponen ini bisa dikaitkan pada lebar kontainer penampungnya, tetapi view port (peramban) dengan ukuran 1280px bahkan memiliki elemen dengan ukuran 640px kebawah, walaupun ada elemen dengan ukuran dinamis yang bisa saja lebih lebar, tetapi hal ini tidak dilakukan karena tidak memaksimalkan kemampuan komponen navbar, oleh karenanya lebih tepat jika perubahannya dikaitkan pada ukuran view port (peramban), jadi navbar--vsm-compact saat memiliki ukuran view port (peramban) dibawah 768px, maka akan ditampilkan memadat tegak lurus.

Komponen accordion dengan kelas pengubah accordion--sm-vertical, dikarenakan perubahan besar ukuran perangkat dan alat pendukungnya tidak mempengaruhi interaksi pengguna, sehingga perubahannya dikaitkan berdasar ukuran kontainer sudah tepat.

Warna-warna

Bakung CSS menyediakan warna-warna yang bisa kamu gunakan pada elemen dan komponen lain, lebih tepatnya warna-warna yang bisa digunakan pada keadaan tertentu.

Warna-warna terkait prioritas:

Low
Normal
Important
Critical

Warna-warna terkait status kondisi:

Info
Success
Caution
Warning
Error
Danger

Button

Button for icon only: Link as button Colored link button

View code

<button class="btn">
    Base state
</button>

<button class="btn btn--normal">
    Saving <span class="visual-indicator" be-icon="loading"></span>
</button>

<button class="btn btn--accent">
    Accent button
</button>

<button class="btn btn--accent" disabled>
    <span class="visual-aside"><span be-icon="rectangle"></span></span> Disabled accent button
</button>

<button class="btn btn--accent btn--bordered">
    Bordered accent
</button>

<button class="btn btn--ghost">
    Ghost
</button>

<span>
    Button for icon only:
    <button class="btn btn--icon"><i be-icon="x"></i></button>
</span>

<a class="btn" href="#asd">
    Link as button
</a>
    
<a class="btn btn--normal btn--bordered" href="#asd">
    Colored link button
</a>

Jangan menggabung kelas btn--ghost dengan kelas yang mengubah tema warna karena tidak akan memberi efek apapun.
Jangan ragu menambah sub elemen visual-aside dan atau visual-indicator untuk informasi visual tambahan. Sebagai contoh, jika kamu menambah elemen dengan attribute [be-icon="loading"], cursor yang berada diatasnya akan otomatis menjadi cursor loading.

Kelas dan Atribut pendukung

Mengubah tampilan:

--btn-size nilai bakunya adalah 1, ganti nilai ini untuk mendapatkan ukuran berbeda, alternatif lainnya dengan mengubah nilai properti font-size.
[disabled] menampilkan kondisi tidak bisa digunakan.

Mengubah tema warna:

btn--accent
btn--low
btn--normal
btn--important
btn--critical
btn--info
btn--success
btn--caution
btn--warning
btn--error
btn--danger

Fungsi tertentu:

btn--icon menghilangkan ciri khas tampilan tombol, digunakan saat hanya menampilkan ikon.
btn--ghost memiliki tampilan transparant warna latar belakang abu-abu dan tanpa border.
btn--bordered penggunanya digabung dengan kelas pengubah tema warna untuk menghasilkan tampilan tertentu.

Avatar

View code

<span class="avatar" data-avatar-name="John">
    <img class="avatar__img" src="./assets/potrait.png"/>
    <span class="avatar__indicator"></span>
</span>
<span class="avatar avatar--circle" style="font-size:2rem" data-avatar-name="John">
    <img class="avatar__img" src="./assets/potrait.png"/>
    <span class="avatar__indicator"></span>
</span>
<span class="avatar">
    <span class="avatar__figure">
        <i be-icon="rectangle"></i>
    </span>
    <span class="avatar__indicator">
    </span>
</span>
<span class="avatar" style="--avatar-size: 2;" data-avatar-name="John">
    <!-- alternative: class="avatar__indicator bg-success" -->
    <span class="avatar__indicator" style="background-color: var(--color-success-50);">
    </span>
</span>

Komponen avatar digunakan untuk menampilkan foto atau nama pengguna.

Kelas dan Atribut pendukung

Mengubah tampilan:

--avatar-size nilai bakunya adalah 1, ganti nilai ini untuk mendapatkan ukuran berbeda, alternatif lainnya dengan mengubah nilai properti font-size.

Fungsi tertentu:

avatar--circle membuat bentuk avatar menjadi lingkaran
avatar__figure digunakan sebagai pengganti kelas avatar__img jika sub elemennya berupa ikon.

Badge & Chip (Pill & Tag)

Badge

Base state Accent Caution A Link

View code

<span class="badge">Base state</span>
<span class="badge badge--accent">Accent</span>
<span class="badge badge--caution">
    <span class="visual-aside"><span be-icon="triangle"></span></span> Caution
</span>
<a class="badge badge--low" href="#asd">A Link <span class="visual-indicator" be-icon="external-link"></span></a>

Komponen badge didesain untuk menampilkan data tanpa menerima aksi dan bereaksi, pengecualian khusus jika ingin digunakan menampilkan alamat tautan.

Jangan ragu menaruh sub elemen yang memiliki kelas visual-aside, dan atau visual-indicator dengan icon tertentu untuk mempertegas informasi ditampilkan.

Kelas dan Atribut pendukung

Mengubah tampilan:

--badge-size nilai bakunya adalah 1, ganti nilai ini untuk mendapatkan ukuran berbeda, alternatif lainnya dengan mengubah nilai properti font-size.

Mengubah tema warna:

badge--accent
badge--low
badge--normal
badge--important
badge--critical
badge--success
badge--info
badge--caution
badge--warning
badge--error
badge--danger

Chip(Pill & Tag)

Base stat Important Icon element Go to site With action button

View code

<span class="badge badge--chip">Base stat</span>
<span class="badge badge--chip badge--important">Important</span>

<span class="badge badge--chip badge--normal"><span class="visual-aside"><span be-icon="circle"></span></span> Icon element</span>

<a class="badge badge--chip badge--info" href="#asd">Go to site<span
class="visual-indicator" be-icon="external-link"></span></a>

<span class="badge badge--chip badge--caution">
    <span class="visual-aside"><span be-icon="rectangle"></span></span>
    With action button
    <button class="btn btn--icon"><span be-icon="x"></span></button>
</span>

Kelas badge--chip, variasi turunan dari komponen badge, didesain untuk dapat menerima aksi dan memberikan reaksi.

Semua aturan-aturan dan kelas-kelas dari komponen badge dapat kembali diterapkan disini. Jika ingin memberikan tombol aksi, sebaiknya gunakan sub elemen dengan kelas btn btn--icon.

Checkbox & Radio option

Removeable

Basic state

Badge 1

Badge 2

Badge-chip 1

Badge-chip 2

View code

<fieldset>
    <fieldset be-removeable>
        Basic state
        <label class="btn btn--icon">
            <i be-icon="x"></i>
            <input type="checkbox" class="invisible" data-state-handler checked>
        </label>
    </fieldset>

    <fieldset class="badge badge--chip" be-removeable>
        Badge 1
        <label class="btn btn--icon">
            <i be-icon="x"></i>
            <input type="checkbox" class="invisible" data-state-handler checked>
        </label>
    </fieldset>

    <fieldset class="badge badge--chip badge--important" be-removeable>
        Badge 2
        <label class="btn btn--icon">
            <i be-icon="x"></i>
            <input type="checkbox" class="invisible" data-state-handler checked>
        </label>
    </fieldset>

    <fieldset class="badge badge--chip" be-removeable>
        Badge-chip 1
        <label class="btn btn--icon">
            <i be-icon="x"></i>
            <input type="checkbox" class="invisible" data-state-handler checked>
        </label>
    </fieldset>

    <fieldset class="badge badge--chip" be-removeable>
        Badge-chip 2
        <label class="btn btn--icon">
            <i be-icon="x"></i>
            <input type="checkbox" class="invisible" data-state-handler checked>
        </label>
    </fieldset>
</fieldset>

[be-removeable] hanya memiliki satu fungsi yakni membuat dari terpilih menjadi tak terpilih dan dihilangkan dari tampilan.

[be-removeable] dapat digabung dengan kelas badge dan kelas bantuan lainnya, dan dianjurkan untuk mengelompokkan sejumlah kontrol kedalam elemen penampung <fieldset>.

Switchable

Base state Choose me Choose me | Opt 1 Opt 2

View code

<fieldset>
    <label be-switchable><span class="active-visible visual-indicator" be-icon="left-check"></span><input type="checkbox" class="invisible" data-state-handler>Base state</label>

    <label class="badge badge--chip badge--info" be-switchable><span class="active-visible visual-indicator" be-icon="left-check"></span><input type="checkbox" class="invisible" data-state-handler>Choose me</label>

    <label class="badge badge--chip badge--warning" be-switchable><span class="active-visible visual-indicator" be-icon="left-check"></span><input type="checkbox" class="invisible" data-state-handler>Choose me</label>
    |
    <label class="badge badge--chip badge--important" be-switchable><input type="radio" name="switchable-1" class="invisible" data-state-handler><span class="active-visible visual-indicator" be-icon="left-check"></span> Opt 1 </label>

    <label class="badge badge--chip" be-switchable><input class="invisible" type="radio" name="switchable-1" class="invisible" data-state-handler checked><span class="active-visible visual-indicator" be-icon="left-check"></span> Opt 2 </label>
</fieldset>

Komponen [be-switchable] merupakan alternative untuk <input [type="checkbox"]> dan <input [type="radio"]>. Jika digunakan untuk melakukan aksi memilih atau tidak (tidak memiliki nilai) maka kontrol yang digunakan ialah <input [type="checkbox"]>, tetapi jika harus memilih diantara satu pilihan maka gunakan <input [type="radio"]>.

Hindari menggabung variasi warna dari kelas badge disini, sebaiknya diberi sub elemen dengan kelas visual-indicator sebagai pembeda keadaan sudah dipilih .

Kelas dan Atribut pendukung

Fungsi tertentu:

active-invisible membuat sub-elemen tidak terlihat saat aktif.
active-visible membuat sub-elemen terlihat saat aktif.

Toggle

Flight mode

|

False True

| Tangan dominan:

Kiri

Kanan

View code

<section class="toggle">
    <fieldset class="toggle__control">
        <label>
            <input type="checkbox" class="invisible" data-toggle-handler-off-on value="flight-mode">
        </label>
    </fieldset>
    Flight mode
</section>
|
<section class="toggle toggle--vertical">
    <fieldset class="toggle__control">
        <label>
            <input type="radio" class="invisible" data-toggle-handler-off name="toggle-boolean" value="false" checked>
        </label>
        <label>
            <input type="radio" class="invisible" data-toggle-handler-on name="toggle-boolean" value="true">
        </label>
    </fieldset>
    <span class="active-invisible">False</span>
    <span class="active-visible">True</span>
</section>
|
Dominant hand:
<section class="toggle toggle--mutual">
    Left
    <fieldset class="toggle__control">
        <label>
            <input type="radio" class="invisible" data-toggle-handler-off name="toggle-hand" value="left" checked>
        </label>
        <label>
            <input type="radio" class="invisible" data-toggle-handler-on name="toggle-hand" value="right">
        </label>
    </fieldset>
    Right
</section>

Komponen toggle merupakan alternative untuk <input [type="checkbox"]> dan <input [type="radio"]>.

Jika diperlukan 2 nilai berbeda, nilai awal (off) vs nilai lainnya (on), gunakan elemen <input [type="radio"]>. Jika ingin elemen tertentu muncul berdasar kondisi on-off, tambahkan sub elemen baru didalam komponen toggle, dan beri kelas active-invisible atau active-visible.

Kelas dan Atribut pendukung

Mengubah tampilan:

--toggle-size nilai bakunya adalah 1, ganti nilai ini untuk mendapatkan ukuran berbeda, alternatif lainnya dengan mengubah nilai properti font-size.

Fungsi tertentu:

toggle--vertical memberikan tata letak tegak.
toggle--mutual digunakan ketika pilihan yang ada sama nilainya, dan biasanya saat menggunakan elemen <input [type="radio"]>, agar tidak memberikan efek tampilan off-on.

Divider

Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic.

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

View code

<div class="group">
    <p>
        Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic.
    </p>
    <hr class="divider divider--vertical" be-divider-caption="or" />
    <p>
        Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
    </p>
</div>

Komponen divider adalah garis yang digunkan untuk memisahkan 2 bagian.

Kelas dan Atribut pendukung

Mengubah tampilan:

[be-divider-caption] nilainya digunakan untuk menampilkan kata pemisah yang berada ditengah garis.

Fungsi tertentu:

divider--vertical memberikan tata letak tegak, pastikan kontainer induk mengatur tampilan elemen anak secara baris (display: flex;), atau cukup menambahkan kelas bantuan group.

Tooltip

View code

<button be-tooltip="Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic.">Dekati aku!</button>

View code

<button class="tooltip--right tooltip--no-pointer tooltip--focus" be-tooltip="Say something!">Set me :focus</button>

Kelas dan Atribut pendukung

Mengubah tampilan:

[be-tooltip] attribut untuk menampung teks yang akan ditampilkan oleh tooltip elemen.
tooltip--active membuat tooltip selalu terlihat.

Mengubah posisi tampil:

tooltip--right
tooltip--bottom
tooltip--left

Fungsi tertentu:

tooltip--no-pointer jika tidak ingin menampilkan sudut penunjuk.
tooltip--focus agar dapat menampilkan tooltip saat medapat :focus.

Popper

Hi im the popper element!, and support html element.

View code

<div class="position-relative">
    <input type="text" value="I am an input text, please hover over me! " size="22"/>
    <div class="popper popper--hover">
        <div class="popper__content">
            Hi im the popper element!, and support html element. <br/>
            <button>I'm button</button>
        </div>
    </div>
</div>

Komponen popper didesain dapat dipadu-padankan dengan elemen apapun yang dapat menerima interaksi pengguna. Selain bisa menampilkan teks juga bisa menampung elemen html atau komponen lainnya. Agar bisa berfungsi dengan seharusnya, komponen ini memiliki ketergantungan terhadap 2 elemen, elemen induk penampung dengan properti position: relative; (juga bisa ditambah nilai css display: inline*;), dan elemen pengaktif popper yang dapat menerima interaksi pengguna, biasanya berupa button.

Ada kalanya jika kelompok komponen popper (beserta induk penampung) akan dikelompokkan kembali menjadi sub elemen yang induk elemen penampung memiliki nilai properti display: *flex;, agar tetap berfungsi dengan seharusnya, maka induk langsung komponen popper diberi nilai properti display: inline-flex;, atau gunakan kelas yang telah tersedia popper-container.

Link

Plain text

View code

<div style="display: flex;">
    <button class="btn">Groupped with popper</button>
    <div class="popper-container">
        <button class="btn btn--normal">
            Click me!
        </button>
        <div class="popper popper--focus popper--tr popper--list">
            <div class="popper__content">
                <button class="popper__item">Button</button>
                <button class="popper__item btn btn--low">Button</button>
                <a class="popper__item btn" href="#asd">
                    Link
                </a>
                <div class="popper__line"></div>
                <div class="popper__item">
                    Plain text
                </div>
            </div>
        </div>
    </div>
</div>

Jika ingin menu lebih kompleks, kamu bisa menaruh komponen navbar navbar--*compact, tetapi tidak dengan komponen navbar navbar--vertical karena terkendala terbatasnya kemampuan overflow:scroll dan sub elemen yang tidak bisa melayang diluar batas ukuran induk elemen.

Jika ingin menulis fungsi javascript, untuk mendapatkan efek tetap muncul walau sudah tidak mendapatkan fokus, tulis script untuk menambahkan attribute [data-popper-active] pada komponen popper, untuk kembali menutup, hilangkan attribute [data-popper-active].

Kelas dan Atribut pendukung

Kelas aktivasi penampil popper:

popper--hover agar bisa diaktivasikan melalui interaksi :hover, saat mouse berada diatas elemen.
popper--focus aktif saat interaksi :focus, mouse klik atau elemen terkait mendapat fokus.
[data-popper-active] attribute ini membuat komponen popper terlihat walau tanpa ada interaksi dari pengguna, biasanya ini digunakan bersamaan dengan fungsi .

Mengubah posisi tampil:

popper--tl posisi tampil dari atas kiri.
popper--tr posisi tampil dari atas kanan.
popper--bl posisi tampil dari bawah kiri.
popper--bm posisi tampil dari bawah tengah.
popper--br posisi tampil dari bawah kanan.
popper--lt posisi tampil dari kiri atas.
popper--lm posisi tampil dari kiri tengah.
popper--lb posisi tampil dari kiri bawah.
popper--rt posisi tampil dari kanan atas.
popper--rm posisi tampil dari kanan tengah.
popper--rb posisi tampil dari kanan bawah.

Fungsi tertentu:

popper--pointer memberikan tampilan sudut penunjuk ke elemen pengaktif.
popper--list memberikan tampilan kolom (tegak) pada komponen popper. Saat penggunaan kelas ini, diharuskan untuk tidak langsung menaruh sub elemen kedalam popper, tetapi harus dibuat sub elemen kontainer dengan kelas popper__content untuk menaruh sub elemen yang akan ditampilkan.
popper-container diberikan ke induk penampung komponen popper, jika ditaruh kedalam elemen dengan nilai properti display: *flex;, ini memastikan komponen berfungsi seperti seharusnya.
popper__item diberikan ke elemen anak komponen popper, untuk menseragamkan tampilan jika komponen popper ditambah kelas popper--list.
popper__line digunakan pada elemen anak jika ada kelas popper--list, ini akan menampilkan garis lurus pemisah antar elemen.

Mengubah tampilan:

--popper-space nilai bakunya adalah 1, ganti nilai untuk mengubah spasi antara elemen pengaktif dan komponen popper.

Steps

Step 1

Hover the step indicator!

Step 2

Description step 2.

Step 3

Description step 3.

View code

<section class="steps">
    <section class="step">
        <div class="step__header">
            <div class="step__trail">
                <div class="step__indicator" be-tooltip="Jobs done!"></div>
            </div>
        </div>
        <div class="step__body">
            Step 1
            <div>
            Hover the step indicator!
            </div>
        </div>
    </section>
    <section class="step step--active">
        <div class="step__header">
            <div class="step__trail">
                <div class="step__indicator"></div>
            </div>
        </div>
        <div class="step__body">
            Step 2
            <div>
            Description step 2.
            </div>
        </div>
    </section>
    
    <section class="step">
        <div class="step__header">
            <div class="step__trail">
                <div class="step__indicator"></div>
            </div>
        </div>
        <div class="step__body">
            Step 3
            <div>
            Description step 3.
            </div>
        </div>
    </section>
</section>

Step 1

Description step 1.

Step 2

Hover on indicator please!

Step 3

Description step 3.

View code

<section class="steps steps--vertical steps--done">
    <section class="step">
        <div class="step__header">
            <div class="step__trail">
                <div class="step__indicator"></div>
            </div>
        </div>
        <div class="step__body">
            Step 1
            <div>
            Description step 1.
            </div>
        </div>
    </section>
    
    <section class="step">
        <div class="step__header">
            <div class="step__trail">
                <div class="step__indicator">
                    <div class="popper-container">
                        <span class="visual-indicator" be-icon="left-check"></span>
                        <div class="popper popper--hover popper--rm">
                            <div class="popper__content">
                                Hi there!
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="step__body">
            Step 2
            <div>
            Hover on indicator please!
            </div>
        </div>
    </section>
    
    <section class="step">
        <div class="step__header">
            <div class="step__trail">
                <div class="step__indicator"></div>
            </div>
        </div>
        <div class="step__body">
            Step 3
            <div>
            Description step 3.
            </div>
        </div>
    </section>
</section>

Kelas dan Atribut pendukung

Fungsi tertentu:

step--active tambahkan setelah kelas step untuk memberikan tampilan bahwa langkah ini masih dalam tahap penyelesaian.
steps--done memberikan tampilan bahwa semua langkah-langkah telah selesai dilakukan.
steps--vertical mengubah tataletak menjadi tegak.

Navigation

View code

<nav class="navbar">
    <div class="navbar__brand">
    <a href="#asd">Brand</a>
    </div>
    <ul class="nav">
        <li class="nav__item">
            <a href="#asd">menu item 1</a>
        </li>
        <li class="nav__item">
            <a href="#asd">menu item 2</a>

            <ul class="nav">
                <li class="nav__item">
                    <a href="#asd">menu item 2-1</a>
                </li>
                <li class="nav__item">
                    <a href="#asd">menu item 2-2</a>
                    <ul class="nav">
                        <li class="nav__item">
                            <a href="#asd">menu item 2-2-1</a>
                        </li>
                        <li class="nav__item">
                            <a href="#asd">menu item 2-2-2</a>

                            <ul class="nav">
                                <li class="nav__item">
                                    <a href="#asd">menu item 2-2-2-1</a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav__item">
                            <a href="#asd">menu item 2-2-3</a>
                        </li>
                    </ul>
                </li>
                <li class="nav__item-line"></li>
                <li class="nav__item">
                    <a href="#asd">menu item 2-4</a>
                </li>
            </ul>
        </li>
        <li class="nav__item">
            <a href="#asd">menu item 3</a>
        </li>
    </ul>
</nav>

Tambahkan kelas navbar--vertical setelah kelas navbar untuk tata letak tegak.

Jika ingin menggunakan icon tertentu sebagai indikator, tambahkan kelas navbar--no-indicator, buat penampung elemen dengan kelas visual-indicator, kemudian letakan kedalam nav__item, atau nav__item > *.

View code

<nav class="navbar navbar--vertical navbar--no-indicator">
    <div class="navbar__brand">
    <a href="#asd">Brand</a>
    </div>
    <ul class="nav">
        <li class="nav__item">
            <a href="#asd">menu item 1</a>
        </li>
        <li class="nav__item">
            <a href="#asd">menu item 2</a>
            <span class="visual-indicator" be-icon="chevron"></span>

            <ul class="nav">
                <li class="nav__item">
                    <a href="#asd">menu item 2-1</a>
                </li>
            </ul>
        </li>
        <li class="nav__item">
            <a href="#asd">
                menu item 3
                <span class="visual-indicator" be-icon="chevron"></span>
            </a>

            <ul class="nav">
                <li class="nav__item">
                    <a href="#asd">menu item 3-1</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Dalam kondisi tertentu kamu tidak ingin menampilkan semua menu, tambahkan kelas navbar--compact, tetapi jika ingin tampilan ringkas ini hanya berlaku pada halaman dengan lebar tertentu, ganti kelas navbar--compact dengan navbar--vsm-compact untuk memberikan tampilan ringkas selama lebar halaman kurang dari 768px, contoh:

View code

<nav class="navbar navbar--vsm-compact">
    <div class="navbar__brand">
        <a href="#asd">Brand</a>
    </div>
    <label for="navbar-toggle" class="navbar__toggle">
        <input type="checkbox" id="navbar-toggle" class="invisible" data-toggle-navbar-handler name="toggle-checkbox-2">

        <span class="visual-indicator active-invisible" be-icon="burger-menu">
        </span>
        <span class="visual-indicator active-visible" be-icon="x">
        </span>
    </label>
    <ul class="nav">
        <li class="nav__item">
            <a href="#asd">menu item 1</a>
        </li>
        <li class="nav__item">
            <a href="#asd">menu item 2</a>

            <ul class="nav">
                <li class="nav__item">
                    <a href="#asd">menu item 2-1</a>
                </li>
            </ul>
        </li>
        <li class="nav__item">
            <a href="#asd">menu item 3</a>
        </li>
    </ul>
</nav>

Hindari menggabung kelas navbar--*compact dan kelas navbar--vertical.

Kelas dan Atribut pendukung

Mengubah tampilan:

navbar--compact meringkaskan tampilan.
navbar--vsm-compact meringkaskan tampilan untuk ukuran halaman hingga 768px.
navbar--vmd-compact meringkaskan tampilan untuk ukuran halaman hingga 1280px.
navbar--compact-expand jika ingin menampilkan navbar--*compact dalam posisi terbuka.

Fungsi tertentu:

navbar__toggle digunakan sebagai kelas penampung kontrol kendali buka-tutup navbar.
nav__item-line digunakan jika ingin menampilkan garis pemisah antar menu.
navbar--vertical mengubah tataletak menjadi tegak.
navbar--no-indicator menghilangkan indikator penanda ada submenu.
navbar--no-hover membuat submenu yang memiliki kelas navbar--*compact tidak akan terbuka walau mouse melayang diatasnya.
active-invisible membuat saat keadaan komponen tidak terbuka, membuat sub elemen terlihat, dan saat terbuka menjadi tidak terlihat.
active-visible membuat saat keadaan komponen tidak terbuka, membuat sub elemen tidak terlihat, dan saat terbuka menjadi terlihat.

View code

<nav class="navbar navbar--breadcrumb">
    <div class="navbar__brand">
    <a href="#asd">Brand</a>
    </div>
    <ul class="nav">
        <li class="nav__item">
            <a href="#asd">menu item 1</a>
        </li>
        <li class="nav__item">
            <a href="#asd">menu item 2</a>

            <ul class="nav">
                <li class="nav__item">
                    <a href="#asd">menu item 2-1</a>
                </li>
                <li class="nav__item-line"></li>
                <li class="nav__item">
                    <a href="#asd">menu item 2-3</a>
                </li>
            </ul>
        </li>
        <li class="nav__item">
            <a href="#asd">menu item 3</a>
        </li>
    </ul>
</nav>

Untuk ditampilkan sebagai komponen breadcrumb tambahkan kelas navbar--breadcrumb.

Hindari menggabung kelas-kelas bantuan komponen navbar, karena bisa saja menimbulkan kesalahan pada tampilan dan fungsi.

Kelas dan Atribut pendukung

Mengubah tampilan:

[be-breadcrumb-divider] tambahkan attribute ini pada elemen kelas navbar--breadcrumb beri nilai dengan karakter tertentu, untuk mengganti karakter pemisah bawaan ( / ).

Dialog

View code

<button id="toggle-native-dialog">Tampil dialog</button>
<button id="modal-native-dialog">Modal dialog</button>

<dialog id="native-dialog" class="dialog">
    <header class="dialog__header">
        <h4>Dialog title</h4>
        
        <button class="btn btn--icon" onclick="this.closest('dialog').close('close')" >
            <i be-icon="x"></i>
            <span class="invisible">Close</span>
        </button>
    </header>
    <section class="dialog__aside">
        <i class="visual-aside font-size-1.50" be-icon="rectangle"></i>
    </section>
    <section class="dialog__content">
        Quia igneaQuia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo
    </section>
    <footer class="dialog__footer">
        <form method="dialog">
            <button value="cancel">Cancel</button>
            <button type="submit" value="confirm">Confirm</button>
        </form>
    </footer>
</dialog>

<script>
    (function() {
        const btnToggleDialog = document.getElementById('toggle-native-dialog');
        const btnModalDialog = document.getElementById('modal-native-dialog');
        const nativeDialog = document.getElementById('native-dialog');

        btnToggleDialog.addEventListener('click', function() {
            nativeDialog.show();
        });

        // Update button opens a modal dialog
        btnModalDialog.addEventListener('click', function() {
            nativeDialog.showModal();
        });
    })();
</script>

Hanya komponen dialog yang ditampilkan secara modal memiliki backdrop elemen, jika ingin menghindari penggunaan javascript, tambahkan attribute [popover]

View code

<button popovertarget="dialog-popover">Toggle dialog</button>

<dialog id="dialog-popover" class="dialog" role="dialog" popover="">
    <header class="dialog__header">
        <h4>Dialog title</h4>
        <button class="btn btn--icon" popovertarget="dialog-popover" popovertargetaction="hide">
            <span class="invisible">Close</span>
            <i be-icon="x"></i>
        </button>
    </header>
    <section class="dialog__aside">
        <i class="visual-aside font-size-1.50" be-icon="circle"></i>
    </section>
    <section class="dialog__content">
        Quia igneaQuia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.
    </section>
    <footer class="dialog__footer group gap-.50">
        <button value="cancel" popovertarget="dialog-popover" popovertargetaction="hide">Cancel</button>
        <form method="dialog">
            <button type="submit" value="confirm">Confirm</button>
        </form>
    </footer>
</dialog>

Kelas dan Atribut pendukung

Mengubah tampilan:

dialog--md membuat dialog berukuran sedang.
dialog--lg membuat dialog berukuran besar.

Notice & Notify

Notice

Sebuah komponen notice sederhana berdasar tema warna tertentu.

Komponen notice dengan tampilan elemen ikon yang di ubah menjadi lebih mencolok.

Komponen notice tampilannya telah diubah menggunakan variable css tersedia. Tampilan sama juga bisa diperoleh dengan menggunakan kelas-kelas bantuan seperti group-vertical, border-bottom-width-1, border-color-info-70.

View code

<section class="notice notice--info">
    <div class="notice__aside">
        <i be-icon="i"></i>
    </div>
    <div class="notice__content">
        A simple, theme-based notice component.
    </div>
</section>

<section class="notice notice--caution" style="--notice--borders-width: 2px;">
    <div class="notice__aside">
        <span class="stack">
            <i class="stack-2x txt-caution-70" be-icon="triangle"></i>
            <i class="stack-1x txt-caution-10" be-icon="!"></i>
        </span>
    </div>
    <div class="notice__content">
        A notice component with a bolder, more prominent icon style.
    </div>
</section>

<section class="notice" style="--notice--borders-width: 1px 1px 1px 10px;">
    <div class="notice__header">Sebuah judul</div>
    <div class="notice__content flex-auto">
        Another notice.
    </div>
</section>

Gunakan komponen notice untuk menampilkan pesan yang elemennya bersifat statis (menetap) diantara elemen.

Walaupun notice dapat diberi elemen tombol aksi-interaksi seperti tombol ( ) untuk menutup/dihilangkan dari monitor, sebaiknya dihindari.

Kelas dan Atribut pendukung

Mengubah tema warna:

notice--accent
notice--low
notice--normal
notice--important
notice--critical
notice--success
notice--info
notice--caution
notice--warning
notice--error
notice--danger

Notice-Notify

Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic. Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic.

Suis praecipites, imagine quae erat: sanctius iuga ventos.

View code

<section id="notice-notify-1" class="notice notice--notify notice--info">
    <div class="notice__aside">
        <i class="visual-aside" be-icon="left-check"></i>
    </div>
    <div class="notice__content">
        Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic. Suis praecipites, imagine quae erat: sanctius iuga ventos locum quin aurea fulgura sic. 
    </div>
    <div class="notice__footer">
        <button class="btn btn--icon" onclick="this.closest('.notice--notify').removeAttribute('data-notify-open')">
            <i be-icon="x"></i>
            <span class="invisible">Close</span>
        </button>
    </div>
</section>

<section id="notice-notify-2" class="notice notice--notify notice--success" style="margin-bottom: 5rem">
    <div class="notice__aside">
        <i class="visual-aside" be-icon="left-check"></i>
    </div>
    <div class="notice__content">
        Suis praecipites, imagine quae erat: sanctius iuga ventos.
    </div>
    <div class="notice__footer">
        <button class="btn btn--ghost" onclick="this.closest('.notice--notify').removeAttribute('data-notify-open')">
            Upload
        </button>
    </div>
</section>

Tambahkan kelas notice--notify untuk menampilkan satu pesan khusus, yang posisinya melayang di atas halaman, agar bisa ditampilkan harus menulis code <javascript> yang fungsinya menambahkan attribute [data-notify-open] agar dapat terlihat di monitor.

Container

container-xs untuk elemen penampung lebar maksimal 640px.

container-sm untuk elemen penampung lebar maksimal 768px.

container-md untuk elemen penampung lebar maksimal 1280px.

container-lg untuk elemen penampung lebar maksimal 1600px.

container tanpa batasan lebar, hanya memberi spasi kiri-kanan.

View code

<div class="container-xs bg-info-5">
    <code>container-xs</code> a container with a 640px width limit.
</div>
<div class="container-sm bg-important-5">
    <code>container-sm</code> a container with a 768px width limit.
</div>
<div class="container-md bg-normal-5">
    <code>container-md</code> a container with a 1280px width limit.
</div>
<div class="container-lg bg-success-5">
    <code>container-lg</code> a container with a 1600px width limit.
</div>
<div class="container bg-low-5">
    <code>container</code> if you want a full width layout,it just adds padding to the left and right.
</div>

container merupakan komponen elemen penampung, yang memiliki batasan lebar.

Row & Column

1

2

3

4

5

6

7

8

9

10

11

12

13

View code

<div class="row">
    <div class="col-1 bg-low-10">
        1
    </div>
    <div class="col-1 bg-low-10">
        2
    </div>
    <div class="col-1 bg-low-10">
        3
    </div>
    <div class="col-1 bg-low-10">
        4
    </div>
    <div class="col-1 bg-low-10">
        5
    </div>
    <div class="col-1 bg-low-10">
        6
    </div>
    <div class="col-1 bg-low-10">
        7
    </div>
    <div class="col-1 bg-low-10">
        8
    </div>
    <div class="col-1 bg-low-10">
        9
    </div>
    <div class="col-1 bg-low-10">
        10
    </div>
    <div class="col-1 bg-low-10">
        11
    </div>
    <div class="col-1 bg-low-10">
        12
    </div>
    <div class="col-1 bg-low-10">
        13
    </div>
</div>

Sistem kolom Bakung CSS terdiri dari 12 kolom untuk 1 baris, cara penggunaannya, col-{lebarDigunakan}, contoh, col-1, col-2 .. col-12, jika ingin penggunaan berdasar lebar kontainer penampung col-{lebarKontainer}-{lebarDigunakan} dimana {lebarKontainer} ialah xs, sm, md, lg, dan xl, contoh col-xs-4, col-md-12, dll.

col-xs-12 col-sm-6 col-md-3 col-3

col-xs-12 col-md-9 col-3

col-sm-8 col-md-7 col-3

col-sm-4 col-md-5 col-3

View code

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3 col-3 bg-important-5">
            col-xs-12 col-sm-6 col-md-3 col-3
        </div>
        <div class="col-xs-12 col-md-9 col-3 bg-critical-5">
            col-xs-12 col-md-9 col-3
        </div>
        <div class="col-sm-8 col-md-7 col-3 bg-success-5">
            col-sm-8 col-md-7 col-3
        </div>
        <div class="col-sm-4 col-md-5 col-3 bg-important-5">
            col-sm-4 col-md-5 col-3
        </div>
    </div>
</div>

Pada contoh diatas, col-xs-12 col-sm-6 col-md-3 col-3, jika lebar row tidak lebih dari 640px, maka elemen akan menggunakan seluruh lebar induk (col-xs-12), tetapi jika lebar lebih dari 640px dan tidak lebih dari 768px, maka elemen hanya akan menggunakan setengah lebar (col-sm-6) induk penampung, begitu juga penerapan aturan berikutnya.

Group

Menggunakan <div> sebagai penampung

I'm label

Menggunakan <fieldset> sebagai penampung

I'm label

View code

<div class="group">
    <span class="group__label">I'm label</span>
    <input class="group__input" type="text" placeholder="I'm input">
    <button class="btn btn--normal group__action">Iam Button</button>
</div>

<fieldset class="group">
    <span class="group__label">I'm label</span>
    <input class="group__input" type="text" placeholder="I'm input">
    <button class="btn btn--normal group__action">Iam Button</button>
</fieldset>

Memanfaatkan layout flex untuk mengelompokkan sejumlah elemen menjadi satu, beri kelas group pada elemen penampung seperti <div> atau <section>.

Elemen kontainer penampung bisa menggunakan <div> atau <section>, tetapi jika ada kontrol input, disarankan menggunakan elemen <fieldset>.

Untuk ditampilkan secara tegak, tambah kelas group-vertical. Tambah kelas group--border untuk membuat garis batas pemisah antar elemen.

Menggunakan <div> sebagai penampung

Choose Option 1 Option 2

Menggunakan <fieldset> sebagai penampung

Choose Option 1 Option 2

View code

<div class="group-vertical group--border">
    <span class="group__label">Choose</span>
    <label class="group__label">
        <input type="radio" name="samp1" checked> Option 1
    </label>
    <label class="group__label">
        <input type="radio" name="samp1"> Option 2
    </label>
</div>

<fieldset class="group-vertical group--border">
    <span class="group__label">Choose</span>
    <label class="group__label">
        <input type="radio" name="samp2" checked> Option 1
    </label>
    <label class="group__label">
        <input type="radio" name="samp2"> Option 2
    </label>
</fieldset>

Agar sub elemen memiliki ukuran yang sama tambahkan kelas flex-sizes-even.

I'm span I'm label

I'm div

View code

<div class="group group--border flex-sizes-even">
    <span class="group__label">I'm span</span>
    <label class="group__label" type="text" placeholder="Input">I'm label</label>
    <div class="group__label">I'm div</div>
</div>

Untuk membuat ukuran group sesuai lebar anak elemen, tapi tetap memiliki fungsi flex, tambahkan kelas d-inline-flex.

View code

<div class="group-vertical group--border d-inline-flex shadow">
    <button class="btn btn--normal group__action">I am a button</button>
    <button class="btn btn--important group__action">I am too</button>
    <button class="btn btn--critical group__action">I am three</button>
</div>

Beri kelas gap-{value} class untuk pemisah antar sub elemen. Pada elemen group anak, kamu bisa memberi kelas borders-radius-{value}, jangan lupa tambahkan kelas group--border-radius agar elemen anak mengikut bentuk elemen induk.

Am i ?

Link

Plain text

I'm span I'm label

I'm div

View code

<fieldset class="group flex-wrap gap-.50">
    <div class="group group--border-radius group--border borders-radius-.50">
        <button class="btn btn--low group__action">Button</button>
        <span class="bg-low-30 paddings-.25">Am i ?</span>
    </div>

    <div class="group shadow borders-radius-.50 group--border-radius group--border">
        <button class="btn btn--normal group__action">Groupped with popper</button>
        <div class="popper-container">
            <button class="btn btn--normal group__action">
                <span class="visual-aside" be-icon="burger-menu"></span>
            </button>
            <div class="popper popper--focus popper--tr popper--list">
                <div class="popper__content">
                    <button class="popper__item">Button</button>
                    <button class="popper__item btn btn--low">Button</button>
                    <a class="popper__item btn" href="#asd">
                        Link
                    </a>
                    <div class="popper__line"></div>
                    <div class="popper__item">
                        Plain text
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="group group--border">
        <span class="group__label">I'm span</span>
        <label class="group__label" type="text" placeholder="Input">I'm label</label>
        <div class="group__label">I'm div</div>
    </div>

    <div class="group shadow borders-radius-.50 group--border-radius group--border flex-wrap">
        <button class="group__action">I'm button</button>
        <button class="group__action">I'm button</button>
        <button class="group__action">I'm button</button>
    </div>
</fieldset>

Jika popper digabung menjadi sub-elemen, pastikan diberi kelas group__action pada elemen pengaktif, bukan pada elemen yang memiliki kelas popper-container.

Kelas dan Atribut pendukung

Mengubah tampilan:

group mengelompokkan sub elemen secara mendatar.
group-vertical mengelompokkan sub elemen secara tegak.
group--border untuk membuat garis batas pemisah antar elemen.
group--border-radius membuat sub elemen pertama dan terakhir mengikut ukuran border-radius elemen penampung.

Fungsi tertentu:

group__label kelas ini diberikan ke sub elemen untuk menyeragamkan tampilannya, jika elemennya digunakan sebagai label.
group__input kelas ini diberikan ke sub elemen untuk menyeragamkan tampilannya, jika elemennya digunakan sebagai input.
group__action kelas ini diberikan ke sub elemen untuk menyeragamkan tampilannya, jika elemennya digunakan sebagai tombol aksi.

Form

Form Control

Email address Pastikan paling sedikit ada 8 huruf, terdiri (setidaknya) dari 1 huruf besar, dan 1 spesial karakter (~!@#$%^&*()_+=:\|/?).

Text Area

Group Inputs

Upload

Group Inputs

View code

<fieldset class="form__group">
    <label for="controlEmailAddress1" class="form__label">Email address</label>
    <span class="form__description">
        Use at least 8 characters, including at least one uppercase letter and one special character (~!@#$%^&*()_+=:|/?).
    </span>
    <input class="form__control" type="email" id="controlEmailAddress1">
</fieldset>

<fieldset class="form__group">
    <label for="controlTextArea1" class="form__label">Text Area</label>
    <div class="form__control">
        <textarea id="controlTextArea1" rows="3"></textarea>
    </div>

</fieldset>

<fieldset class="form__group">
    <label for="group-2-1" class="form__label">Group Inputs</label>
    <div class="form__control group">
        <input id="group-2-1" class="group__input" type="text">
        <input id="group-2-2" class="group__input" type="text">
        <button class="btn btn--low group__action">Choose</button>
    </div>
</fieldset>

<fieldset class="form__group">
    <label for="example-input-file" class="form__label">Upload</label>
    <div class="form__control group">
        <input type="file" id="example-input-file" class="group__input">
    </div>
</fieldset>

<fieldset class="form__group">
    <label for="checkbox1" class="form__label">Group Inputs</label>
    <div class="form__control group align-items-center">
        <!-- no class -->
        <input type="checkbox" id="checkbox1" class="">
        <input type="range" id="example-input-range" min="1" max="4" value="3" class="group__input">
        <select id="example-optgroup" class="group__input">
            <optgroup label="Swedish Cars">
                <option>Volvo</option>
                <option>Saab</option>
            </optgroup>
            <optgroup label="German Cars">
                <option>Mercedes</option>
                <option>Audi</option>
            </optgroup>
        </select>
    </div>
</fieldset>

Walau hanya terdiri satu elemen, dianjurkan menaruh kontrol masukan kedalam elemen penampung dengan kelas form__control.

Kelas dan Atribut pendukung

Fungsi tertentu:

form__group kelas ini diberikan induk elemen yang menampung sub elemen yang berada didalam form, ini digunakan untuk memberikan tampilan batasan jelas antar kelompok input.
form__label kelas ini diberikan ke elemen yang digunakan untuk penjelas nama jenis masukan yang digunakan pada kontrol, biasanya elemen label.
form__control kelas ini diberikan ke elemen kontrol yang menerima masukan dari pengguna.
form__description ini seperti form__label, tetapi digunakan khusus untuk memberikan penjelasan lebih detail terkait data yang harus dimasukkan.

Layout

Name

Email

Password

Pastikan paling sedikit ada 8 huruf, terdiri (setidaknya) dari 1 huruf besar, dan 1 spesial karakter (~!@#$%^&*()_+=:\|/?).

View code

<fieldset class="form__group row">
    <div class="col">
        <div class="form__control">
            <input type="text" placeholder="First name" aria-label="First name">
        </div>
    </div>
    <div class="col">
        <div class="form__control">
            <input type="text" placeholder="Last name" aria-label="Last name">
        </div>
    </div>
</fieldset>

<fieldset class="form__group row">
    <div class="col-2 col-md-3">
        <label for="name" class="form__label">Name</label>
    </div>
    <div class="col-10 col-md-9">
        <div class="form__control">
            <input id="name" type="text" placeholder="Name">
        </div>
    </div>
</fieldset>
<fieldset class="form__group row">
    <label for="controlEmailAddress2" class="form__label col-2 col-sm-12">Email</label>
    <div class="col-10 col-sm-12">
        <div class="form__control">
            <input type="email" id="controlEmailAddress2"  placeholder="Email">
        </div>
    </div>
</fieldset>
<fieldset class="form__group row">
    <label for="controlPassword2" class="form__label col-2 col-sm-12">Password</label>
    <div class="col-10 col-sm-12">
        <span class="form__description">
            Use at least 8 characters, including at least one uppercase letter and one special character (~!@#$%^&*()_+=:|/?).
        </span>
        <div class="form__control">
            <input type="password" id="controlPassword2"  placeholder="Password">
        </div>
    </div>
</fieldset>

Untuk membentuk tataletak tertentu, gabungkan kelas row dan col* setelah kelas form__label dan form__control, atau dimasukan dahulu ke elemen penampung.

Saat menampung dan mengelompokkan <label>, <input>, <button> menjadi satu, disarankan ditaruh kedalam elemen <fieldset>.

Validation

User type

Customer Seller

User name

Gunakan huruf kecil tanpa spasi.

@

"handsomeman" username existed.

Email

Invalid email format.

Group input

Yea i know its empty, but this is a sample for valid input.

View code

<form novalidate data-was-validated>
    <fieldset class="form__group row">
        <label for="usertype" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">User type</label>
        <div class="col-7 col-sm-12">
            <div class="form__control group">
                <label class="group__label">
                    <input type="radio" name="usertype" checked> Customer
                </label>
                <label class="group__label">
                    <input type="radio" name="usertype"> Seller
                </label>
            </div>
        </div>
    </fieldset>

    <fieldset class="form__group row">
        <label for="username" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">User name</label>
        <div class="col-7 col-sm-12">
            <span class="form__description">
                Use lower case without space.
            </span>
            <div class="form__control group">
                <span class="group__label">@</span>
                <input class="group__input" id="username" value="handsomeman"  placeholder="Username">
            </div>
            <div class="invalid-feedback">
                "handsomeman" username existed.
            </div>
        </div>
    </fieldset>

    <fieldset class="form__group row">
        <label for="controlEmailAddress3" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">Email</label>
        <div class="col-7 col-sm-12">
            <div class="form__control">
                <input id="controlEmailAddress3" class="group__input" type="email" placeholder="Email" value="handsomeman@">
            </div>

            <div class="invalid-feedback">
                Invalid email format.
            </div>
        </div>
    </fieldset>

    <fieldset class="form__group row">
        <label for="group-2-1" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">Group input</label>
        <div class="col-7 col-sm-12">
            <div class="form__control group data-is-valid">
                <input id="group-2-1" class="group__input" type="text" placeholder="I'm input">
                <input id="group-2-2" class="group__input" type="text" placeholder="I'm input">
                <button class="btn btn--low group__action">Choose</button>
            </div>
            <div class="feedback">
                Yea i know its empty, but this is a sample for valid input.
            </div>
        </div>
    </fieldset>

    <fieldset class="form__group row">
        <div class="form__control borders-width-unset offset-3 offset-sm-0 col-9 col-sm-12 shadow-none">
            <button class="btn btn--ghost">Cancel</button>
            <button class="btn btn--accent">Submit</button>
        </div>
    </fieldset>
</form>

Pastikan ada attribut [novalidate] di elemen <form> untuk mencegah validasi bawaan peramban. Untuk menampilkan hasil validasi masukan, gunakan elemen baru, beri kelas valid-feedback atau invalid-feedback, efek validasi ini hanya terlihat jika elemen form memiliki atribute [data-was-validated], biasanya didapat setelah melalui proses valdasi data ke server atau hasil pemrosesan data menggunakan javascript.

Jika ingin menampilkan hasil validasi data per form__group, tambahkan attribut [data-is-valid] atau [data-is-invalid] pada form__control.

View code

<form novalidate>
    <fieldset class="form__group row">
        <label for="username-1" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">User name</label>
        <div class="col-9 col-sm-12">
            <div class="form__control group data-is-invalid">
                <span class="group__label">@</span>
                <input id="username-1" class="group__input" value="handsomeman"  placeholder="Username for your account">
            </div>
            <div class="valid-feedback">
                Looks good.
            </div>
            <div class="feedback">
                You're not handsome, dont use"handsomeman".
            </div>
        </div>
    </fieldset>
</form>

Elemen dengan kelas feedback tidak terikat elemen dengan kelas invalid-feedback atau valid-feedback yang diperuntukan menampilkan pesan dengan satu kondisi khusus. Kamu juga bisa menggabung elemen-elemen ini jika ingin menampilkan gabungan kondisi berhasil dan gagal.

Dalam keadaan tertentu attribute [data-is-valid] atau [data-is-invalid] bisa kamu tulis ulang menjadi attribut kelas, seperti contoh di halaman ini.

Jika ingin hanya menampilkan ikon hasil validasi tambahkan kelas form__control--validation-icon, tetapi jika ingin hasil validasi hanya merubah warna border, tambahkan kelas form__control--validation-border.

User name

@

You're not handsome, dont use"handsomeman".

User name

@

You're not handsome, dont use"handsomeman".

View code

<form novalidate>
    <fieldset class="form__group row">
        <label for="username-2" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">User name</label>
        <div class="col-9 col-sm-12">
            <div class="form__control group data-is-invalid form__control--validation-icon">
                <span class="group__label">@</span>
                <input id="username-2" class="group__input" value="handsomeman"  placeholder="Username for your account">
            </div>
            <div class="invalid-feedback">
                You're not handsome, dont use"handsomeman".
            </div>
        </div>
    </fieldset>
    
    <fieldset class="form__group row">
        <label for="username-3" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">User name</label>
        <div class="col-9 col-sm-12">
            <div class="form__control group data-is-invalid form__control--validation-border">
                <span class="group__label">@</span>
                <input id="username-3" class="group__input" value="handsomeman"  placeholder="Username for your account">
            </div>
            <div class="invalid-feedback">
                You're not handsome, dont use"handsomeman".
            </div>
        </div>
    </fieldset>
</form>

Jika ingin langsung menampilkan hasil validasi masukan pengguna berdasar aturan yang telah ditetapkan di elemen terkait, pastikan tidak ada attribute [novalidate] pada elemen <form>.

Email (required)

feedback: You see this in any feedback condition.

valid-feedback: Yes.

invalid-feedback: Yes.

Email (not required)

@

feedback: You see this in any feedback condition.

valid-feedback: Yes.

invalid-feedback: Yes.

Email (required)

You wont see any feedback, because attribute [novalidate]

feedback: You see this in any feedback condition.

valid-feedback: Yes.

invalid-feedback: Yes.

View code

<form>
    <fieldset class="form__group row">
        <label for="email-2" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">Email (required)</label>
        <div class="col-9 col-sm-12">
            <input id="email-2" class="form__control" type="email" placeholder="Fill your email here" required>
            <div class="feedback">
                feedback: You see this in any feedback condition.
                <!-- You shall not see any colored text or border -->
            </div>
            <div class="valid-feedback">
                valid-feedback: Yes.
            </div>
            <div class="invalid-feedback">
                invalid-feedback: Yes.
            </div>
        </div>
    </fieldset>

    <fieldset class="form__group row">
        <label for="email-3" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">Email (not required)</label>
        <div class="col-9 col-sm-12">
            <div class="form__control group">
                <label class="group__label">@</label>
                <input id="email-3" class="group__input" type="email" placeholder="Fill your email here">
            </div>
            <div class="feedback">
                feedback: You see this in any feedback condition.
                <!-- You shall not see any colored text or border -->
            </div>
            <div class="valid-feedback">
                valid-feedback: Yes.
            </div>
            <div class="invalid-feedback">
                invalid-feedback: Yes.
            </div>
        </div>
    </fieldset>

    <fieldset class="form__group row">
        <label for="email-4" class="form__label col-3 col-sm-12 txt-align-end txt-sm-align-start">Email (required)</label>
        <div class="col-9 col-sm-12">
            <div class="form__description">You wont see any feedback, because attribute [novalidate]</div>
            <div class="form__control" novalidate>
                <input id="email-4" type="email" placeholder="Fill your email here" required>
            </div>
            <div class="feedback">
                feedback: You see this in any feedback condition.
                <!-- You shall not see any colored text or border -->
            </div>
            <div class="valid-feedback">
                valid-feedback: Yes.
            </div>
            <div class="invalid-feedback">
                invalid-feedback: Yes.
            </div>
        </div>
    </fieldset>
</form>

Untuk mencegah validasi peramban menampilkan informasi masukan pengguna valid walaupun nilainya tidak ada (kosong tanpa spasi), pastikan elemen input memiliki attribute placeholder <input type="text" placeholder="Write something in here"/>.

Kelas dan Atribut pendukung

Fungsi tertentu:

[novalidate] attribute untuk <form> fungsi bawaan peramban, ini mencegah validasi yang dilakukan oleh peramban, juga bisa ditambahkan pada elemen berkelas form__control untuk tidak menampilkan informasi valid atau tidaknya masukan.
valid-feedback kelas penampung untuk elemen yang menampilkan informasi validasi masukan pengguna sukses tanpa ada kesalahan.
invalid-feedback kelas penampung untuk elemen yang menampilkan informasi validasi masukan pengguna gagal karena ada kesalahan.
[data-was-validated] attribute untuk <form>, didapat setelah melalui proses valdasi data ke server atau didapat setelah pemrosesan data menggunakan javascript, attribut ini digunakan untuk menampilkan elemen validasi valid-feedback dan invalid-feedback.
[data-is-valid] atau kelas data-is-valid pada elemen berkelas form__control, menandakan validasi masukan pengguna sukses tanpa ada kesalahan.
[data-is-invalid] atau kelas data-is-invalid pada elemen berkelas form__control, menandakan validasi masukan pengguna gagal karena ada kesalahan.
feedback kelas ini diberikan ke elemen yang menampilkan hasil validasi per-form__control oleh attribute [data-is-valid] atau [data-is-invalid].
form__control--validation-icon kelas ini hanya menampilkan ikon hasil validasi.
form__control--validation-border kelas ini hanya merubah warna border untuk hasil validasinya.

Panel

Panel Body

View code

<div class="panel">
    <div class="panel__header">
        Header
    </div>
    <div class="panel__body">
        Body
    </div>
</div>

Komponen penampung.

Floater

Toggle sample floater

View code

<div class="floater floater-bottom-right">
    <div class="panel">
        <div class="panel__header">
            <!-- You can put tittle and clear and close button here -->
        </div>
        <div class="panel__body">
            <!-- Put notice* in here -->
        </div>
    </div>
</div>

Komponen floater berfungsi untuk membuat elemen melayang, khususnya elemen penampung seperti <div> dan <section>, salah satu penggunaanya seperti pada komponen notice* jika ada lebih dari satu elemen tampil melayang dilayar pada satu posisi maka diperlukan elemen penampung.

Tidak seperti contoh sebelumnya membuat elemen langsung melayang, dalam kedaan tertentu ingin membuat elemen statik yang menetap diantara elemen kemudian melayang ditengah layar, untuk ini tambahkan attribute popover

Visible when floating (:popover-open())

View code

<div style="border: 1px solid grey; width: 280px; height: 280px; anchor-name: var(--anchor-name, --anchor-name);">
    <section id="floater-2" class="floater floater--fluid" popover="">
        <img class="img--fluid" src="./assets/vasilis-karkalas-i8cDJOiIvTo-unsplash.webp" />
        <span class="active-visible">Visible when floating (:popover-open())</span>
        
        <button class="btn btn--icon tooltip--right tooltip--active margin-top-.50 margin-right-.50 position-absolute inset-top-left" popovertarget="floater-2" popovertargetaction="toggle" be-tooltip="Click me!">
            <span class="invisible">Toggle floater</span>
            <i be-icon="rectangle"></i>
        </button>
    </section>
</div>

Usahakan jika digabung dengan attribute popover, keadaan melayang atau tidak, dan terlihat atau tidak, pastikan bukan elemen atau komponen yang fungsinya hanya sekali tampil kemudian dihapus dari DOM.

Kelas dan Atribut pendukung

Mengubah tampilan:

floater--md mengubah ukuran saat melayang menjadi sedang.
floater--lg mengubah ukuran saat melayang menjadi besar.
floater--fluid mengubah ukuran saat melayang mengikut ukuran besaran konten dan maksimal kurang dari besar halaman.

Mengubah posisi tampil:

floater-top
floater-top-left
floater-top-right
floater-bottom
floater-bottom-left
floater-bottom-right

Fungsi tertentu:

active-invisible membuat saat keadaan komponen floater tidak melayang, membuat sub elemen terlihat, dan saat melayang menjadi tidak terlihat.
active-visible membuat saat keadaan komponen floater tidak melayang, membuat sub elemen tidak terlihat, dan saat melayang menjadi terlihat.

Cards

Card

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.

View code

<article class="card">
    <section class="card__media">
        <img src="./assets/imagination.jpg" />
    </section>
    <header class="card__header">
        <h3>
            Some teks for title
            <p class="subheader">
                <!-- some teks -->
                Some teks for its subheader
            </p>
        </h3>
    </header>
    <section class="card__body">
        <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
    </section>
</article>

Tidak seperti panel yang mengelompokkan sejumlah data berbeda pada satu tampilan, card digunakan untuk menampilkan satu jenis data.

Komponan card memanfaatkan fungsi grid, secara baku terdiri dari 3 baris dan 1 kolom. Jika sub elemen langsung kurang dari 3 baris, manfaatkan kelas bantuan untuk mengisi sisa elemen, seperti grid-row-span-2 untuk membuat elemen card__body mengisi 2 elemen lainnya.

Some teks for title inside card__body
Some teks for sub title

Teks hourglass gibbersih

View code

<article class="card">
    <section class="card__body grid-row-span-2">
        <h3>
            Some teks for title inside card__body
            <p class="subheader">
                Some teks for sub title
            </p>
        </h3>
        <p>
            <!-- some teks -->
            Teks hourglass gibbersih
        </p>

        <footer class="card__footer">
            <a href="#asd" >Go To <i class="visual-indicator"></i></a>
        </footer>
    </section>
</article>

Cards

Kelebihan komponan card baru terlihat jika ada lebih dari 1 komponen yang ada dibawah satu induk elemen dengan kelas cards, ini akan membuat semua sub elemen, tata letak dan ukurannya menjadi teratur dan seragam satu sama lainnya.

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.

View code

<div class="cards cards--media-sticks-to-border">
    <article class="card">
        <section class="card__media">
            <img src="./assets/alexis-presa-OCvXQfLHHx0-unsplash.webp" />
        </section>
        <header class="card__header">
            <h4>
                Some teks for title
                <small class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </small>
            </h4>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
    </article>

    <article class="card">
        <section class="card__media">
            <img src="./assets/christian-lue-NozWWLzEb0E-unsplash.webp" />
        </section>
        <header class="card__header">
            <h4>
                Some teks for title for second card
                <p class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </p>
            </h4>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
    </article>

    <article class="card">
        <section class="card__media">
            <img src="./assets/jean-carlo-emer-PPk5cX78qys-unsplash.webp" />
        </section>
        <header class="card__header">
            <h4>
                Some teks for title
                <p class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </p>
            </h4>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
    </article>
</div>

untuk menampilkan dengan media melingkup keseluruhan area tambahkan kelas cards--cover.

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.

View code

<div class="cards cards--cover">
    <article class="card">
        <div class="card__content">
        <section class="card__media">
            <img src="./assets/imagination.jpg" />
        </section>
        <header class="card__header">
            <h4>
                Some teks for title
                <small class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </small>
            </h4>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
        </div>
    </article>

    <article class="card">
        <section class="card__media">
            <img src="./assets/yilei-jerry-bao-_FzUZYliQ1M-unsplash.webp" />
        </section>
        <header class="card__header">
            <h4>
                Some teks for title for second card
                <p class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </p>
            </h4>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
    </article>

    <article class="card">
        <section class="card__media">
            <img src="./assets/christian-lue-NozWWLzEb0E-unsplash.webp" />
        </section>
        <header class="card__header">
            <h4>
                Some teks for title
                <p class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </p>
            </h4>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
    </article>
</div>

untuk mendapatkan tata letak horizontal tambahkan kelas cards--horizontal.

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.

View code

<div class="cards cards--horizontal cards--media-sticks-to-border">
    <article class="card">
        <section class="card__media">
            <img src="./assets/aByRQg2_700b.jpg" />
        </section>
        <header class="card__header">
            <h4>
                Some teks for title
                <small class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </small>
            </h4>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
    </article>

    <article class="card">
        <header class="card__header">
            <h4>
                Some teks for title for middle card
                <p class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </p>
            </h4>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>

        <section class="card__media">
            <img src="./assets/alexis-presa-OCvXQfLHHx0-unsplash.webp" />
        </section>
    </article>

    <article class="card">
        <section class="card__media">
            <img src="./assets/christian-lue-NozWWLzEb0E-unsplash.webp" />
        </section>
        <header class="card__header">
            <h4>
                Some teks for title
                <p class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </p>
            </h4>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
    </article>
</div>

Cards Scrollable

untuk menampilkan secara deret dengan layar gulung tambahkan kelas cards--scrollable. Tinggi sub element card__media bisa mempengaruhi ketinggian seluruh element, untuk penyesuaian ketinggian, beri nilai tinggi (atau ketinggian maksimal) pada .card grid row value, atau di elemen ini.

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.

View code

<div class="cards cards--horizontal cards--media-sticks-to-border cards--scrollable cards--horizontal-nav">
    <article class="card">
        <section class="card__media">
            <img src="./assets/aByRQg2_700b.jpg" />
        </section>
        <header class="card__header">
            <h5>
                Some teks for title
                <small class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </small>
            </h5>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
    </article>

    <article class="card">
        <article class="card__content">
            <header class="card__header">
                <h5>
                    Has card__content as 1st elemen and act as container
                    <p class="subheader">
                        <!-- some teks -->
                        Some teks for its subheader
                    </p>
                </h5>
            </header>
            <section class="card__body">
                <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
            </section>
        </article>
        <section class="card__media">
            <img src="./assets/alexis-presa-OCvXQfLHHx0-unsplash.webp" />
        </section>
    </article>

    <article class="card">
        <section class="card__media">
            <img src="./assets/christian-lue-NozWWLzEb0E-unsplash.webp" />
        </section>
        <article class="card__content">
            <header class="card__header">
                <h5>
                    Has card__content as 2nd element and act as container
                    <p class="subheader">
                        <!-- some teks -->
                        Some teks for its subheader
                    </p>
                </h5>
            </header>
            <section class="card__body">
                <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
            </section>
        </article>
    </article>

    <article class="card">
        <header class="card__header">
            <h5>
                Some teks for title
                <p class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </p>
            </h5>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
        <section class="card__media">
            <img src="././assets/imagination.jpg" />
        </section>
    </article>
    
    <article class="card">
        <header class="card__header">
            <h5>
                Some teks for title
                <small class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </small>
            </h5>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
        <section class="card__media">
            <img src="./assets/jean-carlo-emer-PPk5cX78qys-unsplash.webp" />
        </section>
    </article>

    <article class="card">
        <section class="card__media">
            <img src="./assets/yilei-jerry-bao-_FzUZYliQ1M-unsplash.webp" />
        </section>
        <header class="card__header">
            <h5>
                Some teks for title for second card
                <p class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </p>
            </h5>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
    </article>

    <article class="card">
        <section class="card__media">
            <img src="./assets/vasilis-karkalas-i8cDJOiIvTo-unsplash.webp" />
        </section>
        <header class="card__header">
            <h5>
                Some teks for title
                <p class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </p>
            </h5>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
    </article>
    
    <article class="card">
        <header class="card__header">
            <h5>
                Some teks for title
                <small class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </small>
            </h5>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
        <section class="card__media">
            <img src="./assets/aByRQg2_700b.jpg" />
        </section>
    </article>

    <article class="card">
        <section class="card__media">
            <img src="./assets/alexis-presa-OCvXQfLHHx0-unsplash.webp" />
        </section>
        <header class="card__header">
            <h5>
                Some teks for title for second card
                <p class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </p>
            </h5>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
    </article>

    <article class="card">
        <section class="card__media">
            <img src="./assets/christian-lue-NozWWLzEb0E-unsplash.webp" />
        </section>
        <header class="card__header">
            <h5>
                Some teks for title
                <p class="subheader">
                    <!-- some teks -->
                    Some teks for its subheader
                </p>
            </h5>
        </header>
        <section class="card__body">
            <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
        </section>
    </article>
</div>

Kelas dan Atribut pendukung

Mengubah tampilan:

cards--media-sticks-to-border membuat jika media merupakan elemen pertama atau terakhir, elemennya akan menempel dengan pembatas (tidak berpengaruh untuk cards--cover).
cards--cover mengubah semua sub elemen card__media melingkupi semua area grid.
cards--horizontal mengubah tataletak menjadi mendatar.
cards--auto-fit jika setidaknya ada 3 anak elemen, maka akan dilakukan penyesuaian ukuran lebar elemen setidaknya 280px, agar dapat memaksimalkan ditampilkannya anak elemen di dalam view port.
cards--scrollable mengubah tata letak elemen card menyamping dan membuat elemen induk dapat digulung.
cards--horizontal-nav menampilkan kendali bawaan untuk menggeser sub item cards--scrollable ke kiri-kanan.

Fungsi tertentu:

cards.
card.
card__content pada keadaan tertentu diperlukan kontainer penampung sub-elemen.
card__media .
card__header .
card__body .
be-prev-nav jika menggunakan kelas cards--horizontal-nav, attribute ini untuk mengganti ikon navigasi kekiri, nilai baku <.
be-next-nav jika menggunakan kelas cards--horizontal-nav, attribute ini untuk mengganti ikon navigasi kekanan, nilai baku >.

Slide

Komponen slide sebenarnya adalah variasi dari cards dengan kelas pengubah cards--slide, karena komponen ini memiliki potensi yang besar, jadi diputuskan untuk dibuat kategori tersendiri.

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.

View code

<section class="slide">
    <div class="slide__items cards cards--slide">
        <article class="slide__item card">
            <input type="radio" id="card-slide-1" class="invisible" data-slide-select-handler name="card-slide" checked>
            <section class="card__media">
                <img src="./assets/yilei-jerry-bao-_FzUZYliQ1M-unsplash.webp" />
            </section>
            <article class="card__content">
                <header class="card__header">
                    <h5>
                        Some teks for title
                        <small class="subheader">
                            <!-- some teks -->
                            Some teks for its subheader
                        </small>
                    </h5>
                </header>
                <section class="card__body">
                    <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
                </section>
            </article>
        </article>

        <article class="slide__item card">
            <input type="radio" id="card-slide-2" class="invisible" data-slide-select-handler name="card-slide">
            <section class="card__media">
                <img src="./assets/jean-carlo-emer-PPk5cX78qys-unsplash.webp" />
            </section>
            <article class="card__content">
                <header class="card__header">
                    <h5>
                        Has element card__content
                        <p class="subheader">
                            <!-- some teks -->
                            Some teks for its subheader
                        </p>
                    </h5>
                </header>
                <section class="card__body">
                    <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
                </section>
            </article>
        </article>

        <article class="slide__item card">
            <input type="radio" id="card-slide-3" class="invisible" data-slide-select-handler name="card-slide">
            <section class="card__media">
                <img src="./assets/imagination.jpg" />
            </section>
            <header class="card__header">
                <h5>
                    No card__content
                    <p class="subheader">
                        <!-- some teks -->
                        Some teks for its subheader
                    </p>
                </h5>
            </header>
            <section class="card__body">
                <p> Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo.</p>
            </section>
        </article>
        
        <article class="slide__item card">
            <input type="radio" id="card-slide-4" class="invisible" data-slide-select-handler name="card-slide">
            <section class="card__media">
                <img src="./assets/christian-lue-NozWWLzEb0E-unsplash.webp" />
            </section>
            <article class="card__content">
                <header class="card__header">
                    <h5>
                        Some teks for title
                        <small class="subheader">
                            <!-- some teks -->
                            Some teks for its subheader
                        </small>
                    </h5>
                </header>
                <section class="card__body">
                </section>
            </article>
        </article>

        <article class="slide__item card">
            <input type="radio" id="card-slide-5" class="invisible" data-slide-select-handler name="card-slide">
            <section class="card__media">
                <img src="./assets/alexis-presa-OCvXQfLHHx0-unsplash.webp" />
            </section>
            <article class="card__content">
                <header class="card__header">
                    <h5>
                        Some teks for title for second card
                        <p class="subheader">
                            <!-- some teks -->
                            Some teks for its subheader
                        </p>
                    </h5>
                </header>
                <section class="card__body">
                </section>
            </article>
        </article>

        <article class="slide__item card">
            <input type="radio" id="card-slide-6" class="invisible" data-slide-select-handler name="card-slide">
            <section class="card__media">
                <img src="./assets/aByRQg2_700b.jpg" />
            </section>
            <article class="card__content">
                <header class="card__header">
                    <h5>
                        Some teks for title
                        <p class="subheader">
                            <!-- some teks -->
                            Some teks for its subheader
                        </p>
                    </h5>
                </header>
                <section class="card__body">
                </section>
            </article>
        </article>
        
        <article class="slide__item card">
            <input type="radio" id="card-slide-7" class="invisible" data-slide-select-handler name="card-slide">
            <section class="card__media">
                <img src="./assets/vasilis-karkalas-i8cDJOiIvTo-unsplash.webp" />
            </section>
            <article class="card__content">
                <header class="card__header">
                    <h5>
                        Some teks for title
                        <small class="subheader">
                            <!-- some teks -->
                            Some teks for its subheader
                        </small>
                    </h5>
                </header>
                <section class="card__body">
                </section>
            </article>
        </article>

        <article class="slide__item card">
            <input type="radio" id="card-slide-8" class="invisible" data-slide-select-handler name="card-slide">
            <section class="card__media">
                <img src="./assets/yilei-jerry-bao-_FzUZYliQ1M-unsplash.webp" />
            </section>
            <article class="card__content">
                <header class="card__header">
                    <h5>
                        Some teks for title for second card
                        <p class="subheader">
                            <!-- some teks -->
                            Some teks for its subheader
                        </p>
                    </h5>
                </header>
                <section class="card__body">
                </section>
            </article>
        </article>

        <article class="slide__item card">
            <input type="radio" id="card-slide-9" class="invisible" data-slide-select-handler name="card-slide">
            <section class="card__media">
                <img src="./assets/jean-carlo-emer-PPk5cX78qys-unsplash.webp" />
            </section>
            <article class="card__content">
                <header class="card__header">
                    <h5>
                        Some teks for title
                        <p class="subheader">
                            <!-- some teks -->
                            Some teks for its subheader
                        </p>
                    </h5>
                </header>
                <section class="card__body">
                </section>
            </article>
        </article>
    </div>
    <div class="slide__indicators">
        <label class="slide__indicator-item"
        for="card-slide-1"
        aria-controls="card-slide-1"></label>

        <label class="slide__indicator-item"
        for="card-slide-2"
        aria-controls="card-slide-2"></label>

        <label class="slide__indicator-item"
        for="card-slide-3"
        aria-controls="card-slide-3"></label>

        <label class="slide__indicator-item"
        for="card-slide-4"
        aria-controls="card-slide-4"></label>

        <label class="slide__indicator-item"
        for="card-slide-5"
        aria-controls="card-slide-5"></label>

        <label class="slide__indicator-item"
        for="card-slide-6"
        aria-controls="card-slide-6"></label>

        <label class="slide__indicator-item"
        for="card-slide-7"
        aria-controls="card-slide-7"></label>

        <label class="slide__indicator-item"
        for="card-slide-8"
        aria-controls="card-slide-8"></label>

        <label class="slide__indicator-item"
        for="card-slide-9"
        aria-controls="card-slide-9"></label>
    </div>
    <button class="slide__navigator-prev">
        <i be-icon="chevron"></i>
    </button>
    <button class="slide__navigator-next">
        <i class="flip" be-icon="chevron"></i>
    </button>
</section>

Semua attribute dan kelas bantuan pada komponen cards bisa digunakan disini tanpa kendala.

Kelas dan Atribut pendukung

Mengubah tampilan:

cards--slide mengubah tata letak komponen cards menjadi elemen menggeser.
slide.
slide__items.
slide__item .
slide__navigator-prev .
slide__navigator-next .
slide__indicators .
slide__indicator-item .

Accordions

Accordion 1

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

View code

<div class="accordions">
    <div class="accordion">
        <label id="header-1" class="accordion__header" for="accordion-handler-1">
            <input type="checkbox" id="accordion-handler-1" class="invisible" name="samp-accordion-1" data-accordion-select-handler checked>
            Accordion 1

            <i class="visual-indicator" be-icon="chevron"></i>
        </label>
        <div id="section-1" class="accordion__body">
            <div class="accordion__overflow">
                <div class="accordion__content">
                    <!-- Accordions content -->
                    Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

                    <br/>
                    Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

                    <br/>
                    Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
                </div>
            </div>
        </div>
    </div>
    <div class="accordion">
        <label class="accordion__header" for="accordion-handler-2">
            <input type="checkbox" id="accordion-handler-2" class="invisible" name="samp-accordion-1" data-accordion-select-handler>
            Accordion 2

            <i class="visual-indicator" be-icon="chevron"></i>
        </label>
        <div id="section-2" class="accordion__body">
            <div class="accordion__overflow">
                <div class="accordion__content">
                    <!-- Accordions content -->
                    Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
                </div>
            </div>
        </div>
    </div>
    <div class="accordion">
        <label class="accordion__header" for="accordion-handler-3">
            <input type="checkbox" id="accordion-handler-3" class="invisible" name="samp-accordion-1" data-accordion-select-handler>
            Accordion 3

            <i class="visual-indicator" be-icon="chevron"></i>
        </label>
        <div id="section-3" class="accordion__body">
            <div class="accordion__overflow">
                <div class="accordion__content">
                    <!-- Accordions content -->
                    Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

                    <br/>
                    Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
                </div>
            </div>
        </div>
    </div>
</div>

Komponen accordions memiliki nilai tinggi baku sebesar 290px, ubah sesuaikan tingginya sesuai keperluanmu.

Untuk menampilkan group accordions secara vertical, tambahkan kelas accordions--vertical, tetapi jika ingin menampilkan accordions dengan tampilan dinamis berdasar ukuran lebar komponen, gunakan kelas bantuan seperti accordions--sm-vertical untuk menampilkan tata letak tegak selama ukuran komponen kurang dari 768px, agar bisa mendapatkan kemampuan dinamis ini, pastikan component accordions ditampung ke elemen dengan properti container-type: inline-size; atau tambahkan kelas container*.

//Must set accordions height

Accordion 7

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

View code

<div class="container">
    <div class="accordions accordions--xs-vertical accordions--vertical-height-auto" style="height: 400px;">
        <div class="accordion">
            <label id="header-7" class="accordion__header" for="accordion-handler-7">
                <input type="radio" id="accordion-handler-7" class="invisible" name="dynamic-accordion" data-accordion-select-handler checked>
                Accordion 7

                <i class="visual-indicator" be-icon="chevron"></i>
            </label>
            <div id="section-7" class="accordion__body">
                <div class="accordion__overflow">
                    <div class="accordion__content">
                        <!-- Accordions content -->
                        Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

                        <br/>
                        Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.


                        <br/>
                        Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
                    </div>
                </div>
            </div>
        </div>
        <div class="accordion">
            <label class="accordion__header" for="accordion-handler-8">
                <input type="radio" id="accordion-handler-8" class="invisible" name="dynamic-accordion" data-accordion-select-handler>
                Accordion 8

                <i class="visual-indicator" be-icon="chevron"></i>
            </label>
            <div id="section-8" class="accordion__body">
                <div class="accordion__overflow">
                    <div class="accordion__content">
                        <!-- Accordions content -->
                        Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
                    </div>
                </div>
            </div>
        </div>
        <div class="accordion">
            <label class="accordion__header" for="accordion-handler-9">
                <input type="radio" id="accordion-handler-9" class="invisible" name="dynamic-accordion" data-accordion-select-handler>
                Accordion 9

                <i class="visual-indicator" be-icon="chevron"></i>
            </label>
            <div id="section-9" class="accordion__body">
                <div class="accordion__overflow">
                    <div class="accordion__content">
                        <!-- Accordions content -->
                        Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.


                        <br/>
                        Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Untuk membuat hanya satu bilah terbuka, ganti elemen <input [type="checkbox"]> dengan <input [type="radio"]> dan pastikan attribute [name="{value}"] memiliki nilai yang sama.

Kelas dan Atribut pendukung

Fungsi tertentu:

accordions--vertical menampilkan secara tegak.
accordions--xs-vertical memberikan tampilan dinamis, tegak jika lebar komponen kurang dari 640px, dan akan mendatar jika lebih luas.
accordions--sm-vertical memberikan tampilan dinamis, tegak jika lebar komponen kurang dari 768px, dan akan mendatar jika lebih luas.
accordions--md-vertical memberikan tampilan dinamis, tegak jika lebar komponen kurang dari 1280px, dan akan mendatar jika lebih luas.
accordions--vertical-height-auto jika ditampilkan dalam posisi tegak, maka pembatas ukuran tinggi komponen akan ditiadakan.

Tabs

Content 1

Content 2

Content 3

View code

<section class="tabs">
    <div class="tabs__nav">
        <label class="tab__nav" for="tab-select-handler1">
            <input type="radio" id="tab-select-handler1" class="invisible" data-tab-select-handler name="tab-handler" checked>
            Tabs 1
        </label>
        <label class="tab__nav" for="tab-select-handler2">
            <input type="radio" id="tab-select-handler2" class="invisible" data-tab-select-handler name="tab-handler">
            Tabs 2
        </label>
        <label class="tab__nav" for="tab-select-handler3">
            <input type="radio" id="tab-select-handler3" class="invisible" data-tab-select-handler name="tab-handler">
            Tabs 3
        </label>
    </div>
    <div class="tabs__content">
        <div id="tab-content1" class="tab__content">
            Content 1
        </div>
        <div id="tab-content2" class="tab__content">
            Content 2
        </div>
        <div id="tab-content3" class="tab__content">
            Content 3
        </div>
    </div>
</section>

BakungCss menyediakan kelas bantuan untuk kelola tab kontrol per komponen sebanyak 15, tetapi jika dibuat fungsi javascript untuk kelola kontrol tabs, tentu batasan yang ada dapat diatasi. Jika menulis fungsi javascript, untuk membuat bilah aktif tambahkan attribute [data-tab-active] pada elemen tab__nav dan tab__content.

Kelas dan Atribut pendukung

Mengubah posisi tampil:

tabs--right mengubah tataletak bilah kendali disebelah kanan.
tabs--bottom mengubah tataletak bilah kendali dibawah.
tabs--left mengubah tataletak bilah kendali disebelah kiri.

Appear

Tampilkan!
You can put appear any where!

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

push right!

1 Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.

View code

<label class="btn" for="appear-1">Display!</label>
<br/>
You can put appear any where!
<div class="appear">
    <input type="checkbox" id="appear-1" class="invisible" data-appear-handler name="appear">
    <div class="appear__overflow">
        <div class="appear__content">
            Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
        </div>
    </div>
</div>

<div style="height: 300px; display: flex;">
    <div class="appear-sibling">
        <label class="btn btn--primary" for="appear-right-expand">
            push right!
        </label>
        <p>
            1 Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
        </p>
    </div>
    <section class="appear appear--right">
        <input type="checkbox" id="appear-right-expand" class="invisible" data-appear-handler name=" appear-right-expand">
        <div class="appear__overflow">
            <div class="appear__content">
                <p>
                    Quia ignea minantia aethera ubi coeperunt temperiemque pondus recessit iunctarum umor subsidere foret militis fronde semine numero nitidis fossae norant modo mixtam nullo orbem mentes carentem haec animus coegit longo totidemque piscibus inmensa ille quam phoebe sinistra secant innabilis vix terram timebat terris ignea circumdare.
                </p>
            </div>
        </div>
    </section>
</div>

Seperti elemen <details> dan <summary>, tetapi komponen appear memiliki fungsi yang lebih baik. Komponen ini bisa digunakan tersendiri, tetapi kelebihannya akan terlihat jika dikelompokkan dengan elemen lain yang ditaruh kedalam sebuah kontainer dengan sistem tata letak berdasar baris atau kolom (contoh: display: flex;).

Komponen appear didesain tidak hanya bersifat statis diantara elemen, tetapi juga melayang tidak mempengaruhi dimensi tata letak elemen lainnya, agar sebuah elemen penampung yang awalnya tak terlihat, kemudian muncul melayang menggeser kedalam halaman, untuk mendapatkan fungsi ini tambahkan kelas appear--offcanvas.

Offcanvas from Right!

A
B
C
D
E

left fix push over.

Ubah ukuran perambanmu!

View code

<label class="btn" for="appear-right-fix">
    Offcanvas from Right!
</label>
<div class="appear appear--offcanvas appear--fix appear--right">
    <input type="checkbox" id="appear-right-fix" class="invisible" data-appear-handler name="appear-right-fix">
    <div class="appear__overflow">
        <div class="appear__content">
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
                <li>E</li>
            </ul>
        </div>
    </div>
    <label class="appear__toggle" for="appear-right-fix"></label>
</div>



<div style="height: 300px; display: flex;">
    <section class="appear appear--left appear--fix appear--vsm-offcanvas">
        <input type="checkbox" id="appear-left" class="invisible" data-appear-handler name="appear-left">
        <div class="appear__overflow">
            <div class="appear__content">
            <nav class="navbar navbar--compact navbar--no-hover navbar--compact-expand">
                    <div class="navbar__brand">
                    <a href="#asd">Brand</a>
                    </div>
                    <ul class="nav">
                        <li class="nav__item">
                            <a href="#asd">menu item 1</a>
                        </li>
                        <li class="nav__item">
                            <a href="#asd">menu item 2</a>

                            <ul class="nav">
                                <li class="nav__item">
                                    <a href="#asd">menu item 2-1</a>
                                </li>
                                <li class="nav__item">
                                    <a href="#asd">menu item 2-2</a>
                                    <ul class="nav">
                                        <li class="nav__item">
                                            <a href="#asd">menu item 2-2-1</a>
                                        </li>
                                        <li class="nav__item">
                                            <a href="#asd">menu item 2-2-2</a>

                                            <ul class="nav">
                                                <li class="nav__item">
                                                    <a href="#asd">menu item 2-2-2-1</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="nav__item">
                                            <a href="#asd">menu item 2-2-3</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="nav__item-line"></li>
                                <li class="nav__item">
                                    <a href="#asd">menu item 2-4</a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav__item">
                            <a href="#asd">menu item 3</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <label class="appear__toggle" for="appear-left"></label>
    </section>
    <div class="appear-sibling">
        <label class="btn btn--primary" for="appear-left">
            left fix push over.
        </label>
        <p>
            Ubah ukuran perambanmu!
        </p>
    </div>
</div>

Jika kamu yakin dengan tinggi atau lebar elemen penampung tidak akan berubah, dan agar animasi meluas lebih halus gunakan ukuran pasti, tambahkan kelas appear--fix.

Dalam kondisi tertentu kamu ingin gabungan efek melayang dan efek mendorong saat ukuran halaman lebih luas, maka ganti appear--offcanvas dengan salah satu kelas dari appear--vsm-offcanvas untuk batasan ukuran halaman hingga 768px, dan appear--vmd-offcanvas untuk batasan ukuran halaman hingga 1280px.

Tata letak elemen penampung berdasar lokasi muncul komponen appear:

//Appear top
<div style="height: 100vh; display: flex; flex-direction: column;">
    <section class="appear">
        <input type="checkbox" id="appear-top" class="invisible" data-appear-handler name="appear-top">
        <div class="appear__overflow">
            <div class="appear__content">
                <!-- Appear content -->
            </div>
        </div>
    </section>
    <div class="appear-sibling">
        <!-- Main content -->
        <label class="btn btn--accent" for="appear-top">
            Appear from top!
        </label>
    </div>
</div>

//Appear right
<div style="height: 100vh; display: flex;">
    <div class="appear-sibling">
        <!-- Main content -->
        <label class="btn btn--accent" for="appear-right">
            Appear from right!
        </label>
    </div>
    <section class="appear appear--right">
        <input type="checkbox" id="appear-right" class="invisible" data-appear-handler name="appear-right">
        <div class="appear__overflow">
            <div class="appear__content">
                <!-- Appear content -->
            </div>
        </div>
    </section>
</div>

//Appear bottom
<div style="height: 100vh; display: flex; flex-direction: column; justify-content: space-between;">
    <div class="appear-sibling">
        <!-- Main content -->
        <label class="btn btn--accent" for="appear-bottom">
            Appear from bottom!
        </label>
    </div>
    <section class="appear appear--bottom">
        <input type="checkbox" id="appear-bottom" class="invisible" data-appear-handler name="appear-bottom">
        <div class="appear__overflow">
            <div class="appear__content">
                <!-- Appear content -->
            </div>
        </div>
    </section>
</div>

//Appear left
<div style="height: 100vh; display: flex;">
    <section class="appear appear--left">
        <input type="checkbox" id="appear-left" class="invisible" data-appear-handler name="appear-left">
        <div class="appear__overflow">
            <div class="appear__content">
                <!-- Appear content -->
            </div>
        </div>
    </section>
    <div class="appear-sibling">
        <!-- Main content -->
        <label class="btn btn--accent" for="appear-left">
            Appear from left!
        </label>
    </div>
</div>

Kelas dan Atribut pendukung

Mengubah posisi tampil:

appear--right posisi tampil dari kanan.
appear--bottom posisi tampil dari bawah.
appear--left posisi tampil dari kiri.

Mengubah tampilan:

appear--fix untuk membuat komponen appear memiliki ukuran pasti, beri ukuran yang diinginkan melalui variable css --appear-size.
appear--no-backdrop menghilangkan latar belakang dan membuat halaman bisa digulung.
appear--offcanvas membuat komponen appear awalnya tak terlihat, kemudian muncul melayang menggeser kedalam halaman.
appear--vsm-offcanvas membuat komponen appear melayang jika ukuran halaman kurang dari 768px, dan mendorong saat lebih luas.
appear--vmd-offcanvas membuat komponen appear melayang jika ukuran halaman kurang dari 1280px, dan mendorong saat lebih luas.
appear-sibling kelas ini untuk diterapkan ke elemen kontainer, saudara dari komponen appear.

Color

BAKUNG CSS Bangun di desktop mentarget perangkat lebih kecil

Memulai

Breakpoints

Warna-warna

Button

Button

Kelas dan Atribut pendukung

Avatar

Avatar

Kelas dan Atribut pendukung

Badge & Chip (Pill & Tag)

Badge

Kelas dan Atribut pendukung

Chip(Pill & Tag)

Checkbox & Radio option

Removeable

Switchable

Kelas dan Atribut pendukung

Toggle

Kelas dan Atribut pendukung

Divider

Divider

Kelas dan Atribut pendukung

Tooltip

Tooltip

Kelas dan Atribut pendukung

Popper

Popper

Kelas dan Atribut pendukung

Steps

Steps

Kelas dan Atribut pendukung

Navigation

Navbar

Kelas dan Atribut pendukung

Breadcrumb

Kelas dan Atribut pendukung

Dialog

Dialog

Kelas dan Atribut pendukung

Notice & Notify

Notice

Kelas dan Atribut pendukung

Notice-Notify

Container

Container

Row & Column

Group

Group

Kelas dan Atribut pendukung

Form

Form Control

Kelas dan Atribut pendukung

Layout

Validation

Kelas dan Atribut pendukung

Panel

Panel

Floater

Floater

Kelas dan Atribut pendukung

Cards

Card

Some teks for title inside card__body Some teks for sub title

Cards

Cards Scrollable

Kelas dan Atribut pendukung

Slide

Slide

Kelas dan Atribut pendukung

Accordions

Accordions

Kelas dan Atribut pendukung

Tabs

Tabs

Kelas dan Atribut pendukung

Appear

Appear

Kelas dan Atribut pendukung

BAKUNG CSS
Bangun di desktop mentarget perangkat lebih kecil

Some teks for title inside card__body
Some teks for sub title