1. Components
  2. Toolbars

Toolbar

Content and actions related to the current screen. They are always placed side by side.

Toolbar orc-c-toolbar

Content and actions related to the current screen. They are always placed side by side.

Absolutely positioned toolbar orc-c-toolbar--absolute

Absolutley positions the toolbar items on medium and large screens.

  • 

    <div class="orc-c-toolbar ">

  <div class="orc-c-toolbar__item ">
    <div class="orc-c-field orc-c-field--inline orc-c-field--date-range orc-c-field--small orc-js-field" data-date-picker data-date-picker-large-screen-width="585">

      <!-- date picker -->
      <span class="orc-c-field start-date orc-js-start-date">
        <label for="start-date" class="orc-c-field__label orc-u-is-vishidden">Start Date</label>
        <input type="date" class="orc-c-input orc-js-start-date" name="fromDate" id="start-date" placeholder="All Dates" min="2017-01-01" max="2019-01-01"  />
    </span>

      <span class="orc-c-field end-date orc-js-vishidden">
        <label for="end-date" class="orc-c-field__label orc-u-is-vishidden">End Date</label>
        <input type="date" class="orc-c-input" name="toDate" id="end-date" placeholder="All Dates" min="2017-01-01" max="2019-01-01"  />
    </span>

      <!-- end date picker -->

    </div>
    <!--end orc-c-field-->

  </div>
  <!-- end orc-c-toolbar__item -->

  <div class="orc-c-toolbar__item ">
    <select class="orc-c-select" id="" name="type" placeholder="Placeholder">

    <option value="option-1" >All offers</option>
    <option value="option-2" >Rooms &amp; suites</option>
    <option value="option-3" >At the casino</option>
    <option value="option-4" >Entertainment</option>
    <option value="option-5" >Food &amp; drink</option>
    <option value="option-6" >Resort credit</option>
    <option value="option-7" >Identity Play</option>
    <option value="option-8" >Tier benefits</option>
    <option value="option-8" >Just for you</option>


</select>
    <!--end orc-c-select-->

  </div>
  <!-- end orc-c-toolbar__item -->


</div>
<!-- end orc-c-toolbar -->
    

  • 

    <div class="orc-c-toolbar orc-c-toolbar--absolute orc-u-margin-top-large">

  <div class="orc-c-toolbar__item ">
    <div class="orc-c-field orc-c-field--inline orc-c-field--date-range orc-c-field--small orc-js-field" data-date-picker data-date-picker-large-screen-width="585">

      <!-- date picker -->
      <span class="orc-c-field start-date orc-js-start-date">
        <label for="start-date" class="orc-c-field__label orc-u-is-vishidden">Start Date</label>
        <input type="date" class="orc-c-input orc-js-start-date" name="fromDate" id="start-date" placeholder="All Dates" min="2017-01-01" max="2019-01-01"  />
    </span>

      <span class="orc-c-field end-date orc-js-vishidden">
        <label for="end-date" class="orc-c-field__label orc-u-is-vishidden">End Date</label>
        <input type="date" class="orc-c-input" name="toDate" id="end-date" placeholder="All Dates" min="2017-01-01" max="2019-01-01"  />
    </span>

      <!-- end date picker -->

    </div>
    <!--end orc-c-field-->

  </div>
  <!-- end orc-c-toolbar__item -->

  <div class="orc-c-toolbar__item ">
    <select class="orc-c-select" id="" name="type" placeholder="Placeholder">

    <option value="option-1" >All offers</option>
    <option value="option-2" >Rooms &amp; suites</option>
    <option value="option-3" >At the casino</option>
    <option value="option-4" >Entertainment</option>
    <option value="option-5" >Food &amp; drink</option>
    <option value="option-6" >Resort credit</option>
    <option value="option-7" >Identity Play</option>
    <option value="option-8" >Tier benefits</option>
    <option value="option-8" >Just for you</option>


</select>
    <!--end orc-c-select-->

  </div>
  <!-- end orc-c-toolbar__item -->


</div>
<!-- end orc-c-toolbar -->

Usage

When to use

Use a toolbar when giving the user a range of options they can choose from without leaving this page. Content include dropdowns (options provided as text) and date range (options provided as a calendar).

When to consider an alternative

The toolbar allows the user to make a choice without leaving this screen. If they need to go elsewhere to complete an action, a button is a better choice.

Class Name Description 
orc-c-toolbar
Required

Apply to the toolbar’s containing HTML element. This is set to display: flex on medium and large screens to place toolbar items side-by-side.

 
orc-c-toolbar--absolute
Required

Apply in addition to orc-c-toolbar to absolutely position the toolbar items on medium and large screens.

 
orc-c-toolbar__item
Required

Apply to each div within orc-c-toolbar to separate out various components within the toolbar.

 
orc-c-field--date-range

Apply within the orc-c-toolbar__item to include datepicker in the toolbar. See date range for more information about classes used in this component.

 
orc-c-select

Apply within the orc-c-toolbar__item to include select menu in the toolbar. See select field for more information about classes used in this component.

 
orc-c-toggle-dropdown

Apply within the orc-c-toolbar__item to include toggle dropdown in the toolbar. See toggle dropdown for more information about classes used in this component.