Content Container (App)

Main content panel for signed-in app pages. Glassy floating container with user welcome header and flexible content area. Pairs with Sidebar (App) to create complete application layout.

Glassy Panel Responsive Width

🏠 Shell App (Glassy) Variant

Content container optimized for signed-in application UI with dark/glassy surfaces. Automatically activated inside .app-shell scope. Pairs with Sidebar (App) for complete layout.

Live Preview - Content Container

Glassy content panel with header and content area. Displays user welcome message and flexible content space.

Welcome Janina

Your Dashboard

Shell App Typography uses Inter sans-serif exclusively for modern, readable product UI on glassy backgrounds.

Typography Demonstration

This content area demonstrates all typography styles working together. Notice the softer colors and comfortable spacing.

The .app-shell scope ensures consistent typography across all signed-in application interfaces.

Scrollable Content

The content area is scrollable when content exceeds the container height.

All typography inherits from .app-shell scope automatically.

Complete App Layout Reference

For the complete signed-in application layout with Sidebar + Content Container working together, see App Shell (Signed-in).

HTML Snippet

Copy-ready HTML for the content container. Replace dynamic content (user name) but keep CSS classes intact.

HTML Snippet 
<!-- Content Container (App) -->
<div class="content-container-app">
  <!-- Header -->
  <div class="content-container-app__header">
    <h1 class="t-h1">Welcome <?= htmlspecialchars($user['first_name']) ?></h1>
  </div>

  <!-- Content Area -->
  <div class="content-container-app__content">
    <!-- Your page content goes here -->
    <p class="t-body">Active feature content...</p>
  </div>
</div>

Usage Guidelines

✅ Do

  • • Use for main content area in all signed-in pages
  • • Pair with Sidebar (App) for complete layout
  • • Customize header with user name or page title
  • • Use Typography Element classes (.t-h1, .t-body, .t-small)
  • • Keep glassy styling consistent with Sidebar background
  • • Enable overflow-y: auto for scrollable content

❌ Don't

  • • Don't use on public/guest-only pages
  • • Don't override glassy panel styling or colors
  • • Don't remove or modify the header separator line
  • • Don't use without proper glassy background context (.app-shell)
  • • Don't hardcode user names—use PHP variables with htmlspecialchars()
  • • Don't place navigation inside content area (use Sidebar)

CSS Location

Content Container styles are defined in:

/assets/css/content-container-app.css

Includes: Layout structure, header separator styling, content area scrolling behavior, responsive spacing, dark mode support, and integration with .app-shell glassy surfaces.

Related Documentation

Sidebar (App)

Collapsible app navigation

App Shell (Signed-in)

Complete layout with Sidebar + Container

Typography

Text styles and hierarchy