Artificial Reason WP

Basic Panel

Basic panel example

Show Code

<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>

Panel with heading

Panel heading without title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, qui veritatis excepturi vel aperiam neque quisquam iste accusantium totam similique officia repellat ullam dolore nihil dignissimos magni nostrum. Aperiam, sed, consectetur corporis mollitia aliquam nemo esse laboriosam modi impedit ullam assumenda veritatis voluptate quam aut illo nostrum temporibus architecto dolores deleniti tenetur at saepe quod repudiandae natus odit molestiae eveniet.

Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, sapiente, optio eius earum neque iure porro! Magni, ut, culpa rerum corrupti obcaecati quae quis magnam facere placeat aspernatur consequuntur neque inventore explicabo praesentium quibusdam? Quas voluptate nostrum similique quis sapiente modi suscipit aliquam quibusdam. Corrupti, rerum, quis, ab, tempore voluptate praesentium beatae optio tempora blanditiis aliquam repellendus porro consequatur dolorum.

Show Code

<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>

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

Panel with footer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, libero soluta ullam aut ad neque excepturi expedita commodi ipsum itaque quam inventore accusantium delectus iusto laboriosam sapiente vero amet quas cupiditate quibusdam incidunt nam earum non ea recusandae reiciendis dolore iure porro facilis esse nostrum assumenda adipisci distinctio. Maiores, consequatur autem laborum soluta alias atque quos deserunt sapiente veritatis temporibus!

Panel footer

Show Code

<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>

Contextual alternatives

Panel heading without title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, id hic fuga dignissimos quisquam sapiente voluptates aliquid ratione quaerat facilis.

Panel heading without title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, ullam dolorum tenetur aperiam labore quia quos nam magnam libero quidem.

Panel heading without title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis illo nulla cum numquam dolor! Porro, dolores quibusdam doloremque nulla amet.

Panel heading without title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, numquam voluptate nihil tenetur soluta recusandae mollitia ullam cumque doloremque quae.

Panel heading without title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, ullam cupiditate corrupti perferendis ab at id voluptate beatae nisi natus.

Panel heading without title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, ullam cupiditate corrupti perferendis ab at id voluptate beatae nisi natus.

Show Code

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Dark Contextual alternatives

Panel heading without title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, id hic fuga dignissimos quisquam sapiente voluptates aliquid ratione quaerat facilis.

Panel heading without title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, ullam dolorum tenetur aperiam labore quia quos nam magnam libero quidem.

Panel heading without title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis illo nulla cum numquam dolor! Porro, dolores quibusdam doloremque nulla amet.

Panel heading without title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, numquam voluptate nihil tenetur soluta recusandae mollitia ullam cumque doloremque quae.

Panel heading without title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, ullam cupiditate corrupti perferendis ab at id voluptate beatae nisi natus.

Panel heading without title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, ullam cupiditate corrupti perferendis ab at id voluptate beatae nisi natus.

Show Code

<div class="panel panel-primary-dark">...</div>
<div class="panel panel-success-dark">...</div>
<div class="panel panel-info-dark">...</div>
<div class="panel panel-warning-dark">...</div>
<div class="panel panel-danger-dark">...</div>

Special Panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, cupiditate, fuga, delectus laborum illum nulla necessitatibus vero earum sint cum asperiores qui repudiandae aspernatur dolor maxime dignissimos dolores reiciendis explicabo inventore et minima nam labore itaque sapiente similique fugit quae eum quibusdam obcaecati saepe voluptates cumque alias consectetur atque animi!