Info Page

Provides a structured layout to display instructional content, messages, or status information, such as empty states or error notifications. Info Pages combine text, imagery, and optional actions to clearly communicate context to the user.

Usage

Use Info Pages to guide users, explain empty states, or report errors in a visually distinct and informative way. Include clear messaging and actionable steps when appropriate, and avoid overloading the page with unnecessary details.

API Reference

Component attribute(s)

x-h-info-page
x-h-info-page-header
x-h-info-page-media
x-h-info-page-title
x-h-info-page-description
x-h-info-page-content

Modifiers

x-h-info-page-media

Modifier	Description
icon	Applies styles for inline svg icons. Do not activate when using an img tag.

Data Slots

Slot	Element
info-page	x-h-info-page
info-page-header	x-h-info-page-header
info-page-media	x-h-info-page-media
info-page-title	x-h-info-page-title
info-page-description	x-h-info-page-description
info-page-content	x-h-info-page-content

Examples

With inline SVG icon

<div x-h-info-page>
  <div x-h-info-page-header>
    <div x-h-info-page-media.icon>
      <svg x-h-lucide role="img" aria-label="Project icon" data-lucide="folder"></svg>
    </div>
    <div x-h-info-page-title>No Projects Yet</div>
    <div x-h-info-page-description>You haven't created any projects yet. Get started by creating your first project.</div>
  </div>
  <div x-h-info-page-content>
    <div class="flex gap-2">
      <button x-h-button data-variant="primary">Create Project</button>
      <button x-h-button data-variant="outline">Import Project</button>
    </div>
  </div>
  <a href="#" x-h-button data-size="sm" data-variant="link">
    <span>Learn More</span>
    <svg x-h-lucide role="presentation" data-lucide="arrow-up-right"></svg>
  </a>
</div>

With image

<div x-h-info-page>
  <div x-h-info-page-header>
    <div x-h-info-page-media>
      <img src="/harmonia/logo/harmonia.svg" alt="@harmonia" width="256px" />
    </div>
    <div x-h-info-page-title>Harmonia</div>
    <div x-h-info-page-description>UI component library for Alpine.js</div>
  </div>
  <div x-h-info-page-content>
    <button x-h-button data-variant="primary">GitHub Page</button>
  </div>
</div>

With border

<div x-h-info-page class="border">
  <div x-h-info-page-header>
    <div x-h-info-page-media>
      <svg x-h-lucide role="img" aria-label="Upload icon" data-lucide="upload"></svg>
    </div>
    <div x-h-info-page-title>Upload file(s)</div>
    <div x-h-info-page-description>Drag & drop your file(s) or use the button below</div>
  </div>
  <div x-h-info-page-content>
    <button x-h-button data-variant="primary">Upload</button>
  </div>
</div>