Containers — Interplanetary UI

Window

Classic TUI container with sharp 1px borders. Supports minimize via data-minimizable.

Window Title

Window content goes here. Click header to minimize.

Code

<div class="ip-window" data-minimizable>
  <div class="ip-window-header">
    <span>Window Title</span>
    <button class="ip-btn-icon"><span class="ip-btn-icon-content">_</span></button>
  </div>
  <div class="ip-window-body">
    <p>Window content goes here.</p>
  </div>
</div>

Panel

Modern minimal container with sharp borders. Supports minimize.

Panel Title

Panel content goes here. Click header to minimize.

Code

<div class="ip-panel" data-minimizable>
  <div class="ip-panel-header">
    <span>Panel Title</span>
    <button class="ip-btn-icon"><span class="ip-btn-icon-content">_</span></button>
  </div>
  <div class="ip-panel-body">
    <p>Panel content goes here.</p>
  </div>
</div>

Frame

Centered header container. Static, no minimize.

Frame Title

Frame content goes here. Centered header for emphasis.

Code

<div class="ip-frame">
  <div class="ip-frame-header"><span>Frame Title</span></div>
  <div class="ip-frame-body">
    <p>Frame content goes here.</p>
  </div>
</div>

Section

No chrome. Just a padded container with large display font header.

Section Title

Section content with minimal visual footprint.

Code

<div class="ip-section">
  <div class="ip-section-header">Section Title</div>
  <div class="ip-section-body">
    <p>Section content goes here.</p>
  </div>
</div>

Modifiers

Add visual variants to containers.

.ip-rounded

6px border radius

.ip-filled

Inverted header colors

.ip-filled.ip-rounded

Combined modifiers

.ip-rounded

Rounded frame

Code

<!-- Rounded corners -->
<div class="ip-window ip-rounded">...</div>

<!-- Filled/inverted header -->
<div class="ip-window ip-filled">...</div>

<!-- Combined -->
<div class="ip-panel ip-filled ip-rounded">...</div>

Behaviors

Interactive features via data attributes.

Scrollable + Copyable

Line 1: System log entry
Line 2: Another log entry
Line 3: More content here
Line 4: Scrollable content
Line 5: Keep scrolling
Line 6: Last entry

Code

<!-- Scrollable with max-height -->
<div class="ip-panel ip-scrollable max-h-32" data-minimizable data-copyable>
  <div class="ip-panel-header">
    <span>Title</span>
    <div class="flex gap-1">
      <button class="ip-btn-icon" data-action="copy">
        <span class="ip-btn-icon-content">□</span>
      </button>
      <button class="ip-btn-icon">
        <span class="ip-btn-icon-content">_</span>
      </button>
    </div>
  </div>
  <div class="ip-panel-body">Scrollable content</div>
</div>

Required Scripts:

window.js — for data-minimizable
actions.js — for data-copyable

Card Pattern

Build cards by composing containers with content utilities. Works with any container type.

Category

Card Title

Description text goes here.

Action →

With Controls

Window Card

Minimizable card variant.

Rounded Frame

Styled Card

Centered header with rounded corners.

Filled Header

Inverted Style

Filled modifier for emphasis.

Learn More →

Code

<div class="ip-panel">
  <div class="ip-panel-header">Category</div>
  <div class="ip-panel-body">
    <div class="ip-title">Card Title</div>
    <p class="text-secondary mt-1">Description text.</p>
  </div>
  <div class="ip-panel-footer ip-action-group">
    <a href="..." class="ip-action">Action →</a>
  </div>
</div>

<!-- Multiple actions -->
<div class="ip-panel-footer ip-action-group">
  <a href="..." class="ip-action">Details</a>
  <a href="..." class="ip-action">Preview</a>
</div>

Card Utilities:

.ip-title — Accent-colored uppercase heading
.ip-action-group — Flush footer button group
.ip-action — Individual action link