# Do Example or Demo Folders Exist at the Root of the Nutlope/hallmark Repository?

> Discover if Nutlope/hallmark has example or demo folders at the root. Learn where to find showcase and test content organized within the site directory.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: how-to-guide
- Published: 2026-08-18

---

**No, the Nutlope/hallmark repository does not contain root-level folders named `example` or `demo`.** Instead, all showcase and test-driven demo content is organized under the `site/` directory, specifically in `site/examples/` and `site/_tests/`.

The hallmark project is a library for generating themed landing pages. Rather than cluttering the repository root with demo folders, the maintainers structured example content within the documentation site itself. This approach keeps the root clean while providing fully functional, ready-to-run demonstrations.

## Where Example Content Lives in hallmark

The repository places all demonstration content inside the `site/` folder. There are two primary locations:

- **`site/examples/`** — Curated, standalone example sites
- **`site/_tests/`** — Test-driven demo pages for visual regression

Both directories contain complete HTML/CSS projects that you can open directly in a browser.

### The `site/examples/` Directory

This folder holds production-quality example sites, each demonstrating different themes, layouts, and components. Every subfolder is a self-contained project with its own [`index.html`](https://github.com/Nutlope/hallmark/blob/main/index.html), stylesheets, and assets.

Notable examples include:

- `site/examples/hum-07/` — The *Bubble* example, a guided sourdough app interface
- `site/examples/cobalt-01/` — A cold-themed landing page design

These examples are referenced from the homepage and showcased in an interactive "Examples" rail.

### The `site/_tests/` Directory

The underscore-prefixed `_tests` folder contains demo pages that serve double duty as **visual regression test assets**. These pages verify rendering consistency across the library.

Examples include:

- `site/_tests/09-slow-pour/` — A carefully timed animation demo
- `site/_tests/08-cohort-courses/` — Course landing page variation

Each test demo includes thumbnails and markdown briefs documenting the expected behavior.

## How Examples Are Surfaced on the Homepage

The [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) file aggregates all examples into a browsable interface. The markup explicitly links to each example folder:

```html
<section class="section section--bleed reveal" id="examples" aria-labelledby="s2">
  <h2 class="section__title">Examples</h2>
  <p class="examples__intro">One-shotted. No shared theme. No shared layout.</p>
  <div class="examples-rail" role="list" aria-label="Example landing pages">
    <a class="ex-card" href="examples/hum-07/" target="_blank" rel="noopener"
       aria-label="Open the Bubble example, a guided sourdough app, Hum, in a new tab">
      <!-- thumbnail or video preview -->
    </a>
    <!-- additional <a class="ex-card"> entries for each example -->
  </div>
</section>

```

The `href="examples/hum-07/"` paths confirm that examples are served from `site/examples/`, not from any root-level folder.

## Key Files Supporting the Example System

| Path | Purpose |
|------|---------|
| [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) | Homepage with the interactive examples rail |
| `site/examples/` | Curated standalone example sites |
| `site/_tests/` | Test-driven demo pages and visual regression assets |
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) | JavaScript powering scroll behavior and interactions |
| [`site/css/components.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css) | Styles for example cards and layout components |

## Running Examples Locally

To view any example directly from the repository:

1. Clone the repository
2. Navigate to `site/examples/[example-name]/`
3. Open [`index.html`](https://github.com/Nutlope/hallmark/blob/main/index.html) in your browser

No build step is required — the examples are static HTML files.

## Summary

- **No root-level `example/` or `demo/` folders exist** in Nutlope/hallmark
- All demo content resides in `site/examples/` and `site/_tests/`
- Examples are complete, runnable HTML projects showcasing themes and components
- The homepage ([`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html)) provides a browsable interface to all examples
- Test demos in `site/_tests/` serve as visual regression assets

## Frequently Asked Questions

### Why doesn't hallmark use a root-level examples folder?

The maintainers chose to embed examples within the `site/` directory to keep the repository root uncluttered and to integrate examples naturally with the documentation site. This structure treats examples as part of the project's web presence rather than isolated demos.

### Can I contribute a new example to hallmark?

Yes. Based on the existing structure, you would create a new subfolder under `site/examples/` with a self-contained [`index.html`](https://github.com/Nutlope/hallmark/blob/main/index.html) and supporting assets. The homepage markup in [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) would need updating to include your example in the rail.

### Are the test demos in `site/_tests/` different from regular examples?

Yes. The `_tests/` folder contains pages designed for **visual regression testing** — they verify that the library renders consistently across changes. While you can view them in a browser, their primary purpose is automated testing rather than user demonstration.

### How do I find all available examples without browsing the repository?

Open [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) after cloning, or examine the examples rail markup directly. The [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) file also contains logic for loading and displaying example metadata if the project uses dynamic population.