Drawer

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/drawer.css file second from your npm repository.

You can view an example of how drawer appears on a page here.

Base Drawer

This is a sample header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nibh non dapibus sodales. Aenean est lorem

<div class="drawer">
  <div class="drawer-header">
    <h2>This is a sample header</h2>
  </div>
  <div class="drawer-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nibh non dapibus sodales.
      Aenean est lorem</p>
  </div>
  <div class="drawer-footer">
    <button class="btn btn-primary">Some action</button>
  </div>
</div>

Fixed width Drawer

You can view an example of how fixed width drawer appears on a page here.

The left side will stay a fixed width and right side will resize to fill the remaining space on the right.

We currently support:

Medium size: .drawer-md-fixed which is 420px in width.

Note: More sizes coming soon...

This is a sample header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nibh non dapibus sodales. Aenean est lorem

Macaroni cheese cheesecake dolcelatte. St. agur blue cheese stilton cheese on toast pecorino roquefort cheeseburger mascarpone pepper jack. Rubber cheese cream cheese everyone loves cream cheese the big cheese squirty cheese bavarian bergkase stinking bishop. Queso.

Gouda fondue stilton. Dolcelatte gouda feta cheesy grin fondue cheese and biscuits cheese on toast ricotta. Babybel cut the cheese fromage stinking bishop cheese on toast cottage cheese the big cheese lancashire. Fromage cow stinking bishop cheese slices brie.

Cheese slices cheesecake hard cheese. Bavarian bergkase parmesan parmesan caerphilly stinking bishop cheese slices danish fontina cheesy feet. Cauliflower cheese gouda dolcelatte camembert de normandie cow bavarian bergkase bavarian bergkase cheesy grin. Cut the cheese the big cheese everyone loves blue castello fromage cream cheese.

<div class="row">
  <div class="drawer-md-fixed">
    <div class="drawer-left">
      <div class="drawer">
        <div class="drawer-header">
          <h2>This is a sample header</h2>
        </div>
        <div class="drawer-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nibh non dapibus sodales.
            Aenean est lorem</p>
        </div>
        <div class="drawer-footer">
          <button class="btn btn-primary">Some action</button>
        </div>
      </div>
    </div>
    <div class="drawer-right">
      <p>Macaroni cheese cheesecake dolcelatte. St. agur blue cheese stilton cheese on toast pecorino roquefort
      cheeseburger mascarpone pepper jack. Rubber cheese cream cheese everyone loves cream cheese the big cheese
      squirty cheese bavarian bergkase stinking bishop. Queso.</p>

      <p>Gouda fondue stilton. Dolcelatte gouda feta cheesy grin fondue cheese and biscuits cheese on toast ricotta.
      Babybel cut the cheese fromage stinking bishop cheese on toast cottage cheese the big cheese lancashire. Fromage
      cow stinking bishop cheese slices brie.</p>

      <p>Cheese slices cheesecake hard cheese. Bavarian bergkase parmesan parmesan caerphilly stinking bishop cheese
      slices danish fontina cheesy feet. Cauliflower cheese gouda dolcelatte camembert de normandie cow bavarian
      bergkase bavarian bergkase cheesy grin. Cut the cheese the big cheese everyone loves blue castello fromage cream
      cheese.</p>
    </div>
  </div>
</div>

Fixed Width Sliding Drawer

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


The left side will stay a fixed width and right side will resize to fill the whole page.

We currently support:

Medium size: .drawer-md-fixed which is 420px in width.

Note: More sizes coming soon...

You can view an example of how fixed width drawer appears on a page here.

<div class="row">
  <div class="drawer-md-fixed drawer-slide">
    <div class="drawer-left">
      <div class="toggleButton"><i class="fa fa-caret-left"></i></div>
      <div class="drawer">
        <div class="drawer-header">
          <h2>This is a sample header</h2>
        </div>
        <div class="drawer-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nibh non dapibus sodales.
            Aenean est lorem</p>
        </div>
        <div class="drawer-footer">
          <button class="btn btn-primary">Some action</button>
        </div>
      </div>
    </div>
    <div class="drawer-right">
        <p>Macaroni cheese cheesecake dolcelatte. St. agur blue cheese stilton cheese on toast pecorino roquefort
        cheeseburger mascarpone pepper jack. Rubber cheese cream cheese everyone loves cream cheese the big cheese
        squirty cheese bavarian bergkase stinking bishop. Queso.</p>

        <p>Gouda fondue stilton. Dolcelatte gouda feta cheesy grin fondue cheese and biscuits cheese on toast ricotta.
        Babybel cut the cheese fromage stinking bishop cheese on toast cottage cheese the big cheese lancashire. Fromage
        cow stinking bishop cheese slices brie.</p>

        <p>Cheese slices cheesecake hard cheese. Bavarian bergkase parmesan parmesan caerphilly stinking bishop cheese
        slices danish fontina cheesy feet. Cauliflower cheese gouda dolcelatte camembert de normandie cow bavarian
        bergkase bavarian bergkase cheesy grin. Cut the cheese the big cheese everyone loves blue castello fromage cream
        cheese.</p>
    </div>
  </div>
</div>
<script>
  $('.toggleButton').on('click', toggleDrawer);
</script>

