<ul class="flexblock [modifier class]">
  <li>
    <a href="#">
      Item 1
     </a>
  </li>
  <li>
    <a href="#">
      Item 2
     </a>
  </li>
  <li>
    <a href="#">
      Item 3
     </a>
  </li>
  <li>
    <a href="#">
      Item 4
     </a>
  </li>
</ul>

<ul class="flexblock activity">
  <li>
    <a href="#" title="UX Designer at ACME">
      <div>
        <p class="year">
          2016
        </p>
        <p class="title">
          UX Designer at ACME
        </p>
        <p class="summary">
          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
        </p>
      </div>
    </a>
  </li>
  <li>
    <a href="#" title="14 world famous buildings to inspire you">
      <p class="year">
        2 mins ago
      </p>
      <p class="title">
        14 world famous buildings to inspire you
      </p>
      <p class="summary">
        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
      </p>
    </a>
  </li>
  <li>
    <a href="#" title="Co-Founder of GAMMA">
      <p class="year">
        2013
      </p>
      <p class="title">
        Co-Founder of GAMMA
      </p>
      <p class="summary">
        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
      </p>
    </a>
  </li>
</ul>

<ul class="flexblock clients [modifier class]">
  <li>
    <a href="#" title="Client">
      <figure>
        <img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
        <figcaption>
          <h3>Interfaces</h3>
          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
        </figcaption>
      </figure>
    </a>
  </li>
  <li>
    <a href="#" title="Client">
      <figure>
        <img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
        <figcaption>
          <h3>Interfaces</h3>
          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
        </figcaption>
      </figure>
    </a>
  </li>
</ul>

<ul class="flexblock features">
  <li>
    <div>
      <h2> <span>100<sup>%</sup></span> customizable</h2>
      Well documented.
    </div>
  </li>
  <li>
    <div>
      <span><sup>$</sup>48</span>
      <h2>Extra virgin olive oil</h2>
      The Spanish caviar.
    </div>
  </li>
  <li>
    <div>
      <h2>
        Ultra-fast Wifi
      </h2>
      Simple file sharing.
    </div>
  </li>
</ul>

<ul class="flexblock gallery">
  <li>
    <a href="#">
      <figure>
        <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
        <figcaption>
          <h2>uWatch</h2>
          <p>By Jane Doe</p>
        </figcaption>
      </figure>
    </a>
  </li>
  <li>
    <a href="#">
      <figure>
        <img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
        <figcaption>
          <h2>Ellen Daniels</h2>
          <p>CEO</p>
        </figcaption>
      </figure>
    </a>
  </li>
  <li>
    <a href="#">
      <figure>
        <img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
        <figcaption>
          <h2>New York</h2>
          <p>3,456 rooms</p>
        </figcaption>
      </figure>
    </a>
  </li>
</ul>

<ul class="flexblock gallery">
  <li>
    <a href="#">
      <div class="overlay">
        <h2>New York</h2>
        <p>1,234 rooms</p>
      </div>
      <img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
    </a>
  </li>
  <li>
    <a href="#">
      <div class="overlay">
        <h2>uWatch</h2>
        <time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
      </div>
      <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
    </a>
  </li>
  <li>
    <a href="#">
      <div class="overlay">
        <h2>Ellen Daniels</h2>
        <p>CEO</p>
      </div>
      <img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
    </a>
  </li>
</ul>

<ul class="flexblock metrics  [modifier class]">
  <li> Founded
    <span>2016</span>
  </li>
  <li>
    <span>24M</span>
    Subscribers
  </li>
  <li>
    Revenue:
    <span>$16M</span>
  </li>
  <li>
    Monthly Growth
    <span>64%</span>
  </li>
</ul>

<ul class="flexblock plans [modifier class]">
  <li>
    <a href="#" title="Purchase">
      <h2>Basic</h2>
      <div>
        <span class="price">Free</span>
        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
        <span class="button">Select</span>
      </div>
    </a>
  </li>
  <li>
    <a href="#" title="Purchase">
      <h2>Medium</h2>
      <div>
        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
        <p>Clean markup with popular naming conventions. Minimum effort.</p>
        <span class="button">Buy Now</span>
      </div>
    </a>
  </li>
  <li>
    <a href="#" title="Purchase">
      <h2>Premium <sup>(save 20%)</sup></h2>
      <div>
        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
        <span class="button">Select</span>
      </div>
    </a>
  </li>
</ul>

<ul class="flexblock reasons">
  <li>
    <h2>Why WebSlides? Work better, faster.</h2>
    <p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
  </li>
  <li>
    <h2> Good karma. Just the essentials and using lovely CSS.</h2>
    <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
  </li>
</ul>

<ul class="flexblock specs">
  <li>
    <div>
      <h2>Ultra-Fast WiFi</h2>
      Simple and secure file sharing.
    </div>
  </li>
  <li>
    <div>
      <h2>All day battery life</h2>
      Your battery worries may be over.
    </div>
  </li>
  <li>
    <div>
      <h2>Lifetime Warranty </h2>
      We'll fix it or if we can't, we'll replace it.
    </div>
  </li>
</ul>

<ul class="flexblock steps">
  <li>
    <h2>01. Passion</h2>
    <p>When you're really passionate about your job, you can change the world.</p>
  </li>
  <li>
    <div class="process step-2"></div>
    <h2>02. Purpose</h2>
    <p>Why does this business exist? How are you different? Why matters?</p>
  </li>
  <li>
    <div class="process step-3"></div>
    <h2>03. Principles</h2>
    <p>Leadership through usefulness, openness, empathy, and good taste.</p>
  </li>
  <li>
    <div class="process step-4"></div>
    <h2>04. Process</h2>
    <ul>
      <li>Useful</li>
      <li>Easy</li>
      <li>Fast</li>
      <li>Beautiful</li>
    </ul>
  </li>
</ul>