nodes-ui/doc/pages/components/panels/panel-basics.html

UI Components for Nodes Backends

---
title: Panel Basics
layout: nested-component.html
---
<h1 class="docs--page-header">
    Panel Basics
</h1>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">

            <div class="panel panel-info panel-callout">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel Title</h3>
                </div>
                <div class="panel-body">
                    <article>
                        <h4>Panel with article</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis corporis labore molestiae nobis numquam possimus, quasi ut? Id, ipsa.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis corporis labore molestiae nobis numquam possimus, quasi ut? Id, ipsa.</p>
                    </article>
                </div>
                <div class="panel-footer">Panel footer</div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel Title</h3>
                </div>
                <div class="panel-body">
                    <article>
                        <h4>Panel with article</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis corporis labore molestiae nobis numquam possimus, quasi ut? Id, ipsa.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis corporis labore molestiae nobis numquam possimus, quasi ut? Id, ipsa.</p>
                    </article>
                </div>
                <div class="panel-footer">Panel footer</div>
            </div>

        </div>

        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    The most basic panel
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-body panel-body-collapse">
                    Panel with collapsed panel-body
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">Panel content</div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel Title</h3>
                </div>
                <div class="panel-body">Panel content</div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-body">Panel content</div>
                <div class="panel-footer">Panel footer</div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel Title</h3>
                </div>
                <div class="panel-body">Panel content</div>
                <div class="panel-footer">Panel footer</div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel Title</h3>
                </div>
                <div class="panel-body">
                    <article>
                        <h4>Panel with article</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis corporis labore molestiae nobis numquam possimus, quasi ut? Id, ipsa.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis corporis labore molestiae nobis numquam possimus, quasi ut? Id, ipsa.</p>
                    </article>
                </div>
                <div class="panel-footer">Panel footer</div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel Title
                        <small>Panel description inline</small>
                    </h3>
                </div>
                <div class="panel-body">
                    <article>
                        <h4>Panel with article</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis corporis labore molestiae nobis numquam possimus, quasi ut? Id, ipsa.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis corporis labore molestiae nobis numquam possimus, quasi ut? Id, ipsa.</p>
                    </article>
                </div>
                <div class="panel-footer">Panel footer</div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel Title
                    </h3>
                    <span class="panel-description">Panel description newline</span>
                </div>
                <div class="panel-body">
                    <article>
                        <h4>Panel with article</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis corporis labore molestiae nobis numquam possimus, quasi ut? Id, ipsa.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis corporis labore molestiae nobis numquam possimus, quasi ut? Id, ipsa.</p>
                    </article>
                </div>
                <div class="panel-footer">Panel footer</div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel Title
                        <span class="label label-info">New</span>
                    </h3>
                </div>
                <div class="panel-body">Panel with label</div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-user"></i>
                        Panel Title
                    </h3>
                </div>
                <div class="panel-body">Panel with icon</div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <ul class="panel-actions">
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li>
                            <a href="#">Link</a>
                        </li>
                    </ul>
                    <h3 class="panel-title">
                        Panel Title
                    </h3>
                </div>
                <div class="panel-body">Panel with actions</div>
            </div>
        </div>
    </div>
</div>