Panel

Modular install (In case you don't want to load all of CLUI.)

In your code add the @corelogic/clui/dist/css/components/fonts.css first and then the @corelogic/clui/dist/css/components/panel.css file second from your npm repository. Make sure to load jquery.min.js and then the @corelogic/clui/dist/js/corelogic-ui.min.js file from your npm packages somewhere in your page.

REQUIRES JAVASCRIPT
This element requires both jQuery and corelogic-ui.min.js to function properly.

Call window.clui.panelInit() to initialize the component.

Panel With Footer

Life-of-Loan Certification
NO
YES
IF YOU'RE A DINOSAUR
YES
FOR PETER GRIFFIN
<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">Life-of-Loan Certification</div>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-6">
        <div class="field">
          <label>Flood Insurance Required</label>
          <div class="value">NO</div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="field">
          <label>Car Insurance Required</label>
          <div class="value">YES</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="field">
          <label>Meteor Insurance Required</label>
          <div class="value">IF YOU'RE A DINOSAUR</div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="field">
          <label>Life Insurance Required</label>
          <div class="value">YES</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="field">
          <label>Volcano Insurance Required</label>
          <div class="value">FOR PETER GRIFFIN</div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-footer">
    <input type="button" class="btn btn-default" value="View More">
  </div>
</div>

Panel Without Footer

Life-of-Loan Certification
YOUR CONTENT HERE 
<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">Life-of-Loan Certification</div>
  </div>
  <div class="panel-body panel-gray">
    <div class="row">
      <div class="col-md-12">
        YOUR CONTENT HERE
      </div>
    </div>
  </div>
</div>

Panel With Header Icon

An icon can be an image or a font awesome icon. Icons should be 30x30 in size.

Life-of-Loan Certification
YOUR CONTENT HERE 
<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">
      <div class="icon"><img src="https://placekitten.com/g/30/30" alt=""></div>
      Life-of-Loan Certification
    </div>
  </div>
  <div class="panel-body panel-gray">
    <div class="row">
      <div class="col-md-12">
        YOUR CONTENT HERE
      </div>
    </div>
  </div>
</div>

Panel With Header Add-on(s)

The addon content gets pushed to the right. Anything put after the title and before the addon-component will be spaced out evenly.

Life-of-Loan Certification
YOUR CONTENT HERE 
<div class="panel panel-default">
  <div class="panel-heading addon">
    <div class="panel-title">Life-of-Loan Certification
      <div class="addon-content">
        <div class="icon mg-rt-15"><img src="https://placekitten.com/g/30/30" alt=""></div>
        <button class="btn btn-primary">Click here!</button>
      </div>
    </div>
  </div>
  <div class="panel-body panel-gray">
    <div class="row">
      <div class="col-md-12">
        YOUR CONTENT HERE
      </div>
    </div>
  </div>
</div>

Panel with separators

Life-of-Loan Certification
NO
NO
NO
<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">Life-of-Loan Certification</div>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-12">
        <div class="field">
          <label>Flood Insurance Required</label>
          <div class="value">NO</div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-12">
        <div class="field">
          <label>Flood Insurance Required</label>
          <div class="value">NO</div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-12">
        <div class="field">
          <label>Flood Insurance Required</label>
          <div class="value">NO</div>
        </div>
      </div>
    </div>
  </div>
</div>

Panel with alert

For the left side bar apply alert-green to use green. Valid colors are black, bright-blue, green, yellow, red, salmon, and orange.

Distance to Fire Station
5.6 mi
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
<div class="panel panel-default">
  <div class="panel-heading addon">
    <div class="panel-title">
      <div class="alert-salmon"><i class="fa fa-exclamation-triangle"></i></div>
      Distance to Fire Station
      <div class="addon-content">5.6 mi</div>
    </div>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-12">
        <div class="field">
          <label>Label</label>
          <div class="value">Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>
        </div>
      </div>
    </div>
  </div>
</div>

Panel With Secondary Nav

YOUR CONTENT HERE 
<div class="panel panel-default panel-nav">
    <div class="panel-heading no-left-padding no-right-padding">
        <div class="secondary-nav">
            <div class="container-fluid more">
                <ul class="secondary-tabs">
                    <li class="active"><a class="secondary-tab" href="#">Associated Documents</a></li>
                    <li><a class="secondary-tab" href="#">Varied Document Pricing</a></li>
                    <li><a class="secondary-tab" href="#">Varied Document Pricing</a></li>
                    <li><a class="secondary-tab" href="#">Varied Document Pricing</a></li>
                    <li><a class="secondary-tab" href="#">Varied Document Pricing</a></li>
                </ul>
            </div>
        </div>
    </div>
  <div class="panel-body panel-gray">
    <div class="row">
      <div class="col-md-12">
        YOUR CONTENT HERE
      </div>
    </div>
  </div>
</div>