import React from 'react';

const RibbonSection = () => (
  <article className="article">
    <h2 className="article-title">Ribbons</h2>

    <div className="row">
      <div className="col-xl-4">
        <div className="box box-default ui-ribbon-container">
          <div className="ui-ribbon-wrapper">
            <div className="ui-ribbon">
                                30% Off
                            </div>
          </div>
          <div className="box-header">Ribbon</div>
          <div className="box-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?</p>
          </div>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="box box-default ui-ribbon-container ui-ribbon-primary">
          <div className="ui-ribbon-wrapper">
            <div className="ui-ribbon">
                                30% Off
                            </div>
          </div>
          <div className="box-header">Ribbon-primary</div>
          <div className="box-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?</p>
          </div>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="box box-default ui-ribbon-container ui-ribbon-success">
          <div className="ui-ribbon-wrapper">
            <div className="ui-ribbon">
                                30% Off
                            </div>
          </div>
          <div className="box-header">Ribbon-success</div>
          <div className="box-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?</p>
          </div>
        </div>
      </div>
    </div>

    <div className="row">
      <div className="col-xl-4">
        <div className="box box-default ui-ribbon-container ui-ribbon-info">
          <div className="ui-ribbon-wrapper">
            <div className="ui-ribbon">
                                30% Off
                            </div>
          </div>
          <div className="box-header">Ribbon-info</div>
          <div className="box-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?</p>
          </div>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="box box-default ui-ribbon-container ui-ribbon-warning">
          <div className="ui-ribbon-wrapper">
            <div className="ui-ribbon">
                                30% Off
                            </div>
          </div>
          <div className="box-header">Ribbon-warning</div>
          <div className="box-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?</p>
          </div>
        </div>
      </div>
      <div className="col-xl-4">
        <div className="box box-default ui-ribbon-container ui-ribbon-danger">
          <div className="ui-ribbon-wrapper">
            <div className="ui-ribbon">
                                30% Off
                            </div>
          </div>
          <div className="box-header">Ribbon-danger</div>
          <div className="box-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?</p>
          </div>
        </div>
      </div>
    </div>

  </article>
    );

module.exports = RibbonSection;
