Link copied!

Card Page Examples

<div class="e-layout">
  <header class="e-layout__header">
    <a class="e-layout__back" href="#">
      <e-layout-back-button>Go to Page Title</e-layout-back-button>
    </a>
    <h1 class="e-layout__title">Page Title Goes Here</h1>
    <div class="e-layout__actions">
      <button class="e-layout__action e-btn" type="button">Button</button>
      <button class="e-layout__action e-btn e-btn-primary" type="button">Primary Action</button>
    </div>
  </header>
  <main class="e-layout__content">
    <section class="e-layout__section e-padding-l">
      <div class="e-grid e-grid-medium e-grid-wrap">
        <div class="e-cell e-cell-3 e-cell-medium">
          <div class="e-card e-card-has_overlay e-card-fluid">
            <div class="e-card__content"><img class="e-card__preview" src="https://place-hold.it/320x240/7a81be/ffffff&amp;text=320x240&amp;fontsize=23"></div>
            <div class="e-card__buttons">
              <div class="e-buttongroup e-buttongroup-sticky">
                <e-tooltip content="Edit">
                  <button class="e-btn e-btn-onlyicon" type="button">
                    <e-icon icon="pencil"></e-icon>
                  </button>
                </e-tooltip>
                <e-tooltip content="Copy">
                  <button class="e-btn e-btn-onlyicon" type="button">
                    <e-icon icon="files-o"></e-icon>
                  </button>
                </e-tooltip>
                <e-tooltip content="Delete">
                  <button class="e-btn e-btn-onlyicon" type="button">
                    <e-icon icon="trash-o"></e-icon>
                  </button>
                </e-tooltip>
              </div>
            </div>
            <div class="e-card__action"><a class="e-btn e-btn-primary" href="#">Edit Item</a></div>
            <div class="e-card__lead">
              <div class="e-card__caption">
                <div class="e-card__title">Card Title Goes Here</div>
              </div>
            </div>
          </div>
        </div>
        <div class="e-cell e-cell-3 e-cell-medium">
          <div class="e-card e-card-fluid">
            <div class="e-card__content e-card__content-nopadding"><img class="e-card__preview" src="https://place-hold.it/320x240/7a81be/ffffff&amp;text=320x240&amp;fontsize=23"></div>
            <div class="e-card__lead">
              <div class="e-card__caption">
                <div class="e-card__title">Card Title Goes Here</div>
              </div>
            </div>
          </div>
        </div>
        <div class="e-cell e-cell-3 e-cell-medium">
          <div class="e-card e-card-fluid">
            <div class="e-card__content e-card__content-nopadding"><img class="e-card__preview" src="https://place-hold.it/320x240/7a81be/ffffff&amp;text=320x240&amp;fontsize=23"></div>
            <div class="e-card__lead">
              <div class="e-card__caption">
                <div class="e-card__title">Card Title Goes Here</div>
              </div>
            </div>
          </div>
        </div>
        <div class="e-cell e-cell-3 e-cell-medium">
          <div class="e-card e-card-fluid">
            <div class="e-card__content e-card__content-nopadding"><img class="e-card__preview" src="https://place-hold.it/320x240/7a81be/ffffff&amp;text=320x240&amp;fontsize=23"></div>
            <div class="e-card__lead">
              <div class="e-card__caption">
                <div class="e-card__title">Card Title Goes Here</div>
              </div>
            </div>
          </div>
        </div>
        <div class="e-cell e-cell-3 e-cell-medium">
          <div class="e-card e-card-fluid">
            <div class="e-card__content e-card__content-nopadding"><img class="e-card__preview" src="https://place-hold.it/320x240/7a81be/ffffff&amp;text=320x240&amp;fontsize=23"></div>
            <div class="e-card__lead">
              <div class="e-card__caption">
                <div class="e-card__title">Card Title Goes Here</div>
              </div>
            </div>
          </div>
        </div>
        <div class="e-cell e-cell-3 e-cell-medium">
          <div class="e-card e-card-fluid">
            <div class="e-card__content e-card__content-nopadding"><img class="e-card__preview" src="https://place-hold.it/320x240/7a81be/ffffff&amp;text=320x240&amp;fontsize=23"></div>
            <div class="e-card__lead">
              <div class="e-card__caption">
                <div class="e-card__title">Card Title Goes Here</div>
              </div>
            </div>
          </div>
        </div>
        <div class="e-cell e-cell-3 e-cell-medium">
          <div class="e-card e-card-fluid e-clickable">
            <div class="e-card__content e-card__content-empty">
              <e-icon icon="plus" size="middle"></e-icon>
            </div>
            <div class="e-card__lead">
              <div class="e-card__caption">
                <div class="e-card__title">Add Item</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</div>