Reusable, declarative UI components. Amazing for cleaning up codebases of ugly single page applications.
An expandable element. Great for FAQs.
<div class="expand-collapse">
<div class="title">What is my favorite sport?</div>
<div class="body">HTML?</div>
</div>
Extends Expand + Collapse. An expandable element, but only one sibling can be opened at a time.
<div class="accordion">
<div class="title">Section One</div>
<div class="body">This is the first section. Only one section should be open at a time.</div>
</div>
Use an input to filter a list of things. Filter its parent by default.
<div>
<input type="text" filterable="true" placeholder="Type something to filter the list below.">
<ul>
<li>List 1</li>
<li>List J</li>
<li>List G</li>
</ul>
</div>
Sidebar, Off-canvas menu, etc.
<div sidebar>
<h4>Section 1</h4>
</div>