Containers

Paper

Much of our business is simply replacing basic forms. Use this familiar container to focus users on completing a flow.

Give us your info

So we can better serve you.

Other content can go here.

Forms or splash content with a CTA will probably be the target experience here.

.box.box--black-light.xs-p5
  .paper
    %section
      %h3.paper__title Give us your info
      %p.paper__subtitle So we can better serve you.
    %hr/
    %section
      %h4 Other content can go here.
      %p Forms or splash content with a CTA will probably be the target experience here.

<div class='box box--black-light xs-p5'>
  <div class='paper'>
    <section>
      <h3 class='paper__title'>Give us your info</h3>
      <p class='paper__subtitle'>So we can better serve you.</p>
    </section>
    <hr>
    <section>
      <h4>Other content can go here.</h4>
      <p>Forms or splash content with a CTA will probably be the target experience here.</p>
    </section>
  </div>
</div>

Container

Our standard container, used on pretty much all pages.

Look ma, I'm contained!

.box.box--black-light.xs-p5
  .container
    %section
      %h2 Look ma, I'm contained!

<div class='box box--black-light xs-p5'>
  <div class='container'>
    <section>
      <h2>Look ma, I'm contained!</h2>
    </section>
  </div>
</div>

Fluid Container

Our fluid container, used on fullscreen pages like candidate /interviews.

Look ma, I'm fluid!

.box.box--black-light.xs-p5
  .fluid-container
    %section
      %h2 Look ma, I'm fluid!

<div class='box box--black-light xs-p5'>
  <div class='fluid-container'>
    <section>
      <h2>Look ma, I'm fluid!</h2>
    </section>
  </div>
</div>

HIRED

Styleguide