page headers

src/pages/_data/docs.yml

@@ -30,6 +30,13 @@ content:
       title: Icons
       url: docs/icons.html
 
+layout:
+  title: Layout
+  children:
+    headers:
+      title: Page headers
+      url: docs/page-headers.html
+
 forms:
   title: Form components
 #  icon: forms

src/pages/_data/menu.yml

@@ -75,9 +75,6 @@ base:
     typography:
       title: Typography
       url: typography.html
-    headers:
-      title: Page headers
-      url: page-headers.html
     markdown:
       title: Markdown
       url: markdown.html

src/pages/_docs/page-headers.md

@@ -1,24 +1,40 @@
 ---
-menu: docs.components.page-headers
+title: Page headers
+menu: docs.layout.headers
+description: Page heading examples for Tabler
 ---
 
-{% capture code %}
-{% include layout/page-header-1.html %}
-{% endcapture %}
-{% include example.html code=code %}
-
-
-{% capture code %}
-{% include layout/page-header-3.html %}
-{% endcapture %}
-{% include example.html code=code %}
-
-{% capture code %}
-{% include layout/page-header-4.html %}
-{% endcapture %}
-{% include example.html code=code %}
+## Simple header
 
 {% capture code %}
 {% include layout/page-header-5.html %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=2 %}
+
+## With meta, avatar and actions
+
+{% capture code %}
+{% include layout/page-header-1.html %}
+{% endcapture %}
+{% include example.html code=code columns=2 %}
+
+## With meta, search and actions
+
+{% capture code %}
+{% include layout/page-header-2.html %}
+{% endcapture %}
+{% include example.html code=code columns=2 %}
+
+## Bordered header
+
+{% capture code %}
+{% include layout/page-header-3.html %}
+{% endcapture %}
+{% include example.html code=code columns=2 %}
+
+## Header with breadcrumb and actions
+
+{% capture code %}
+{% include layout/page-header-4.html %}
+{% endcapture %}
+{% include example.html code=code columns=2 %}

src/pages/page-headers.html

@@ -1,26 +0,0 @@
----
-title: Page headers
-page-header: Page headers
-menu: base.headers
----
-
-
-<div class="my-5">
-	{% include layout/page-header-1.html %}
-</div>
-
-<div class="my-5">
-	{% include layout/page-header-2.html %}
-</div>
-
-<div class="my-5">
-	{% include layout/page-header-3.html %}
-</div>
-
-<div class="my-5">
-	{% include layout/page-header-4.html %}
-</div>
-
-<div class="my-5">
-	{% include layout/page-header-5.html %}
-</div>