Panels - Components - Spectre.css CSS Framework
Author: Yan Zhu
Description: Panels are flexible view container with auto-expand content section. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Panels#

Panels are flexible view container with auto-expand content section.

Bruce Banner
THE HULK
E-mail
bruce.banner@hulk.com
Skype
bruce.banner
Location
Dayton, Ohio
Comments

Thor Odinson

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

Bruce Banner

The Strategic Homeland Intervention, Enforcement, and Logistics Division...

Tony Stark

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

Steve Rogers

The Strategic Homeland Intervention, Enforcement, and Logistics Division...

Natasha Romanoff

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

Add a container element with the `panel` class. And add child elements with the `panel-header`, `panel-nav`, `panel-body` and/or `panel-footer` classes. The `panel-body` can be auto expanded and vertically scrollable.

    <div class="panel">
      <div class="panel-header">
        <div class="panel-title">Comments</div>
      </div>
      <div class="panel-nav">
        <!-- navigation components: tabs, breadcrumbs or pagination -->
      </div>
      <div class="panel-body">
        <!-- contents -->
      </div>
      <div class="panel-footer">
        <!-- buttons or inputs -->
      </div>
    </div>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.