Panels

The panel component acts as a structured container block for grouping content. Panels support multiple semantic color variants for borders and headers by applying modifier classes like primary, success, warning, etc.

This is a standard default panel. It features a neutral border and header style suitable for most generic content blocks.

This panel uses the primary class modifier. It highlights the border and header using the primary theme color.

This panel uses the success class modifier. It is perfect for positive status updates, completion messages, or success logs.

This panel uses the info class modifier. It highlights neutral information, helper tips, or reference context.

This panel uses the warning class modifier. It signals items that require user attention or caution flags.

This panel uses the alert class modifier. It represents errors, critical alerts, or dangerous actions.

<!-- Default Panel -->
<div data-role="panel" data-title-caption="Default Panel">
    <div class="panel-content">Content</div>
</div>

<!-- Primary Colored Panel -->
<div data-role="panel" class="primary" data-title-caption="Primary Panel">
    <div class="panel-content">Content</div>
</div>

<!-- Success Colored Panel -->
<div data-role="panel" class="success" data-title-caption="Success Panel">
    <div class="panel-content">Content</div>
</div>

<!-- Warning Colored Panel -->
<div data-role="panel" class="warning" data-title-caption="Warning Panel">
    <div class="panel-content">Content</div>
</div>

<!-- Alert Colored Panel -->
<div data-role="panel" class="alert" data-title-caption="Alert Panel">
    <div class="panel-content">Content</div>
</div>

<!-- Info Colored Panel -->
<div data-role="panel" class="info" data-title-caption="Info Panel">
    <div class="panel-content">Content</div>
</div>