Composites

Tiles

Dashboard tiles are typically found in a Dashboard workspace. They are used to summarize, synthesize and allow exploration of different cross-sections of data within the application.

Quick look

  1. Other than the content within the tile, there are a few aspects about them that are customizable: they can have/not have up to (2) filters, they can/not have a customization menu, and they can/not have a show more section.
  2. Filters are ways of including or excluding data that would show up in the tile. Examples are incomplete/complete, tag, status, etc… As of now they support a select list, although a combobox is a reasonable option as well.
  3. The customization menu has a few options inside it: Remove this tile (if the tile is removable) and customize. The customization itself will (from a modal) will allow the user to make more substantial changes to what data is present in the tile not just filtering what is there by default.
  4. The show more section will double the size of the tile (vertically) and show more information (based on context). It will also allow for a scrollbar to appear if the data exceeds what can be shown in the tile’s expanded form. It can also optionally have a show fewer which will collapse the tile back to its original form.
  5. Filters, expansions and customizations on tiles are all sticky and will be remembered even after a user leaves a session and comes back.

Try it out

Tile

sort by
  • Date
  • Name
  • Thing 1
  • Thing 2
  • Thing 3

Footer content

Code samples

<div class="dqpl-tile">
  <div class="dqpl-tile-header">
    <div class="dqpl-row">
      <h4>Tile</h4>
      <div class="dqpl-options-menu-wrap">
        <button class="dqpl-options-menu-trigger" type="button" aria-controls="options-menu-1" aria-label="Sample Options" aria-expanded="false">
          <div class="fa fa-ellipsis-v" aria-hidden="true"></div>
        </button>
        <ul class="dqpl-options-menu" id="options-menu-1" role="menu" aria-expanded="false">
          <li class="dqpl-options-menuitem" role="menuitem" tabindex="-1">Item 1</li>
          <li class="dqpl-options-menuitem" role="menuitem" tabindex="-1">Item 2</li>
        </ul>
      </div>
    </div>
    <div class="dqpl-row">
      <div class="dqpl-label" id="filter-label">Filter</div>
      <div class="dqpl-select">
        <div class="dqpl-combobox" role="combobox" tabindex="0" aria-readonly="true" aria-autocomplete="none" aria-owns="filter-list" aria-expanded="false" aria-labelledby="filter-label" aria-activedescendant="default">
          <div class="dqpl-pseudo-value">Filter option 1</div>
        </div>
        <ul class="dqpl-listbox" role="listbox" id="filter-list">
          <li class="dqpl-option" role="option" id="default">Filter option 1</li>
          <li class="dqpl-option" role="option">Filter option 2</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="dqpl-tile-content">
    <ul class="dqpl-list">
      <li>Thing 1</li>
      <li>Thing 2</li>
      <li>Thing 3</li>
    </ul>
  </div>
  <div class="dqpl-tile-footer">
    <p>Footer content</p>
  </div>
</div>

For more information on implementation read thewiki.