UI Components Documentation
1. Code Box
<pre class="css"><code>.post-body pre {
background-color: #333;
border-left: 5px solid #009688;
padding: 0;
margin: .5em auto;
}</code><i class="copy"></i></pre>
This component provides a styled code box with a dark background and a left border.
2. Buttons
<button class="download">Download</button>
<button class="demo">Demo</button>
These buttons provide download and demo actions.
3. Warning Box
<div class="box">Box default</div>
<div class="box blue">Box default</div>
<div class="box red">Box default</div>
These boxes display different warnings or messages with default, blue, and red styles.
4. Gallery (Carousel)
<div class="gallery carousel">
<div class="carousel-outer r">
<div class="carousel-inner">
<img src="image1.jpg" width="316">
<img src="image2.jpg" width="316">
<img src="image3.jpg" width="316">
<img src="image4.jpg" width="316">
</div>
<div class="carousel-tx tx-sm round f a"><i>2</i>/4</div>
<div class="carousel-dot f a">
<span class="dot round"></span>
<span class="dot round active"></span>
<span class="dot round"></span>
<span class="dot round"></span>
</div>
</div>
<div class="caption">Additional caption text</div>
</div>
A carousel-style image gallery.
5. Side Gallery
<div class="gallery swipe">
<div class="swipe-inner">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>
<div class="caption">Additional caption text</div>
</div>
A swipeable gallery.
6. Tab Posts
<div class="tabs">
<div class="arrow prev pointer a">❮</div>
<div class="arrow next pointer a active">❯</div>
<ul>
<li class="current">First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
<li>Fourth Tab</li>
</ul>
<div class="content visible">Content of the first tab (1st).</div>
<div class="content">Content of the second tab (2nd).</div>
<div class="content">Content of the third tab (3rd).</div>
<div class="content">Content of the fourth tab (4th).</div>
</div>
A tabbed content switcher.
7. Accordion
<details class="accordion" open="open">
<summary>Accordion Open By Default</summary>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</details>
An expandable/collapsible accordion.
8. Spoiler Text
<details class="spoiler">
<summary>Spoiler</summary>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</details>
A hidden text reveal component.