OpenGov Pattern Library

Basic Panel

Panels are full-height components which appear to move onto the screen from the left. They are used for navigation and filtering. For a wider panel, add the class .wide.

Back Sub-header title subtitle

<div class="ui-panel__wrapper">
  <div class="ui-panel">
    <header class="ui-panel__header">
      <h3>Panel title</h3>
      <div class="ui-panel__close"></div>
    </header>
    <header class="ui-panel__sub-header">
      <h4>
        <a class="ui-panel__back">Back</a>
        Sub-header title <small>subtitle</small>
      </h4>
    </header>
    <footer class="ui-panel__footer">
      <a class="ui-button">Delete</a>
      <div class="ui-panel__actions">
        <a>Cancel</a>
        <button class="ui-button primary">Next</button>
      </div>
    </footer>
    <div class="ui-container_scroll">
    <div class="ui-panel__content">
      <ul class="ui-nav-list">
        <li><a href="#" class="ui-nav-list__item">Item one</a></li>
        <li><a href="#" class="ui-nav-list__item">Item one</a></li>
        <li><a href="#" class="ui-nav-list__item">Item one</a></li>
        <li><a href="#" class="ui-nav-list__item">Item one</a></li>
      </ul>
    </div>
    </div>
  </div>
</div>