A multipage theme with posts for Stackbit. [Live Demo](https://themes.stackbit.com/demos/reflex)

[](https://app.stackbit.com/create?theme=https://github.com/stackbithq/stackbit-theme-reflex)

[Stackbit](https://www.stackbit.com/) provisions your theme's content model with a growing selection of headless CMS and pulls the content for you in the format your static site generator expects it. This is powered by a single config file, [stackbit.yaml](https://docs.stackbit.com/uniform/stackbit-yaml/), which defines a [Uniform theme model](https://docs.stackbit.com/uniform/) and enables integration with CMS like Contentful, DatoCMS, Forestry, NetlifyCMS, etc.

This theme in particular is written in [Unibit](https://docs.stackbit.com/unibit/), a superset of static site generators. Unibit's powerful transpiling engine enables you to write once and stay SSG agnostic. Themes will automatically work with new generators as they are added and can currently convert to Jekyll, Hugo & Gatsby.

Develop locally using the Unibit CLI.

Start the local development server.

Compile a production build into the `public` folder.

Develop this theme in the browser using CodeSandbox.

[Fork in CodeSandbox](https://codesandbox.io/s/github/stackbithq/stackbit-theme-reflex)

<form method="post" action="#" id="contactForm">

<div class="fields">

<div class="field half"><input type="text" name="name" id="name" placeholder="Name" /></div>

<div class="field half"><input type="email" name="email" id="email" placeholder="Email" /></div>

<div class="field"><textarea name="message" id="message" placeholder="Message" rows="4"></textarea></div>

</div>

<ul class="actions">

<li><input type="submit" value="Send Message" /></li>

</ul>

</form>

<section class="wrapper style2 special">

<div class="inner">

<header>

<h2>{{ include_dict.section.title }}</h2>

{{ include_dict.section.subtitle | markdownify }}

</header>

<ul class="icons major style2">

{% for symbol in include_dict.section.symbol_display %}

<li><span class="icon {{ symbol.icon }}"><span class="label">{{ symbol.title }}</span></span></li>

{%- endfor %}

</ul>

{{ include_dict.section.content | markdownify }}

{% if include_dict.section.actions %}

<footer>

<ul class="actions special">

{% for action in include_dict.section.actions %}

<li><a href="{% if action.url | starts_with('#') %}{{ action.url }}{% else %}{{ action.url | link | relative_url }}{% endif %}" {{ classNames("button", {"primary": action.is_primary}, {"scrolly": action.is_scrolly}) }}>{{ action.label }}</a></li>

{% endfor %}

</ul>

</footer>

{% endif %}

</div>

<section id="footer" class="wrapper split style2">

<div class="inner">

{% if site.data.social.enabled %}

{% include "social.html" %}

{% endif %}

{% if site.data.footer.enable_contact_section %}

{% include "contact.html" %}

{% endif %}

</div>

<div class="copyright">

<p>

{{ site.data.footer.copyright | safe }}

&nbsp;

{% for link in site.data.footer.links %}

<a href="{{ link.url }}" {% if link.new_window %}target="_blank" rel="noopener"

{% endif %}>{{ link.text }}</a>.

{% endfor %}

</p>

</div>

<header id="header">

<nav>

<ul>

<li><a href="#menu">Menu</a></li>

</ul>

</nav>

<title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

<link rel="stylesheet" href="{{ 'assets/css/main.css' | relative_url }}" />

<link rel="stylesheet" href="{{ 'assets/css/markdown-images.css' | relative_url }}" />

<section id="intro" class="wrapper featured style1">

<div class="inner">

<span class="image"><img src="{{ include_dict.section.img_path | relative_url }}" alt="" /></span>

<div class="content">

<header>

<h1>{{ include_dict.section.title }}</h1>

{{ include_dict.section.content | markdownify }}

</header>

{% if include_dict.section.actions %}

<footer>

<ul class="actions">

{% for action in include_dict.section.actions %}

<li><a href="{% if action.url | starts_with('#') %}{{ action.url }}{% else %}{{ action.url | link | relative_url }}{% endif %}" {{ classNames("button", "big", {"primary": action.is_primary}, {"scrolly": action.is_scrolly}) }}>{{ action.label }}</a></li>

{% endfor %}

</ul>

</footer>

{% endif %}

</div>

</div>

<nav id="menu">

<div class="inner">

<h2>Menu</h2>

<ul class="links">

{% for item in site.menus.main %}

<li><a href="{{ item.url | relative_url }}">{{ item.title }}</a></li>

{% endfor %}

</ul>

{% if site.params.menu.actions %}

<ul class="actions stacked">

{% for action in site.params.menu.actions %}

<li><a href="{% if action.url | starts_with('#') %}{{ action.url }}{% else %}{{ action.url | link | relative_url }}{% endif %}" {{ classNames("button", "fit", {"primary": action.is_primary}, {"scrolly": action.is_scrolly}) }}>{{ action.label }}</a></li>

{% endfor %}

</ul>

{% endif %}

</div>

<a class="close" href="#menu">Close</a>