Page-level layouts. A page composes its bands into one string and hands it over; the template owns the document — doctype, head, stylesheets, scripts. Pages decide the order of things, templates decide the shell.
| Template | Require path | Use it for |
|---|---|---|
| Default | /templates/default.ejs |
Any site page — a thin shell around your composed content. Publishes to the CMS as the universal page type. |
| Documentation | /templates/documentation.ejs |
The docs shell — side rail, mobile breadcrumb, optional “On this page” rail. This page renders through it. |
The theme also ships accentmark-home.ejs, the product's own
home layout — not meant for site pages.
A complete single-page site as one plain HTML file — Bootstrap 5 and
Bootstrap Icons from the CDN, nothing to install and no theme required.
Save it as index.html, open it in a browser, replace the
words. It follows the visitor's light or dark preference out of the box.
The block below is read from that file at render time, so what you copy is exactly what the theme ships. For the same shape built from theme partials, band by band, take the Build a one-page site tutorial.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Studio</title>
<meta name="description" content="One sentence for search results and link previews.">
<!-- Bootstrap 5 + Bootstrap Icons from the CDN — nothing to install. -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<!-- Follow the visitor's light/dark preference. Delete to stay light. -->
<script>document.documentElement.setAttribute('data-bs-theme', matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')</script>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg border-bottom">
<div class="container">
<a class="navbar-brand fw-semibold" href="#">Your Studio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav"
aria-controls="nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#what-we-do">What we do</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
<a class="btn btn-primary" href="#contact">Get in touch</a>
</div>
</div>
</nav>
<main>
<!-- HERO -->
<section class="text-bg-primary text-center">
<div class="container py-5">
<div class="row justify-content-center py-lg-5">
<div class="col-lg-8">
<p class="text-uppercase fw-semibold small mb-3">Your Studio</p>
<h1 class="display-5 fw-bold mb-3">Say the one thing you do, plainly.</h1>
<p class="lead mb-4">One or two sentences on who it is for and why it is different. Keep it short — the sections below carry the detail.</p>
<a class="btn btn-light btn-lg" href="#what-we-do">See what we do</a>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section id="what-we-do">
<div class="container py-5">
<h2 class="mb-1">What we do</h2>
<p class="text-body-secondary mb-4">Three things, one line each.</p>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<i class="bi bi-stars fs-2 text-primary"></i>
<h3 class="h5 mt-2">First thing</h3>
<p class="text-body-secondary mb-0">A sentence on the first thing you want people to know.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<i class="bi bi-tools fs-2 text-primary"></i>
<h3 class="h5 mt-2">Second thing</h3>
<p class="text-body-secondary mb-0">A sentence on the second. Icons are Bootstrap Icons names.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<i class="bi bi-chat-dots fs-2 text-primary"></i>
<h3 class="h5 mt-2">Third thing</h3>
<p class="text-body-secondary mb-0">A sentence on the third. Delete a card or add a fourth — the row reflows.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact" class="text-bg-primary text-center">
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-6">
<h2 class="mb-3">Work with us.</h2>
<p class="mb-4">Where to find you, or what happens when they press the button.</p>
<a class="btn btn-light btn-lg" href="mailto:hello@example.com">Get in touch</a>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="border-top">
<div class="container py-4 d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
<span class="fw-semibold">Your Studio</span>
<span class="text-body-secondary">One line about the studio.</span>
<span class="text-body-secondary">© 2026 Your Studio.</span>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>