1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Files
tabler/docs/content/ui/layout/page-headers.md
2025-04-15 23:18:49 +02:00

10 KiB

title, summary, description
title summary description
Page headers Page heading examples for Tabler Examples of Tabler page headers.

Simple header

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html %}

With meta, avatar and actions

{% capture html -%}

Paweł Kuna

{% include "ui/icon.html" icon="check" %} Verified
{%- endcapture %} {% include "docs/example.html" html=html %}

With meta, search and actions

{% capture html -%}

Gallery

1-12 of 241 photos
{% include "ui/icon.html" icon="search" %}
{% include "ui/icon.html" icon="plus" %} Add photo
{%- endcapture %} {% include "docs/example.html" html=html %}

Bordered header

A page header with a border to separate content is an effective way to organize and present information in a clear and visually appealing way.

{% capture html -%}

Improve cards with no border

{%- endcapture %} {% include "docs/example.html" html=html %}

Header with breadcrumb and actions

A page header with breadcrumb and actions is a common design element found in many websites and applications. The header typically appears at the top of the page and includes a breadcrumb trail, which shows the user the path they have taken to reach the current page. The breadcrumb can be clickable, allowing the user to navigate back to previous pages.

In addition to the breadcrumb, the header often includes actions or buttons that allow the user to perform common tasks related to the current page. These actions may include things like adding a new item, editing existing content, or deleting items.

{% capture html -%}

Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.

{%- endcapture %} {% include "docs/example.html" html=html %}