---
title: Content-focused theme preview
layout: blank
eleventyExcludeFromCollections: true
override:tags: []
noTheme: true
---

{% block head %}
<link href="{{ page.url }}../content.css" rel="stylesheet" />
<script type="module" src="{{ page.url }}../preview.js"></script>
{% endblock %}


<div class="preview-container">
  <section class="overlap">
    <div class="hero-background"></div>
    <header class="strata project-header">
      <h1 style="display: flex; align-items: center; margin: 0;">
        <wa-icon id="project-logo" name="shapes"></wa-icon>
        <span id="project-name" style="margin-inline-start: var(--wa-space-l);">Project Name</span>
      </h1>
      <div>
        <wa-button appearance="plain">
          <wa-icon name="magnifying-glass" label="Search"></wa-icon>
        </wa-button>
        <wa-button appearance="plain">
          <wa-icon name="user" label="Account"></wa-icon>
        </wa-button>
        <wa-button appearance="plain">
          <wa-icon name="bag-shopping" label="Your Basket"></wa-icon>
        </wa-button>
      </div>
    </header>
    <section class="strata hero">
      <div class="title">
        <h1 class="hero-title">What you know you can't explain, but you feel it.</h1>
        <wa-button variant="brand" class="hero-cta">
          <wa-icon slot="start" name="arrow-down"></wa-icon>
          Free Your Mind
        </wa-button>
      </div>
    </section>
    <section class="strata products grid-12-col">
      <wa-card class="card-image product-card">
        <wa-badge variant="brand" class="badge-stock">New</wa-badge>
        <div slot="media" class="landscape-frame">
          <img id="product-1" src="/assets/images/themer/default/morpheus.jpg" alt="" />
        </div>
        <div class="title-rating">
          <h2 class="title">Morpheus</h2>
          <wa-rating label="Rating" value="4" readonly></wa-rating>
        </div>
        <div class="description">
          <p>I see it in your eyes. You have the look of a man who accepts what he sees because he is expecting to wake up. Ironically, that's not far from the truth.</p>
        </div>
        <div slot="footer">
          <wa-button size="small">
            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
            Add to Cart
          </wa-button>
          <wa-button size="small" appearance="outline">
            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
            Save
          </wa-button>
        </div>
      </wa-card>
      <wa-card class="card-image product-card">
        <wa-badge variant="warning" class="badge-stock">Low Stock</wa-badge>
        <div slot="media" class="landscape-frame">
          <img id="product-2" src="/assets/images/themer/default/seraph.jpg" alt="" />
        </div>
        <div class="title-rating">
          <h2 class="title">Seraph</h2>
          <wa-rating label="Rating" value="5" readonly></wa-rating>
        </div>
        <div class="description">
          <p>The Oracle has many enemies, I had to be sure. You do not truly know someone until you fight them.</p>
        </div>
        <div slot="footer">
          <wa-button size="small">
            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
            Add to Cart
          </wa-button>
          <wa-button size="small" appearance="outline">
            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
            Save
          </wa-button>
        </div>
      </wa-card>
      <wa-card class="card-image product-card">
        <div slot="media" class="landscape-frame">
          <img id="product-3" src="/assets/images/themer/default/keymaker.jpg" alt="" />
        </div>
        <div class="title-rating">
          <h2 class="title">Keymaker</h2>
          <wa-rating label="Rating" value="3" readonly></wa-rating>
        </div>
        <div class="description">
          <p>Only the One can open the door. And only during that window can that door be opened.</p>
        </div>
        <div slot="footer">
          <wa-button size="small">
            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
            Add to Cart
          </wa-button>
          <wa-button size="small" appearance="outline">
            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
            Save
          </wa-button>
        </div>
      </wa-card>
    </section>
    <section class="strata blog grid-12-col">
      <div class="column-post-header">
        <div class="post-header">
          <h1 class="post-title">Simulacra &amp; Simulation</h1>
          <div class="post-meta">
            <div class="authors">
              <a href="">
                <wa-avatar image="/assets/images/themer/avatar-baudrillard.jpg" label="Jean Baudrillard" shape="rounded"> </wa-avatar>
                Jean Baudrillard
              </a>
            </div>
            <div class="categories">
              <a href=""><wa-tag size="small" variant="neutral">Action</wa-tag></a>
              <a href=""><wa-tag size="small" variant="success">Dystopia</wa-tag></a>
              <a href=""><wa-tag size="small" variant="warning">Sci-fi</wa-tag></a>
            </div>
          </div>
        </div>
      </div>
      <div class="post-body">
        <p>At an abandoned hotel, a police squad corners Trinity, who overpowers them with superhuman abilities. She flees, pursued by the police and a group of suited Agents capable of similar superhuman feats. She answers a ringing public telephone and vanishes.</p>
        <p>Fishburne stated that once he read the script, he did not understand why other people found it confusing. However, he doubted if the movie would ever be made, because it was "so smart." The Wachowskis instructed Fishburne to base his performance on the character Morpheus in Neil Gaiman's <a href=""><i>Sandman</i></a> comics.</p>
        <h2>The New Biology of Machines</h2>
        <p>The method used for creating these effects involved a technically expanded version of an old art photography technique known as time-slice photography, in which an array of cameras are placed around an object and triggered simultaneously. Each camera captures a still picture, contributing one frame to the video sequence, which creates the effect of "virtual camera movement"; the illusion of a viewpoint moving around an object that appears frozen in time.</p>
        <div class="landscape-frame" style="margin: 0 0 1rem 0;" >
          <img id="blog_feature" src="/assets/images/themer/default/blog_feature.jpg" alt="blog post example image" />
        </div>
        <p>For the "real world," the actors' hair was less styled, their clothing had more textile content, and the cinematographers used longer lenses to soften the backgrounds and emphasize the actors.</p>
<pre class="codeblock">
<code class="language-css">:host,
.wa-theme-purple-power {
  /* ... */
}</code></pre>

