Page Templates

Linear Admin 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 Linear Admin. 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.

e-commerce.html

crm.html

faq.html

invoice.html

<!DOCTYPE html>
<html lang="en" data-page="[kebab-cased Page Title]">
    <!-- Head -->
	<module href="./src/html/partials/_head.html" locals='{ "pageTitle": "Page Title" }'></module>

	<body>
        <!-- Sidebar -->
		<module href="./src/html/partials/_sidebar.html"></module>

        <!-- Navbar (right) -->
		<module href="./src/html/partials/_nav-bar.html"></module>

        <!-- Main Content -->
		<div id="content">
			<div class="header">
                <!-- Sidebar toggle -->
				<module href="./src/html/partials/_sidebar-toggle.html"></module>

                <!-- Page title -->
				<h2 class="fs-5 text-body-emphasis m-0">Page Title</h2>
			</div>

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

        <!-- Scripts -->
		<module href="./src/html/partials/_script.html"></module>
	</body>
</html>

Three Column - Sidebar, Content Sidebar and Body

The three-column template is employed when you want to showcase a content-level sidebar on the left side of the page. This is particularly handy when you need to present a list of items on the left and the main content on the right.

How it works:

In this layout, the default sidebar that contains the menu, is shrunken to make room for the content level secondary sidebar by adding sidebar-min class to the body tag.
A distinctive ID is assigned to the content-level sidebar, known as sidebar-secondary.
A button with sidebar-secondary-toggle ID is placed within .header to toggle the secondary sidebar in mobile and smaller screens.
In mobile devices and smaller screens, only the content body is shown, and you can toggle the secondary sidebar by clicking the toggle button mentioned previously.

file-manager.html

messages.html

photos.html

calendar.html

main.html

<!DOCTYPE html>
<html lang="en" data-page="[kebab-cased Page Title]">
    <!-- Head -->
	<module href="./src/html/partials/_head.html" locals='{ "pageTitle": "Page Title" }'></module>

	<body class="sidebar-min">
        <!-- Navbar (right) -->
		<module href="./src/html/partials/_nav-bar.html"></module>

        <!-- Sidebar -->
		<module href="./src/html/partials/_sidebar.html"></module>

        <!-- Content -->
		<div id="content">

            <!-- Content header -->
			<module href="./src/html/partials/_content-header.html"></module>

            <!-- Content body -->
			<div class="content-body content-body-column">

                <!-- Content sidebar -->
				<module href="./src/html/partials/_content-sidebar.html"></module>

				<div data-simplebar>
					<!-- Page content goes here -->
				</div>
			</div>
		</div>

        <!-- Scripts -->
		<module href="./src/html/partials/_script.html"></module>
	</body>
</html>

_content-sidebar.html

<aside class="w-56 flex-shrink-0 h-100" id="sidebar-secondary">

    <!-- Close button -->
	<button type="button" class="icon sidebar-close d-xl-none" id="sidebar-secondary-close">
		<i class="ph ph-x pe-none fs-5"></i>
		<span class="visually-hidden">Close</span>
	</button>

	<!-- Content goes here... -->
</aside>

_content-header.html

<div class="header">
	<!-- Sidebar toggle -->
    <module href="./src/html/partials/_sidebar-toggle.html"></module>

    <!-- Title -->
	<h2 class="fs-5 text-body-emphasis m-0">Page title</h2>
</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 sections. The difference is that the four column layout also includes an additional section for a third sidebar.

How it works:

Follow the first 3 steps as described previously in the 3 column layout.
Both the list level third sidebar and content body sections are labeled with the data-attribute data-maed-block = { 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-maed-toggle = { list | body } attributes are used to toggle between the columns.

contacts.html

mail.html

main.html

<!DOCTYPE html>
<html lang="en" data-page="[kebab-cased Page Title]">

    <!-- Head -->
	<module href="./src/html/partials/_head.html" locals='{ "pageTitle": "Page Title" }'></module>
    
	<body class="sidebar-min">
        <!-- Navbar (right) -->
		<module href="./src/html/partials/_nav-bar.html"></module>

        <!-- Sidebar -->
		<module href="./src/html/partials/_sidebar.html"></module>

        <!-- Content -->
		<div id="content">

            <!-- Content header -->
			<module href="./src/html/partials/contacts/_header.html"></module>

            <!-- Content body -->
			<div class="content-body content-body-column">

                <!-- Content sidebar -->
				<module href="./src/html/partials/contacts/_sidebar.html"></module>

                <!-- Content list -->
				<module href="./src/html/partials/contacts/_list.html"></module>

				<div data-maed-block="body" data-simplebar>

                    <!-- Content header -->
					<module href="./src/html/partials/contacts/_content-header.html"></module>

					<!-- Page content goes here... -->
				</div>
			</div>
		</div>

        <!-- Scripts -->
		<module href="./src/html/partials/_script.html"></module>
	</body>
</html>

_content-sidebar.html

<aside class="w-56 flex-shrink-0 h-100" id="sidebar-secondary">
    <!-- Close button -->
	<button type="button" class="icon sidebar-close d-xl-none" id="sidebar-secondary-close">
		<i class="ph ph-x pe-none fs-5"></i>
		<span class="visually-hidden">Close</span>
	</button>

	<!-- Content goes here... -->
</aside>

_content-list.html

<aside class="w-md-72 w-lg-96 d-flex flex-column h-100" data-maed-block="list">
    <!-- Sidebar secondary toggle -->
    <button type="button" class="icon ph ph-list me-2 ms-n2.5 d-xl-none" id="sidebar-secondary-toggle">
        <span class="visually-hidden">Toggle Options</span>
    </button>

    <!-- Content list content -->
	<ul>
        <li>
            <a href="#" data-maed-toggle="body" class="active">
                Content List Link 1
            </a>
        </li>
        <li>
            <a href="#" data-maed-toggle="body">
                Content List Link 2
            </a>
        </li>
        <li>
            <a href="#" data-maed-toggle="body">
                Content List Link 3
            </a>
        </li>
        ...
    </ul>
</aside>

_content-header.html

<div class="content-header">
    <!-- Content list toggle -->
	<button type="button" class="icon ph ph-arrow-left ms-n2 d-md-none" data-maed-toggle="list">
		<span class="visually-hidden">Back</span>
	</button>

	<!-- Content goes here... -->
</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

forgot-password.html

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

	<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