Page Templates

Tailbreeze uses 4 different page templates to help you get started with your project. Each template has a different layout and is designed to be used in different scenarios based on the content of the page.

Two Column - Sidebar and Body

The two column template is the most common layout used in Tailbreeze. It has a sidebar on the left and a body on the right. The sidebar is used for navigation and the body is used for the main content of the page.

index.html

e-commerce.html

faq.html

invoice.html

<!DOCTYPE html>
<html lang="en" data-page="[kebab-cased page title]">
	<!-- Head -->
	<include src="./partials/_head.html">{ "pageTitle": "Page title" }</include>

	<body>
        <!-- Page loader -->
		<include src="./partials/_page-loader.html"></include>

        <!-- Header -->
		<include src="./partials/_header.html"></include>

        <!-- Main sidebar (menu) -->
		<include src="./partials/_sidebar.html"></include>

        <!-- Main content -->
		<div id="content">
            <!-- Content header -->
			<div class="content-header px-5">
				<span class="font-bold">Page title</span>
			</div>

            <!-- Content body -->
			<div class="p-5" data-simplebar>
				<!-- Page content goes here... -->
			</div>
		</div>

        <!-- Scripts -->
		<include src="./partials/_scripts.html"></include>
	</body>
</html>

Three Column - Sidebar, Content Sidebar and Body

The three column template is used when you need to display a content level sidebar on the right of the page. This is useful when you need to display a list of items on the right and the main content on the left.

How it works:

In this layout, the default sidebar that contains the menu is shrunken to make room for the content level sidebar using the local variable { "sidebar": "sidebar-min" } provided within _sidebar.html partial.
The columns for the content level, including the content sidebar and body, are labeled with the data-attribute data-content = { sidebar | body }. This is done to ensure that the layout is responsive and properly displayed on mobile devices and smaller screens.
On mobile devices and smaller screens, one column is displayed at a time and links/buttons with the data-toggle = { sidebar | body } attribute are used to toggle between the columns.

file-manager.html

messages.html

photos.html

calendar.html

main.html

<!DOCTYPE html>
<html lang="en" data-page="[kebab-cased page title]">
	<!-- Head -->
	<include src="./partials/_head.html">{ "pageTitle": "Page title" }</include>

	<body>
        <!-- Page loader -->
		<include src="./partials/_page-loader.html"></include>

        <!-- Header -->
		<include src="./partials/_header.html"></include>

        <!-- Main sidebar (menu) -->
		<include src="./partials/_sidebar.html">{ "sidebar": "sidebar-min" }</include>

        <!-- Main content -->
		<div id="content" class="content-alt">
            <!-- Content sidebar -->
			<include src="./partials/_content-sidebar.html"></include>
            
			<div data-content="body">
                <!-- Content header -->
				<include src="./partials/_content-header.html"></include>

                <!-- Content body -->
				<div class="p-5" data-simplebar>
					<!-- Page content goes here... -->
				</div>
			</div>
		</div>

		<!-- Scripts -->
		<include src="./partials/_scripts.html"></include>
	</body>
</html>

_content-sidebar.html

<div data-content="sidebar" class="aside aside-screen-md">
	<div class="p-3" data-simplebar>
		<ul class="nav-hover mb-6 font-bold text-heading">
			<li>
				<a href="#" data-toggle="body" class="active">
					Content Link 1
				</a>
			</li>
			<li>
				<a href="#" data-toggle="body">
					Content Link 2
				</a>
			</li>
			<li>
				<a href="#" data-toggle="body">
					Content Link 3
				</a>
			</li>
			...
		</ul>
	</div>
</div>

_content-header.html

<div class="content-header px-5">
	<a data-toggle="sidebar" class="icon btn mr-2 -ml-2 hover:bg-light-200 dark:hover:bg-dark-100 md:hidden" href="">west</a>

	<div class="flex-shrink-0 font-bold text-heading">Content header title</div>
</div>

Four Column - Sidebar, Content Sidebar, Content List and Body

Like the three column layout, the four column layout is also a combination of the sidebar, content sidebar and body layouts. The difference is that the four column layout also includes a content list layout.

