Page Title

A brief description of the page content.

Usage

<%= ui.header do %>
  <%= ui.header_heading do %>
    <%= ui.header_title "Title" %>
  <% end %>
<% end %>

<%= ui.header bordered: true do %>
  <%= ui.header_heading do %>
    <%= ui.header_title "Title" %>
    <%= ui.header_subtitle "Subtitle" %>
  <% end %>
  <%= ui.header_actions do %>
    <%= ui.btn "Action" %>
  <% end %>
<% end %>

Props

Prop	Type	Default	Description
`direction`	`Symbol` `:col` \| `:row`	`:row`	Layout direction of the header. Row direction is responsive (column on mobile, row on desktop).
`align`	`Symbol` `:start` \| `:center` \| `:end`	`:start`	Vertical alignment of header content.
`justify`	`Symbol` `:start` \| `:center` \| `:end` \| `:between`	`:between`	Horizontal justification of header content.
`sticky`	`Boolean`	`false`	Whether the header should stick to the top of the viewport on scroll.
`bordered`	`Boolean`	`false`	Whether to show a bottom border on the header.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:, class:). class: is also supported for custom styling.

Subcomponents

Name	Helper	Description
`header_heading`	`ui.header_heading`	Container for title and subtitle elements.
`header_title`	`ui.header_title`	Main page title element (h1).
`header_subtitle`	`ui.header_subtitle`	Secondary description text with muted styling.
`header_actions`	`ui.header_actions`	Container for action buttons on the right side.

Examples

Default Header

Page Title

A brief description of the page content.

<%= ui.header do %>
  <%= ui.header_heading do %>
    <%= ui.header_title "Page Title" %>
    <%= ui.header_subtitle "A brief description of the page content." %>
  <% end %>
  <%= ui.header_actions do %>
    <%= ui.btn "Primary Action" %>
    <%= ui.btn "Secondary", variant: :secondary %>
  <% end %>
<% end %>

Bordered Header

Header with a bottom border separator.

<%= ui.header bordered: true do %>
  <%= ui.header_heading do %>
    <%= ui.header_title "Bordered Header" %>
    <%= ui.header_subtitle "Header with a bottom border separator." %>
  <% end %>
  <%= ui.header_actions do %>
    <%= ui.btn "Action", variant: :outline %>
  <% end %>
<% end %>

Sticky Header

This header sticks to the top on scroll.

<%= ui.header sticky: true, bordered: true do %>
  <%= ui.header_heading do %>
    <%= ui.header_title "Sticky Header" %>
    <%= ui.header_subtitle "This header sticks to the top on scroll." %>
  <% end %>
  <%= ui.header_actions do %>
    <%= ui.btn "Action" %>
  <% end %>
<% end %>