Harris Schneiderman edited this page Jul 25, 2017 · 1 revision

Tiles

What is needed?

Tiles are composites, meaning they can contain a number of components. To use the tiles composite, the following is needed:

  • A wrapping element containing the "dqpl-tile" class
  • A header div containing the "dqpl-tile-header" class
  • A tile content div containing the "dqpl-tile-content" class which contains the tile's main content
  • A footer div containing the "dqpl-tile-footer" class

Example HTML

Simple

<div class="dqpl-tile">
  <div class="dqpl-tile-header"></div>
  <div class="dqpl-tile-content"></div>
  <div class="dqpl-tile-footer"></div>
</div>

Complex

<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>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.