tiles

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>