Card

<div class="e-card">
  <div class="e-card__content">
    <img src="https://placehold.it/160x160/7a81be/fff">
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>

                          <div class="e-card">
                            <div class="e-card__content"><img src="https://placehold.it/160x160/7a81be/fff"></div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>

<div class="e-card">
  <div class="e-card__content e-card__content-nopadding">
    <img src="https://placehold.it/260x260/7a81be/fff">
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>

                          <div class="e-card">
                            <div class="e-card__content e-card__content-nopadding"><img src="https://placehold.it/260x260/7a81be/fff"></div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>

<div class="e-card">
  <div class="e-card__content">
    <iframe src="https://placehold.it/250x250/7a81be/fff?text=Iframe+content"></iframe>
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>

                          <div class="e-card">
                            <div class="e-card__content">
                              <iframe src="https://placehold.it/250x250/7a81be/fff?text=Iframe+content"></iframe>
                            </div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>

<div class="e-card e-card-fluid">
  <div class="e-card__content">
    <img src="https://placehold.it/250x250/7a81be/fff">
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>

                          <div class="e-card e-card-fluid">
                            <div class="e-card__content"><img src="https://placehold.it/250x250/7a81be/fff"></div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>

<div class="e-card e-clickable">
  <div class="e-card__content e-card__content-empty">
    <div class="e-card__action">
      <e-icon icon="cog" size="middle"></e-icon>
    </div>
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>

                          <div class="e-card e-clickable">
                            <div class="e-card__content e-card__content-empty">
                              <div class="e-card__action">
                                <e-icon icon="cog" size="middle"></e-icon>
                              </div>
                            </div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>

<div class="e-card">
  <div class="e-card__content">
    <img src="https://placehold.it/250x250/7a81be/fff">
    <div class="e-card__actions">
      <div class="e-card__buttons">
        <div class="e-buttongroup e-buttongroup-sticky">
          <e-tooltip content="Edit item">
            <button type="button" data-toggle="#title, #input" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="pencil"></e-icon>
            </button>
          </e-tooltip>
        </div>
      </div>
    </div>
  </div>
  <div class="e-card__title">
    <span id="title">
      card name
    </span>
    <input id="input" type="text" value="card name" class="e-input e-hidden e-card__input">
  </div>
</div>

                          <div class="e-card">
                            <div class="e-card__content"><img src="https://placehold.it/250x250/7a81be/fff">
                              <div class="e-card__actions">
                                <div class="e-card__buttons">
                                  <div class="e-buttongroup e-buttongroup-sticky">
                                    <e-tooltip content="Edit item">
                                      <button type="button" data-toggle="#title, #input" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="pencil"></e-icon>
                                      </button>
                                    </e-tooltip>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="e-card__title"><span id="title">card name</span>
                              <input id="input" type="text" value="card name" class="e-input e-hidden e-card__input">
                            </div>
                          </div>

<div class="e-card">
  <div class="e-card__content">
    <img src="https://placehold.it/250x250/7a81be/fff">
    <div class="e-card__actions">
      <div class="e-card__buttons">
        <div class="e-buttongroup e-buttongroup-sticky">
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="pencil"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="files-o"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="trash-o"></e-icon>
            </button>
          </e-tooltip>
        </div>
      </div>
      <a href="#" class="e-card__action">
        <e-icon icon="cog" type="inline" color="white"></e-icon>
        Edit this item
      </a>
    </div>
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>

                          <div class="e-card">
                            <div class="e-card__content"><img src="https://placehold.it/250x250/7a81be/fff">
                              <div class="e-card__actions">
                                <div class="e-card__buttons">
                                  <div class="e-buttongroup e-buttongroup-sticky">
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="pencil"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="files-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="trash-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                  </div>
                                </div><a href="#" class="e-card__action">
                                  <e-icon icon="cog" type="inline" color="white"></e-icon>Edit this item</a>
                              </div>
                            </div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>

