Panels

Secction Header

Basic panel example.

Header

Basic panel example.


Panel Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Black

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Info

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Royal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

<div class="panel panel-default">
    <div class="panel-body">
        ...
    </div>
</div>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">...</h3>
    </div>
    <div class="panel-body">
        ...
    </div>
    <div class="panel-footer">
        ...
    </div>
</div>

<hr class="dotted">

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">...</h3>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>

<div class="panel panel-black">
    <div class="panel-heading">
        <h3 class="panel-title">...</h3>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">...</h3>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>

<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">...</h3>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>

<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">...</h3>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>

<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">...</h3>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>

<div class="panel panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">...</h3>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>

<div class="panel panel-royal">
    <div class="panel-heading">
        <h3 class="panel-title">...</h3>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>

Dark Panels

Panel Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Black

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Info

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

Panel Royal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iure, iusto, rerum molestias odio cumque itaque aut, quos aliquam cum voluptatibus, expedita! Expedita incidunt, architecto excepturi animi aut facilis possimus.

<div class="panel panel-dark panel-default">
    ...
</div>

<div class="panel panel-dark panel-black">
    ...
</div>

<div class="panel panel-dark panel-primary">
    ...
</div>

<div class="panel panel-dark panel-info">
    ...
</div>

<div class="panel panel-dark panel-success">
    ...
</div>

<div class="panel panel-dark panel-warning">
    ...
</div>

<div class="panel panel-dark panel-danger">
    ...
</div>

<div class="panel panel-dark panel-royal">
    ...
</div>

MaterialStyle

Social Links