Panel New!

A versatile block to build menus and selections.


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.

Using panels

Base

As mentioned above, panels are modular. To start the base of a panel:

<div class="panel">
  ...
</div>

Panel items

Magic has many panel items available, but each shares the class panel-item.

Title

To add a title item:

Title

Small Title

<div class="panel">
  <h1 class="panel-title panel-item">Title</h1>
  <h1 class="panel-title panel-title-small panel-item">Small Title</h1>
</div>

Inputs

Panels also support inputs without additional syntax:

Title

<div class="panel">
  ...
  <div class="panel-item">
    <input type="text" placeholder="Search followers...">
  </div>
</div>

Tabs

Panels also support a tab selection system. Please note that no JavaScript is included with Magic, so you'll have to add functionality manually:

Title

<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>

Lists

Panels also support neat lists of clickable items. This is particularly useful for a list of similar UI items, such as followers or repositories.

Title

<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>

Buttons

Similarly to inputs, buttons can be added easily with no additional markup.

Title

<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>

Usage

We recommend that panels are used similarly to the way they are used on Github (in a column structure spanning the whole page):

Page content (e.g. user feed)

Repositories you contribute to 3

More panels