Layout Patterns

Page Header

Page Header задаёт начало экрана: title, subtitle, status/meta, actions.

<header class="page-header">
  <div>
    <h1 class="page-title">Deployments</h1>
    <p class="page-subtitle">Release operations and runtime status</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-secondary btn-small" type="button">Export</button>
    <button class="btn btn-accent btn-small" type="button">Create</button>
  </div>
</header>

Toolbar

Toolbar собирает title/meta, search, filters и primary action.

<div class="toolbar">
  <div class="toolbar-group">
    <div>
      <h3 class="toolbar-title">Projects</h3>
      <span class="toolbar-meta">24 items</span>
    </div>
  </div>
  <div class="toolbar-group">
    <div class="input-group input-group-compact search-field">
      <span class="input-group-addon"><i class="ph ph-magnifying-glass"></i></span>
      <input class="input-group-input" type="search" placeholder="Search">
      <button class="input-group-action" type="button" data-input-clear aria-label="Clear search">
        <i class="ph ph-x"></i>
      </button>
    </div>
    <button class="btn btn-accent btn-small">Create</button>
  </div>
</div>

Input Group

<div class="input-group">
  <span class="input-group-addon">https://</span>
  <input class="input-group-input" type="text" placeholder="Domain">
  <button class="input-group-action" type="button">Save</button>
</div>

Pagination

<nav class="pagination" aria-label="Pagination">
  <button class="pagination-item" type="button" disabled>
    <i class="ph ph-arrow-left"></i>
  </button>
  <button class="pagination-item pagination-item-active" type="button" aria-current="page">1</button>
  <button class="pagination-item" type="button">2</button>
  <button class="pagination-item" type="button">
    <i class="ph ph-arrow-right"></i>
  </button>
</nav>

Empty State

<div class="empty-state">
  <div class="empty-state-icon">
    <i class="ph ph-package"></i>
  </div>
  <h3 class="empty-state-title">No results</h3>
  <p class="empty-state-text">Nothing matched the current filters.</p>
  <div class="empty-state-actions">
    <button class="btn btn-secondary btn-small">Reset</button>
    <button class="btn btn-accent btn-small">Create</button>
  </div>
</div>

Steps

Steps показывают wizard-flow или staged process.

<ol class="steps">
  <li class="step step-complete">
    <span class="step-marker">1</span>
    <span class="step-label">Created</span>
  </li>
  <li class="step step-active">
    <span class="step-marker">2</span>
    <span class="step-label">Review</span>
  </li>
  <li class="step">
    <span class="step-marker">3</span>
    <span class="step-label">Publish</span>
  </li>
</ol>

Accordion

Accordion основан на native <details> / <summary> и получает enhanced animation через JS.

<div class="accordion" data-accordion>
  <details class="accordion-item">
    <summary class="accordion-summary">Details</summary>
    <div class="accordion-content">
      Content
    </div>
  </details>
</div>

GNexusUIKit.Accordion.init();