Fixed Width Dual Sliding Drawer

Don't use this for mobile viewports.

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

Make sure you have a way to trigger toggleSecondaryDrawer() from a control to make the secondary drawer show.


The left side will stay a fixed width and right side will resize to fill the whole page. When a controls triggers the second drawer, it will slide out right of the first drawer.

You can view an example of how fixed width drawer appears on a page here.

<div class="row">
  <div class="drawer-md-fixed drawer-slide">
    <div class="drawer-left">
      <div class="toggleButton"><i class="fa fa-caret-left"></i></div>
      <div class="drawer">
        <div class="drawer-header">
          <h2>This is a sample header</h2>
        </div>
        <div class="drawer-body">
          <div class="drawer-column">
            <p>Primary Drawer</p>
            <div class="row mg-bt-15 vertical-parent">
              <div class="col-xs-10">
                <label class="p" for="toggle-demo1">Trigger second column</label>
              </div>
              <div class="col-xs-2 vertical-center right">
                <div class="toggle-container">
                  <input id="toggle-demo1" class="cl-toggle toggle-green" type="checkbox"
                    name="toggle-demo1" onclick="toggleSecondaryDrawer();"/>
                  <label for="toggle-demo1">Toggle Switch Demo</label>
                </div>
               </div>
             </div>
          </div>
           <div class="drawer-column">
            <p>Secondary Drawer</p>
          </div>
        </div>
        <div class="drawer-footer">
          <button class="btn btn-primary">Some action</button>
        </div>
      </div>
    </div>
    <div class="drawer-right">
        <p>Macaroni cheese cheesecake dolcelatte. St. agur blue cheese stilton cheese on toast pecorino roquefort
        cheeseburger mascarpone pepper jack. Rubber cheese cream cheese everyone loves cream cheese the big cheese
        squirty cheese bavarian bergkase stinking bishop. Queso.</p>

        <p>Gouda fondue stilton. Dolcelatte gouda feta cheesy grin fondue cheese and biscuits cheese on toast ricotta.
        Babybel cut the cheese fromage stinking bishop cheese on toast cottage cheese the big cheese lancashire. Fromage
        cow stinking bishop cheese slices brie.</p>

        <p>Cheese slices cheesecake hard cheese. Bavarian bergkase parmesan parmesan caerphilly stinking bishop cheese
        slices danish fontina cheesy feet. Cauliflower cheese gouda dolcelatte camembert de normandie cow bavarian
        bergkase bavarian bergkase cheesy grin. Cut the cheese the big cheese everyone loves blue castello fromage cream
        cheese.</p>
    </div>
  </div>
</div>
<script>
  $('.toggleButton').on('click', toggleDrawer);
</script>

Fixed dual slide

You can view an example of how a fixed dual slide appears on a page here.

This example uses background-fixed class on the drawer-right div. This causes the background image to go from the left edge of the panel to the right side of the screen so it only resizes when the browser window is resized. The secondary column goes over top of the background. In this example, the slide toggle has been removed because the first column is not supposed to move.

<div class="row">
  <div class="drawer-md-fixed drawer-slide">
    <div class="drawer-left">
      <div class="drawer">
        <div class="drawer-header">
          <h2>This is a sample header</h2>
        </div>
        <div class="drawer-body">
          <div class="drawer-column">
            <p>Primary Drawer</p>
            <div class="row mg-bt-15 vertical-parent">
              <div class="col-xs-10">
                <label class="p" for="toggle-demo1">Trigger second column</label>
              </div>
              <div class="col-xs-2 vertical-center right">
                <div class="toggle-container">
                  <input id="toggle-demo1" class="cl-toggle toggle-green" type="checkbox"
                    name="toggle-demo1" onclick="toggleSecondaryDrawer();"/>
                  <label for="toggle-demo1">Toggle Switch Demo</label>
                </div>
               </div>
             </div>
          </div>
           <div class="drawer-column">
            <p>Secondary Drawer</p>
          </div>
        </div>
        <div class="drawer-footer">
          <button class="btn btn-primary">Some action</button>
        </div>
      </div>
    </div>
    <div class="drawer-right background-fixed">
        <p>Macaroni cheese cheesecake dolcelatte. St. agur blue cheese stilton cheese on toast pecorino roquefort
        cheeseburger mascarpone pepper jack. Rubber cheese cream cheese everyone loves cream cheese the big cheese
        squirty cheese bavarian bergkase stinking bishop. Queso.</p>

        <p>Gouda fondue stilton. Dolcelatte gouda feta cheesy grin fondue cheese and biscuits cheese on toast ricotta.
        Babybel cut the cheese fromage stinking bishop cheese on toast cottage cheese the big cheese lancashire. Fromage
        cow stinking bishop cheese slices brie.</p>

        <p>Cheese slices cheesecake hard cheese. Bavarian bergkase parmesan parmesan caerphilly stinking bishop cheese
        slices danish fontina cheesy feet. Cauliflower cheese gouda dolcelatte camembert de normandie cow bavarian
        bergkase bavarian bergkase cheesy grin. Cut the cheese the big cheese everyone loves blue castello fromage cream
        cheese.</p>
    </div>
  </div>
</div>
<script>
  $('.toggleButton').on('click', toggleDrawer);
</script>