Entity Header

Glassy header component for entity detail pages (Offers, Properties, Units). Displays thumbnail, title, metadata, status indicator, and summary statistics. Designed for signed-in app pages with glassy background.

With Image Placeholder Active Inactive Long Title

📐 Context & Usage

Context: Glassy signed-in app pages (Offer Edit, Property View, Unit Details).
Purpose: Summarize entity information at the top of detail/edit pages.

This component reuses existing DS patterns: content-container-app glassy styling, .badge variants, and DS typography classes (.t-lead, .t-small, .t-muted).

🎯 Design Intent

Entity Header provides at-a-glance information about offers, properties, or units.

1. Entity Header – With Image (Active)

Standard variant with thumbnail image and Active status. Use for offers that have uploaded images and are currently published/active.

1.1 Live Preview (Glassy Context)

Glassy Context (Signed-in App)
Offer thumbnail

Summer Weekend Getaway

OFF-2024-001

Property: Azyl na 13

Active
🏠 2 Units 🪟 3 Windows 🎁 5 Extras

1.2 HTML Snippet

HTML 
<div class="entity-header">
  <!-- Media: Thumbnail + Content -->
  <div class="entity-header__media">
    <div class="entity-header__thumbnail">
      <img src="/assets/images/hero-01.webp" alt="Offer thumbnail" />
    </div>
    <div class="entity-header__content">
      <div class="entity-header__title-row">
        <h2 class="entity-header__title t-lead">Summer Weekend Getaway</h2>
        <span class="badge badge--outline">OFF-2024-001</span>
      </div>
      <p class="entity-header__meta t-small t-muted">Property: Azyl na 13</p>
    </div>
  </div>

  <!-- Aside: Status + Stats (uses DS .badge-group) -->
  <div class="entity-header__aside">
    <div class="entity-header__status entity-header__status--active">
      <span class="entity-header__status-icon"></span>
      <span>Active</span>
    </div>
    <div class="badge-group">
      <span class="badge badge--muted">🏠 2 Units</span>
      <span class="badge badge--muted">🪟 3 Windows</span>
      <span class="badge badge--muted">🎁 5 Extras</span>
    </div>
  </div>
</div>

2. Entity Header – Placeholder (Inactive)

Variant with placeholder icon when no image is uploaded, and Inactive status. Use for draft offers or unpublished entities.

2.1 Live Preview (Glassy Context)

Glassy Context (Signed-in App)
🏡

Winter Holiday Package

OFF-2024-002

Property: Kampinos Retreat

Inactive
🏠 1 Unit 🪟 2 Windows 🎁 3 Extras

2.2 HTML Snippet

HTML 
<div class="entity-header">
  <!-- Media: Placeholder + Content -->
  <div class="entity-header__media">
    <div class="entity-header__thumbnail">
      <div class="entity-header__thumbnail-placeholder">🏡</div>
    </div>
    <div class="entity-header__content">
      <div class="entity-header__title-row">
        <h2 class="entity-header__title t-lead">Winter Holiday Package</h2>
        <span class="badge badge--outline">OFF-2024-002</span>
      </div>
      <p class="entity-header__meta t-small t-muted">Property: Kampinos Retreat</p>
    </div>
  </div>

  <!-- Aside: Status + Stats (uses DS .badge-group) -->
  <div class="entity-header__aside">
    <div class="entity-header__status entity-header__status--inactive">
      <span class="entity-header__status-icon"></span>
      <span>Inactive</span>
    </div>
    <div class="badge-group">
      <span class="badge badge--muted">🏠 1 Unit</span>
      <span class="badge badge--muted">🪟 2 Windows</span>
      <span class="badge badge--muted">🎁 3 Extras</span>
    </div>
  </div>
</div>

3. Entity Header – Long Title Handling

Demonstrates text wrapping behavior with long entity titles. Title wraps naturally to maintain readability without truncation.

3.1 Live Preview (Glassy Context)

Glassy Context (Signed-in App)
Offer thumbnail

Extended Family Vacation Package with All-Inclusive Amenities and Pet-Friendly Accommodations

OFF-2024-003

Property: Nature Retreat Complex

Active
🏠 4 Units 🪟 6 Windows 🎁 12 Extras

3.2 HTML Snippet

