fork.html

---
layout: default-fork
style: reversed
permalink: /styleguide/content/
---

<section>
  <header class="row">
    <h1>Weld styles</h1>
    <h3>These styles are specifically for content on the marketing site.</h3>
  </header>
</section>

<section class="center">
  <article>
    <h2>.center</h2>
    <img src="{{ site.url }}/img/more/how.svg" alt="" width="480">
    <h4>Element that has a single image and centered content.</h4>
    <p>Designed to highlight a high-level feature or single concept very directly. The idea here is that Weld takes all of the content from multiple sources to give you actions at the right time. We want to keep these to 1 paragraph since reading more than one paragraph centered is hard.</p>
  </article>
</section>

<section class="center double">
  <article>
    <h2>.center .double</h2>
    <div>
      <img src="{{ site.url }}/img/more/email.svg" alt="" width="240">
      <h4>Single image; centered.</h4>
      <p>We want to keep these to 2 sentences. Reading much more centered at this width is hard.</p>
    </div>
    <div>
      <img src="{{ site.url }}/img/more/slack.svg" alt="" width="240">
      <h4>Single image; centered.</h4>
      <p>We want to keep these to 2 sentences. Reading much more centered at this width is hard.</p>
    </div>
  </article>
</section>

<section class="center triple">
  <article>
    <h2>.center .triple</h2>
    <div>
      <img src="{{ site.url }}/img/more/email.svg" alt="" width="180">
      <h4>Single image; centered.</h4>
      <p class="input">schedule today 10am @bill</p>
      <p>We want to keep these to 1 sentence.</p>
    </div>
    <div>
      <img src="{{ site.url }}/img/more/slack.svg" alt="" width="180">
      <h4>Single image; centered.</h4>
      <p>We want to keep these to 1 sentence.</p>
    </div>
    <div>
      <img src="{{ site.url }}/img/more/slack.svg" alt="" width="180">
      <h4>Single image; centered.</h4>
      <p>We want to keep these to 1 sentence.</p>
    </div>
  </article>
</section>

<section>
  <article>
    <h2>Generic, no classes.</h2>
    <h4>This is the standard section of content.</h4>
    <p>Designed for readability on all devices at all sizes. This works on the blog and any page that is content rich. I'd like this to serve as the default layout until there is necessity for one of the other styles.</p>
  </article>
</section>

<section>
  <article>
    <h2>Generic, no classes.</h2>
    <h4>This is the standard section of content.</h4>
    <p>Designed for readability on all devices at all sizes. This works on the blog and any page that is content rich. I'd like this to serve as the default layout until there is necessity for one of the other styles.</p>
    <figure>
      <img src="{{ site.assets-url }}/img/faq/scheduling-email.jpg" alt="everyday email" style="border:none;max-width:600px;">
      <figcaption>An everyday email about scheduling</figcaption>
    </figure>
  </article>
</section>