Hex doc
Phoenix
Semantic
Use class="ui-{role}" to set the semantic palette of a layout heading.
Available options: accent, alert, brand, info, success
Default
Neutral ink on title and subtitle.
Accent
Semantic accent on title and subtitle.
Brand
Semantic brand on title and subtitle.
Alert
Semantic alert on title and subtitle.
Success
Semantic success on title and subtitle.
Info
Semantic info on title and subtitle.
<.layout_heading class="layout-heading">
<:title>Default</:title>
<:subtitle>Neutral ink on title and subtitle.</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading ui-accent">
<:title>Accent</:title>
<:subtitle>Semantic accent on title and subtitle.</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading ui-brand">
<:title>Brand</:title>
<:subtitle>Semantic brand on title and subtitle.</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading ui-alert">
<:title>Alert</:title>
<:subtitle>Semantic alert on title and subtitle.</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading ui-success">
<:title>Success</:title>
<:subtitle>Semantic success on title and subtitle.</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading ui-info">
<:title>Info</:title>
<:subtitle>Semantic info on title and subtitle.</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
Max width
Without max-w-*, width comes from component CSS. Default for layout-heading: none (width: 100%).
Use class="max-w-{step}" to set the maximum width of a layout heading root.
Available options: none (default), full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl
default (none)
Layout heading
default (none)
none
Layout heading
none
full
Layout heading
full
9xs
Layout heading
9xs
8xs
Layout heading
8xs
7xs
Layout heading
7xs
6xs
Layout heading
6xs
5xs
Layout heading
5xs
4xs
Layout heading
4xs
3xs
Layout heading
3xs
2xs
Layout heading
2xs
xs
Layout heading
xs
sm
Layout heading
sm
md
Layout heading
md
lg
Layout heading
lg
xl
Layout heading
xl
2xl
Layout heading
2xl
3xl
Layout heading
3xl
4xl
Layout heading
4xl
5xl
Layout heading
5xl
6xl
Layout heading
6xl
7xl
Layout heading
7xl
8xl
Layout heading
8xl
9xl
Layout heading
9xl
<.layout_heading class="layout-heading">
<:title>Layout heading</:title>
<:subtitle>default (none)</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-none">
<:title>Layout heading</:title>
<:subtitle>none</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-full">
<:title>Layout heading</:title>
<:subtitle>full</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-9xs">
<:title>Layout heading</:title>
<:subtitle>9xs</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-8xs">
<:title>Layout heading</:title>
<:subtitle>8xs</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-7xs">
<:title>Layout heading</:title>
<:subtitle>7xs</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-6xs">
<:title>Layout heading</:title>
<:subtitle>6xs</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-5xs">
<:title>Layout heading</:title>
<:subtitle>5xs</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-4xs">
<:title>Layout heading</:title>
<:subtitle>4xs</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-3xs">
<:title>Layout heading</:title>
<:subtitle>3xs</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-2xs">
<:title>Layout heading</:title>
<:subtitle>2xs</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-xs">
<:title>Layout heading</:title>
<:subtitle>xs</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-sm">
<:title>Layout heading</:title>
<:subtitle>sm</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-md">
<:title>Layout heading</:title>
<:subtitle>md</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-lg">
<:title>Layout heading</:title>
<:subtitle>lg</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-xl">
<:title>Layout heading</:title>
<:subtitle>xl</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-2xl">
<:title>Layout heading</:title>
<:subtitle>2xl</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-3xl">
<:title>Layout heading</:title>
<:subtitle>3xl</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-4xl">
<:title>Layout heading</:title>
<:subtitle>4xl</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-5xl">
<:title>Layout heading</:title>
<:subtitle>5xl</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-6xl">
<:title>Layout heading</:title>
<:subtitle>6xl</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-7xl">
<:title>Layout heading</:title>
<:subtitle>7xl</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-8xl">
<:title>Layout heading</:title>
<:subtitle>8xl</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>
<.layout_heading class="layout-heading max-w-9xl">
<:title>Layout heading</:title>
<:subtitle>9xl</:subtitle>
<:actions>
<.action type="button" class="button ui-size-sm">Save</.action>
<.action type="button" class="button ui-size-sm">Cancel</.action>
</:actions>
</.layout_heading>