HTML 
<div class="entity-header">
  <!-- Media: Thumbnail + Content -->
  <div class="entity-header__media">
    <div class="entity-header__thumbnail">
      <img src="/assets/images/hero-01.webp" alt="Offer thumbnail" />
    </div>
    <div class="entity-header__content">
      <div class="entity-header__title-row">
        <h2 class="entity-header__title t-lead">Extended Family Vacation Package with All-Inclusive Amenities and Pet-Friendly Accommodations</h2>
        <span class="badge badge--outline">OFF-2024-003</span>
      </div>
      <p class="entity-header__meta t-small t-muted">Property: Nature Retreat Complex</p>
    </div>
  </div>

  <!-- Aside: Status + Stats (uses DS .badge-group) -->
  <div class="entity-header__aside">
    <div class="entity-header__status entity-header__status--active">
      <span class="entity-header__status-icon"></span>
      <span>Active</span>
    </div>
    <div class="badge-group">
      <span class="badge badge--muted">🏠 4 Units</span>
      <span class="badge badge--muted">🪟 6 Windows</span>
      <span class="badge badge--muted">🎁 12 Extras</span>
    </div>
  </div>
</div>

Usage Guidelines

✅ Do

  • • Use at the top of entity detail/edit pages (Offers, Properties, Units)
  • • Show thumbnail image when available, fallback to emoji/icon placeholder
  • • Include identifying code/ID badge next to title
  • • Display parent entity context in metadata (e.g., property name for offer)
  • • Use Active/Inactive status to indicate publication state
  • • Show relevant stats badges (Units, Windows, Extras, etc.)
  • • Ensure thumbnail has descriptive alt text for accessibility
  • • Let long titles wrap naturally (don't truncate with ellipsis)

❌ Don't

  • • Don't use on non-glassy standard pages (this is designed for signed-in app)
  • • Don't add too many stat badges (max 4-5 for visual balance)
  • • Don't use large images that break the 80×80px container
  • • Don't omit status indicator (always show Active/Inactive)
  • • Don't use custom CSS – component styles are inline for DS preview only
  • • Don't invent new badge variants – use existing DS badge classes
  • • Don't make clickable without clear affordance (add hover state if needed)

⚠️ Layering Contract

Entity Header styles are shown inline in this DS preview. In production, extract to a dedicated CSS file (e.g., /assets/css/entity-header.css) or include in app-shell styles. Do not re-style locally. If you need new variants or behavior, extend the Design System component definition instead of overriding in page CSS.

♿ Accessibility Requirements

  • • Thumbnail alt text: Descriptive text for images (e.g., "Summer getaway offer thumbnail")
  • • Status label: Text label for screen readers, not icon-only
  • • Semantic HTML: Use <h2> for title (maintain heading hierarchy)
  • • Color contrast: Status colors meet WCAG AA standards on glassy background
  • • Keyboard navigation: If interactive elements added, ensure tab order makes sense

🔧 Implementation Notes

  • • CSS Location: Component styles shown inline for DS preview. In production, extract to dedicated CSS file or include in app-shell styles.
  • • Glassy styling: Reuses content-container-app pattern (backdrop-filter, rgba backgrounds).
  • • Typography: Uses DS classes: .t-lead for title, .t-small and .t-muted for metadata.
  • • Badges: Uses existing DS .badge--muted and .badge--outline classes.
  • • Responsive: Stacks vertically on mobile (<768px), status/stats row horizontally on tablet/desktop.
  • • Thumbnail: 80×80px default, 64×64px on mobile. Use object-fit: cover for images.
  • • Status colors: Green for Active (rgba(34, 197, 94)), Red for Inactive (rgba(239, 68, 68)).

CSS Location

Entity Header component styles are currently inline in this DS preview:

/assets/ui/collections/entity-header.html (lines 21-195)

Production recommendation: Extract to /assets/css/entity-header.css or include in app-shell stylesheet.

Includes: Glassy container layout, media object pattern (thumbnail + content), status indicator variants (active/inactive), aside section, responsive behavior (mobile stacking), and integration with DS badge and typography classes.

Dependencies: /assets/css/badge.css (badge-group, badge--muted, badge--outline), /assets/css/typography.css (t-lead, t-small, t-muted).

Related Documentation

Content Container (App)

Glassy container pattern for signed-in app pages

Badge

Badge variants for code IDs and summary statistics

Typography

Text sizing and color classes for title and metadata

App Shell (Signed-in)

Complete layout context for glassy components

Cards

Media object pattern used in entity header layout

Action Tile (Compact)

Similar glassy component for CRUD entry points