Doggo Storybook 0.9.0

Page Header

Renders a header that is specific to the content of the current page.

Read more Read less

Unlike a site-wide header, which offers consistent navigation and elements like logos throughout the website or application, this component is meant to describe the unique content of each page. For instance, on an article page, it would display the article’s title.

It is typically used as a direct child of the <main> element.

Usage

<main>
  <.page_header title="Puppy Profiles" subtitle="Share Your Pup's Story">
    <:action>
      <.button_link patch={~p"/puppies/new"}>Add New Profile</.button_link>
    </:action>
  </.page_header>

<section>

Puppy Profiles

Share Your Pup's Story

Add New Profile
Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
rest :global Any additional HTML attributes.
subtitle :string An optional sub title.
Required title * :string The title for the current page.
action :slot A slot for action buttons related to the current page. 
<:action>
  <.button_link patch="/puppies/new">Add New Profile</.button_link>
</:action>