Page

<%= kui(:page_header, title: "Documentation", description: "Everything you need to build.") %>

<%= kui(:page_body) do %>
  <p>Your page content here.</p>
<% end %>

<%= kui(:page) do %>
  <%= kui(:page, :left) do %>
  <% end %>
  <%= kui(:page, :center) do %>
  <% end %>
  <%= kui(:page, :right) do %>
  <% end %>
<% end %>

<%= kui(:page_header,
    headline: "Components",
    title: "Page Header",
    description: "A section header for page-level content.") %>

<%= kui(:page_header) do %>
  <div>
    <%= kui(:page_header, :headline) { "Guide" } %>
    <%= kui(:page_header, :title) { "Custom Header" } %>
    <%= kui(:page_header, :description) { "Full control over layout." } %>
  </div>
  <%= kui(:page_header, :links) do %>
    <%= kui(:button, size: :sm) { "Action" } %>
  <% end %>
<% end %>

<%= kui(:page_body) do %>
<% end %>

<%= kui(:page_section, orientation: :horizontal) do %>
  <%= kui(:page_section, :wrapper) do %>
    <%= kui(:page_section, :title, orientation: :horizontal) { "Title" } %>
    <%= kui(:page_section, :description, orientation: :horizontal) { "Description text." } %>
  <% end %>
  <%= kui(:page_section, :body) do %>
  <% end %>
<% end %>

<%= kui(:page_section, orientation: :vertical) do %>
  <%= kui(:page_section, :wrapper) do %>
    <%= kui(:page_section, :title, orientation: :vertical) { "Centered Title" } %>
    <%= kui(:page_section, :description, orientation: :vertical) { "Centered description." } %>
  <% end %>
  <%= kui(:page_section, :body) do %>
    <%= kui(:page_grid) do %>
    <% end %>
  <% end %>
<% end %>

<%= kui(:page_grid) do %>
  <%= kui(:page_card, title: "Card 1", description: "Description.") %>
  <%= kui(:page_card, title: "Card 2", description: "Description.") %>
  <%= kui(:page_card, title: "Card 3", description: "Description.") %>
<% end %>

<%= kui(:page_card,
    variant: :outline,
    icon: "zap",
    title: "Fast",
    description: "Zero JavaScript by default.") %>

<%= kui(:page_card, variant: :outline) do %>
  <%= kui(:page_card, :icon) { kiso_icon("zap") } %>
  <%= kui(:page_card, :title) { "Custom Card" } %>
  <%= kui(:page_card, :description) { "Full control." } %>
  <%= kui(:page_card, :body) do %>
    <p>Additional body content.</p>
  <% end %>
  <%= kui(:page_card, :footer) do %>
    <%= kui(:button, size: :sm, variant: :outline) { "Learn More" } %>
  <% end %>
<% end %>