<div class="e-card e-card-fluid">
  <div class="e-card__content">
    <img src="https://placehold.it/40x40/7a81be/fff">
    <div class="e-card__actions">
      <div class="e-card__buttons">
        <div class="e-buttongroup e-buttongroup-sticky">
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="pencil"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="files-o"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="trash-o"></e-icon>
            </button>
          </e-tooltip>
        </div>
      </div>
    </div>
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>

                          <div class="e-card e-card-fluid">
                            <div class="e-card__content"><img src="https://placehold.it/40x40/7a81be/fff">
                              <div class="e-card__actions">
                                <div class="e-card__buttons">
                                  <div class="e-buttongroup e-buttongroup-sticky">
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="pencil"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="files-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="trash-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>

<div class="e-card e-card-fluid e-card-active">
  <div class="e-card__content">
    <img src="https://placehold.it/40x40/7a81be/fff">
    <div class="e-card__actions">
      <div class="e-card__buttons">
        <div class="e-buttongroup e-buttongroup-sticky">
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="pencil"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="files-o"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="trash-o"></e-icon>
            </button>
          </e-tooltip>
        </div>
      </div>
    </div>
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>

                          <div class="e-card e-card-fluid e-card-active">
                            <div class="e-card__content"><img src="https://placehold.it/40x40/7a81be/fff">
                              <div class="e-card__actions">
                                <div class="e-card__buttons">
                                  <div class="e-buttongroup e-buttongroup-sticky">
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="pencil"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="files-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="trash-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>

<div class="e-card">
  <div class="e-card__content e-card__content-nopadding">
    <img src="https://placehold.it/260x260/7a81be/fff">
    <div class="e-card__actions">
      <div class="e-card__buttons">
        <div class="e-buttongroup e-buttongroup-sticky">
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="pencil"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="files-o"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="trash-o"></e-icon>
            </button>
          </e-tooltip>
        </div>
      </div>
      <a href="#" class="e-card__action">
        <e-icon icon="cog" type="inline" color="white"></e-icon>
        Edit this item
      </a>
    </div>
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>
<div class="e-card">
  <div class="e-card__content e-card__content-nopadding">
    <img src="https://placehold.it/260x260/7a81be/fff">
    <div class="e-card__actions">
      <div class="e-card__buttons">
        <div class="e-buttongroup e-buttongroup-sticky">
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="pencil"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="files-o"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="trash-o"></e-icon>
            </button>
          </e-tooltip>
        </div>
      </div>
      <a href="#" class="e-card__action">
        <e-icon icon="cog" type="inline" color="white"></e-icon>
        Edit this item
      </a>
    </div>
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>
<div class="e-card">
  <div class="e-card__content e-card__content-nopadding">
    <img src="https://placehold.it/260x260/7a81be/fff">
    <div class="e-card__actions">
      <div class="e-card__buttons">
        <div class="e-buttongroup e-buttongroup-sticky">
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="pencil"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="files-o"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="trash-o"></e-icon>
            </button>
          </e-tooltip>
        </div>
      </div>
      <a href="#" class="e-card__action">
        <e-icon icon="cog" type="inline" color="white"></e-icon>
        Edit this item
      </a>
    </div>
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>
<div class="e-card">
  <div class="e-card__content e-card__content-nopadding">
    <img src="https://placehold.it/260x260/7a81be/fff">
    <div class="e-card__actions">
      <div class="e-card__buttons">
        <div class="e-buttongroup e-buttongroup-sticky">
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="pencil"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="files-o"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="trash-o"></e-icon>
            </button>
          </e-tooltip>
        </div>
      </div>
      <a href="#" class="e-card__action">
        <e-icon icon="cog" type="inline" color="white"></e-icon>
        Edit this item
      </a>
    </div>
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>
<div class="e-card">
  <div class="e-card__content e-card__content-nopadding">
    <img src="https://placehold.it/260x260/7a81be/fff">
    <div class="e-card__actions">
      <div class="e-card__buttons">
        <div class="e-buttongroup e-buttongroup-sticky">
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="pencil"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="files-o"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="trash-o"></e-icon>
            </button>
          </e-tooltip>
        </div>
      </div>
      <a href="#" class="e-card__action">
        <e-icon icon="cog" type="inline" color="white"></e-icon>
        Edit this item
      </a>
    </div>
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>
<div class="e-card">
  <div class="e-card__content e-card__content-nopadding">
    <img src="https://placehold.it/260x260/7a81be/fff">
    <div class="e-card__actions">
      <div class="e-card__buttons">
        <div class="e-buttongroup e-buttongroup-sticky">
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="pencil"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="files-o"></e-icon>
            </button>
          </e-tooltip>
          <e-tooltip content="Edit item">
            <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="trash-o"></e-icon>
            </button>
          </e-tooltip>
        </div>
      </div>
      <a href="#" class="e-card__action">
        <e-icon icon="cog" type="inline" color="white"></e-icon>
        Edit this item
      </a>
    </div>
  </div>
  <div class="e-card__title">
    <span>
      card name
    </span>
  </div>
