Corex.Layout.Heading (Corex v0.1.0-rc.1)

A layout heading component for page titles, subtitles, and actions.

Anatomy

Basic

Use the :title and :subtitle slots for the main heading content. Use the :actions slot for buttons or links on the right.

<.layout_heading class="layout-heading">
  <:title>Page Title</:title>
  <:subtitle>Optional subtitle or context</:subtitle>
  <:actions>
    <.action phx-click="save" class="button button--accent">Save</.action>
  </:actions>
</.layout_heading>

Title and subtitle only

Omit the :actions slot when no action buttons are needed.

<.layout_heading class="layout-heading">
  <:title>Settings</:title>
  <:subtitle>Manage your preferences</:subtitle>
</.layout_heading>

Heading tags

title_tag and subtitle_tag set the HTML element for each slot (passed to <.dynamic_tag> as tag_name). Defaults are "h1" and "h2". Use a lower title tag when the heading sits under another page title, and "p" for subtitle_tag when the line is supporting copy rather than a section heading.

<.layout_heading class="layout-heading" title_tag="h2" subtitle_tag="p">
  <:title>Playground</:title>
  <:subtitle>Optional controls summary</:subtitle>
</.layout_heading>

Style

Use class="layout-heading" on the host, plus optional layout-heading--* modifiers for semantic ink on the title and subtitle.

Accent

<.layout_heading class="layout-heading layout-heading--accent">
  <:title>Accent title</:title>
  <:subtitle>Accent subtitle</:subtitle>
</.layout_heading>

Max width

<.layout_heading class="layout-heading layout-heading--max-w-prose">
  <:title>Constrained width</:title>
  <:subtitle>Uses a layout-heading width modifier on the host.</:subtitle>
</.layout_heading>

Target elements with data attributes:

[data-scope="layout-heading"][data-part="root"] – root container
[data-scope="layout-heading"][data-part="content"] – title/subtitle wrapper
[data-scope="layout-heading"][data-part="title"] – main title
[data-scope="layout-heading"][data-part="subtitle"] – subtitle
[data-scope="layout-heading"][data-part="actions"] – actions wrapper

Summary

Components

layout_heading(assigns)

Renders a page or section heading with title, optional subtitle, and optional actions.

Components

layout_heading(assigns)

Renders a page or section heading with title, optional subtitle, and optional actions.

See module doc for anatomy, styling, and title_tag / subtitle_tag examples.

Attributes

title_tag (:string) - HTML tag for the :title slot (h1–h6 or p). Default h1 for page titles. Defaults to "h1". Must be one of "h1", "h2", "h3", "h4", "h5", "h6", or "p".
subtitle_tag (:string) - HTML tag for the :subtitle slot (h1–h6 or p). Default h2; use p for non-heading supporting text. Defaults to "h2". Must be one of "h1", "h2", "h3", "h4", "h5", "h6", or "p".
Global attributes are accepted. Additional HTML attributes on the outer wrapper.

Slots

title - Main heading text. Rendered with data-part="title".
subtitle - Optional line below the title. Rendered with data-part="subtitle".
actions - Optional controls aligned to the end of the row (buttons, links).
inner_pre - Content rendered inside the wrapper, before the heading root.
inner_post - Content rendered inside the wrapper, after the heading root.