How it works

In this layout, the default sidebar that contains the menu is shrunken to make room for the content level sidebar using the local variable { "sidebar": "sidebar-min" } provided within _sidebar.html partial.
The columns for the content level, including the content sidebar, content list and body, are labeled with the data-attribute data-content = { sidebar | list | body }. This is done to ensure that the layout is responsive and properly displayed on mobile devices and smaller screens.
On mobile devices and smaller screens, one column is displayed at a time and links/buttons with the data-toggle = { sidebar | list | body } attribute are used to toggle between the columns.

mail.html

contacts.html

main.html

<!DOCTYPE html>
<html lang="en" data-page="[kebab-cased page title]">
	<!-- Head -->
	<include src="./partials/_head.html">{ "pageTitle": "Page title" }</include>

	<body>
        <!-- Page loader -->
		<include src="./partials/_page-loader.html"></include>

        <!-- Header -->
		<include src="./partials/_header.html"></include>

        <!-- Main sidebar (menu) -->
		<include src="./partials/_sidebar.html">{ "sidebar": "sidebar-min" }</include>

        <!-- Main content -->
		<div id="content" class="content-alt">
            <!-- Content sidebar -->
			<include src="./partials/_content-sidebar.html"></include>

 			<!-- Content list -->
			<include src="./partials/_content-list.html"></include>
            
			<div data-content="body">
                <!-- Content header -->
				<include src="./partials/_content-header.html"></include>

                <!-- Content body -->
				<div class="p-5" data-simplebar>
					<!-- Page content goes here... -->
				</div>
			</div>
		</div>

		<!-- Scripts -->
		<include src="./partials/_scripts.html"></include>
	</body>
</html>

_content-sidebar.html

<div data-content="sidebar" class="aside aside-screen-xl">
	<div class="p-3" data-simplebar>
		<ul class="nav-hover mb-6 font-bold text-heading">
			<li>
				<a href="#" data-toggle="list" class="active">
					Content Sidebar Link 1
				</a>
			</li>
			<li>
				<a href="#" data-toggle="list">
					Content Sidebar Link 2
				</a>
			</li>
			<li>
				<a href="#" data-toggle="list">
					Content Sidebar Link 3
				</a>
			</li>
			...
		</ul>
	</div>
</div>

_content-list.html

<div data-content="list" class="aside aside-screen-md xl:w-96">
	<!-- Content list header -->
	<div class="content-header px-3">
		<a data-toggle="sidebar" class="icon btn mr-2 hover:bg-light-200 dark:hover:bg-dark-100 xl:hidden" href="">west</a>

		<div class="font-bold text-heading md:hidden xl:block">Content list title</div>
	</div>

	<!-- Content list body -->
	<div class="p-3" data-simplebar>
		<ul class="nav-hover mb-6 font-bold text-heading">
			<li>
				<a href="#" data-toggle="body" class="active">
					Content List Link 1
				</a>
			</li>
			<li>
				<a href="#" data-toggle="body">
					Content List Link 2
				</a>
			</li>
			<li>
				<a href="#" data-toggle="body">
					Content List Link 3
				</a>
			</li>
			...
		</ul>
	</div>
</div>

_content-header.html

<div class="content-header px-5">
	<a data-toggle="list" class="icon btn mr-2 -ml-2 hover:bg-light-200 dark:hover:bg-dark-100 md:hidden" href="">west</a>

	<div class="flex-shrink-0 font-bold text-heading">Content header title</div>
</div>

No Columns - Body only

No columns layout is a simple layout with only the body content. It is useful for pages that don’t need a sidebar or a list.

coming-soon.html

<!DOCTYPE html>
<html lang="en">
	<!-- Head -->
	<include src="./partials/_head.html">{ "pageTitle": "Page Title" }</include>

	<body>
		<!-- Page content goes here... -->	

		<!-- Scripts -->
		<include src="./partials/_scripts.html"></include>
	</body>
</html>

Page Templates

Two Column - Sidebar and Body

Three Column - Sidebar, Content Sidebar and Body

Four Column - Sidebar, Content Sidebar, Content List and Body

No Columns - Body only

On this page