</div>

                          <div class="e-card">
                            <div class="e-card__content e-card__content-nopadding"><img src="https://placehold.it/260x260/7a81be/fff">
                              <div class="e-card__actions">
                                <div class="e-card__buttons">
                                  <div class="e-buttongroup e-buttongroup-sticky">
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="pencil"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="files-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="trash-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                  </div>
                                </div><a href="#" class="e-card__action">
                                  <e-icon icon="cog" type="inline" color="white"></e-icon>Edit this item</a>
                              </div>
                            </div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>
                          <div class="e-card">
                            <div class="e-card__content e-card__content-nopadding"><img src="https://placehold.it/260x260/7a81be/fff">
                              <div class="e-card__actions">
                                <div class="e-card__buttons">
                                  <div class="e-buttongroup e-buttongroup-sticky">
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="pencil"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="files-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="trash-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                  </div>
                                </div><a href="#" class="e-card__action">
                                  <e-icon icon="cog" type="inline" color="white"></e-icon>Edit this item</a>
                              </div>
                            </div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>
                          <div class="e-card">
                            <div class="e-card__content e-card__content-nopadding"><img src="https://placehold.it/260x260/7a81be/fff">
                              <div class="e-card__actions">
                                <div class="e-card__buttons">
                                  <div class="e-buttongroup e-buttongroup-sticky">
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="pencil"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="files-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="trash-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                  </div>
                                </div><a href="#" class="e-card__action">
                                  <e-icon icon="cog" type="inline" color="white"></e-icon>Edit this item</a>
                              </div>
                            </div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>
                          <div class="e-card">
                            <div class="e-card__content e-card__content-nopadding"><img src="https://placehold.it/260x260/7a81be/fff">
                              <div class="e-card__actions">
                                <div class="e-card__buttons">
                                  <div class="e-buttongroup e-buttongroup-sticky">
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="pencil"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="files-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="trash-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                  </div>
                                </div><a href="#" class="e-card__action">
                                  <e-icon icon="cog" type="inline" color="white"></e-icon>Edit this item</a>
                              </div>
                            </div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>
                          <div class="e-card">
                            <div class="e-card__content e-card__content-nopadding"><img src="https://placehold.it/260x260/7a81be/fff">
                              <div class="e-card__actions">
                                <div class="e-card__buttons">
                                  <div class="e-buttongroup e-buttongroup-sticky">
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="pencil"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="files-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="trash-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                  </div>
                                </div><a href="#" class="e-card__action">
                                  <e-icon icon="cog" type="inline" color="white"></e-icon>Edit this item</a>
                              </div>
                            </div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>
                          <div class="e-card">
                            <div class="e-card__content e-card__content-nopadding"><img src="https://placehold.it/260x260/7a81be/fff">
                              <div class="e-card__actions">
                                <div class="e-card__buttons">
                                  <div class="e-buttongroup e-buttongroup-sticky">
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="pencil"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="files-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                    <e-tooltip content="Edit item">
                                      <button type="button" class="e-btn e-btn-onlyicon e-svgclickfix">
                                        <e-icon icon="trash-o"></e-icon>
                                      </button>
                                    </e-tooltip>
                                  </div>
                                </div><a href="#" class="e-card__action">
                                  <e-icon icon="cog" type="inline" color="white"></e-icon>Edit this item</a>
                              </div>
                            </div>
                            <div class="e-card__title"><span>card name</span></div>
                          </div>