Pricing Layout Example

<section className="u-bkgdColorLightestGray rev-TextCenter">
  <Row>
    <Col>
      <h2>Pricing Options</h2>
      <p className="Lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </Col>
  </Row>
  <Row>
    <Col large={11} smallCentered>
      <Row collapse flex alignCenter>
        <Col small={12} large={4}>
          <Card large>
            <Row>
              <Col>
                <h4>Option A</h4>
              </Col>
              <Col>
                <p className="Pricing-cost"><strong><small>$</small>100</strong> / month</p>
              </Col>
              <Col>
                <ul className="rev-List rev-List--dividers">
                  <li>Included item</li>
                  <li>Included item</li>
                  <li>Included item</li>
                </ul>
              </Col>
              <Col>
                <Button secondary>Select</Button>
              </Col>
            </Row>
          </Card>
        </Col>
        <Col small={12} large={4}>
          <Card primary large>
            <Row>
              <Col>
                <h4>Option B</h4>
              </Col>
              <Col>
                <p className="Pricing-cost"><strong><small>$</small>150</strong> / month</p>
              </Col>
              <Col>
                <ul className="rev-List rev-List--dividers">
                  <li>Included item</li>
                  <li>Included item</li>
                  <li>Included item</li>
                  <li>Included item</li>
                </ul>
              </Col>
              <Col>
                <Button primary large>Select</Button>
              </Col>
            </Row>
          </Card>
        </Col>
        <Col small={12} large={4}>
          <Card large>
            <Row>
              <Col>
                <h4>Option C</h4>
              </Col>
              <Col>
                <p className="Pricing-cost"><strong><small>$</small>200</strong> / month</p>
              </Col>
              <Col>
                <ul className="rev-List rev-List--dividers">
                  <li>Included item</li>
                  <li>Included item</li>
                  <li>Included item</li>
                </ul>
              </Col>
              <Col>
                <Button secondary>Select</Button>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </Col>
  </Row>
</section>

<section className="u-bkgdColorLightestGray rev-TextCenter">
  <Row>
    <Col>
      <h2>2 Equal Options</h2>
      <p className="Lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </Col>
  </Row>
  <Row>
    <Col large={11} smallCentered>
      <Row flex alignCenter>
        <Col small={12} large={6}>
          <Card large>
            <Row>
              <Col>
                <h4>Option A</h4>
              </Col>
              <Col>
                <p className="Pricing-cost"><strong><small>$</small>100</strong> / month</p>
              </Col>
              <Col>
                <ul className="rev-List rev-List--dividers">
                  <li>Included item</li>
                  <li>Included item</li>
                  <li>Included item</li>
                </ul>
              </Col>
              <Col>
                <Button>Choose Plan</Button>
              </Col>
            </Row>
          </Card>
        </Col>
        <Col small={12} large={6}>
          <Card large>
            <Row>
              <Col>
                <h4>Option B</h4>
              </Col>
              <Col>
                <p className="Pricing-cost"><strong><small>$</small>150</strong> / month</p>
              </Col>
              <Col>
                <ul className="rev-List rev-List--dividers">
                  <li>Included item</li>
                  <li>Included item</li>
                  <li>Included item</li>
                </ul>
              </Col>
              <Col>
                <Button>Choose Plan</Button>
              </Col>
            </Row>
          </Card>
        </Col>
        
      </Row>
    </Col>
  </Row>
</section>

<section className="u-bkgdColorLightestGray">
  <Row>
    <Col className="rev-TextCenter">
      <h2>The Price</h2>
      <p className="rev-Lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </Col>
  </Row>
  <Row>
    <Col large={11} smallCentered>
      <Card primary large>
        <Row flex alignCenter>
          <Col small={12} medium={6} large={8}>
            <h3>Single Option</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </Col>
          <Col small={12} medium={6} large={4} className="rev-TextCenter">
            <p className="Pricing-cost"><strong><small>$</small>100</strong> / month</p>
          </Col>
        </Row>
        <Row>
          <Col>
            <ul className="rev-List rev-List--twoCol rev-List--dividers">
              <li>Included item</li>
              <li>Included item</li>
              <li>Included item</li>
              <li>Included item</li>
            </ul>
          </Col>
          <Col small={12} className="rev-TextCenter">
            <Button>Get Started</Button>
          </Col>
        </Row>
      </Card>
    </Col>
  </Row>
</section>