Preview

Container component for displaying live component demos and full page previews with optional code blocks.

Component Demo

Use .focus-preview with .focus-preview-content for component demonstrations. Add a .focus-code block to show the source code.

<button class="focus-btn focus-btn-primary">Primary Button</button>
<button class="focus-btn focus-btn-success">Success Button</button>
<span class="focus-badge focus-badge-danger">New</span>

<div class="focus-preview">
  <div class="focus-preview-content">
    <!-- Your component demo -->
  </div>
  <div class="focus-code">
    <!-- Code block -->
  </div>
</div>

Preview Without Code

Omit the .focus-code block to show only the live preview.

<div class="focus-preview">
  <div class="focus-preview-content">
    <!-- Your component demo -->
  </div>
</div>

Preview with Header

Add .focus-preview-header for a title bar above the preview content. Perfect for full page previews or when you need to add context.

<div class="focus-preview">
  <div class="focus-preview-header">
    <i class="fa fa-desktop"></i> Interactive Form Preview
  </div>
  <div class="focus-preview-content">
    <!-- Your content -->
  </div>
</div>

Full Page Preview

For full page templates, use the header and remove padding from content with inline styles.

<div class="focus-preview">
  <div class="focus-preview-header">
    <i class="fa fa-desktop"></i> Dashboard Layout - Fully Interactive
  </div>
  <div class="focus-preview-content" style="padding: 0;">
    <!-- Full page template -->
  </div>
</div>

Common Use Cases

• Component Documentation: Show live component with source code below
• Full Page Previews: Display complete page layouts with header describing the preview
• Interactive Demos: Create clickable, interactive component demonstrations
• Before/After Comparisons: Show multiple preview blocks for comparison
• Design System Showcases: Display components in context with explanatory headers

CSS Classes Reference