Many modern websites have selection menus or other similar items - these can be easily made with our Panel class.
Magic Panels are modular block structures that fill the width of their container. They consist of panel-item blocks, which can contain a variety of items, some of which are demonstrated to the right.above. They can be arranged in any order, and will automatically adapt to the items around them. Panels are typically not used as full-width elements, but are instead placed as columns into full-page row structures.
As mentioned above, panels are modular. To start the base of a panel:
<div class="panel">
...
</div>
Magic has many panel items available, but each shares the class panel-item.
To add a title item:
<div class="panel">
<h1 class="panel-title panel-item">Title</h1>
<h1 class="panel-title panel-title-small panel-item">Small Title</h1>
</div>
Panels also support inputs without additional syntax:
<div class="panel">
...
<div class="panel-item">
<input type="text" placeholder="Search followers...">
</div>
</div>
Panels also support a tab selection system. Please note that no JavaScript is included with Magic, so you'll have to add functionality manually:
<div class="panel">
...
<div class="panel-item panel-tabs">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#" class="active">Item 3 (active)</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</div>
</div>
Panels also support neat lists of clickable items. This is particularly useful for a list of similar UI items, such as followers or repositories.
<div class="panel">
...
<div class="panel-item panel-list">
<a href="#">Item 1</a>
<a href="#" class="active">Item 2 (active)</a>
<a href="#"><i class="fas fa-book panel-list-icon"></i> Item 3 (with icon)</a>
<a href="#" class="active"><i class="fas fa-book panel-list-icon"></i> Item 3 (with icon + active)</a>
</div>
</div>
Similarly to inputs, buttons can be added easily with no additional markup.
<div class="panel">
...
<div class="panel-item">
<button class="btn btn-blue btn-outline btn-fluid">Fluid button</button>
</div>
<div class="panel-item">
<button class="btn btn-blue btn-outline">Regular button</button>
</div>
</div>
We recommend that panels are used similarly to the way they are used on Github (in a column structure spanning the whole page):