UI Kit

Code

Card

Last update:	()
Message	doc(search): new tags and hidden components --skip-ci
Committer:	Tamás Bíró
Version history

Default

Copy Jade

Copy HTML

Show code

Hide code
.e-card

<div class="e-card">
  <div class="e-card__content">
    <img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>


                                <div class="e-card">
                                  <div class="e-card__content"><img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview"></div>
                                  <div class="e-card__lead">
                                    <div class="e-card__caption">
                                      <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.</div>
                                    </div>
                                  </div>
                                </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Variations

No title
Copy Jade

Copy HTML

Show code

Hide code
e-card-no_title

<div class="e-card e-card-no_title">
  <div class="e-card__content">
    <img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97240&amp;w=240&amp;h=240" class="e-card__preview">
  </div>
</div>


                                  <div class="e-card e-card-no_title">
                                    <div class="e-card__content"><img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97240&amp;w=240&amp;h=240" class="e-card__preview"></div>
                                  </div>

With emptystate
Copy Jade

Copy HTML

Show code

Hide code
e-card-emptystate > .e-emptystate

<div class="e-card e-card-no_title e-card-emptystate">
  <div class="e-card__content">
    <div class="e-emptystate">
      <div class="e-emptystate__content">
        <div class="e-emptystate__title">
          Veniam pariatur deserunt laboris sint
        </div>
        <div class="e-emptystate__lead">
          Ea nisi ea commodo laboris occaecat ut laboris consectetur dolore
        </div>
        <div class="e-emptystate__button e-btn e-btn-secondary">
          Primary button
        </div>
      </div>
    </div>
  </div>
</div>


                                  <div class="e-card e-card-no_title e-card-emptystate">
                                    <div class="e-card__content">
                                      <div class="e-emptystate">
                                        <div class="e-emptystate__content">
                                          <div class="e-emptystate__title">Veniam pariatur deserunt laboris sint</div>
                                          <div class="e-emptystate__lead">Ea nisi ea commodo laboris occaecat ut laboris consectetur dolore</div>
                                          <div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

Veniam pariatur deserunt laboris sint

Ea nisi ea commodo laboris occaecat ut laboris consectetur dolore

Primary button

Small size
Copy Jade

Copy HTML

Show code

Hide code
.e-card-small

<div class="e-card e-card-small">
  <div class="e-card__content">
    <img src="https://placeholdit.imgix.net/~text?txtsize=17&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=180%C3%97130&amp;w=180&amp;h=130" class="e-card__preview">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </div>
  </div>
</div>


                                  <div class="e-card e-card-small">
                                    <div class="e-card__content"><img src="https://placeholdit.imgix.net/~text?txtsize=17&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=180%C3%97130&amp;w=180&amp;h=130" class="e-card__preview"></div>
                                    <div class="e-card__lead">
                                      <div class="e-card__caption">
                                        <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                                      </div>
                                    </div>
                                  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Non-square
Copy Jade

Copy HTML

Show code

Hide code
.e-card-auto_height

<div class="e-card e-card-auto_height">
  <div class="e-card__content">
    <img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97130&amp;w=240&amp;h=130" class="e-card__preview">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>


                                  <div class="e-card e-card-auto_height">
                                    <div class="e-card__content"><img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97130&amp;w=240&amp;h=130" class="e-card__preview"></div>
                                    <div class="e-card__lead">
                                      <div class="e-card__caption">
                                        <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.</div>
                                      </div>
                                    </div>
                                  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Smaller image
Copy Jade

Copy HTML

Show code

Hide code

<div class="e-card">
  <div class="e-card__content">
    <img src="https://placeholdit.imgix.net/~text?txtsize=17&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=160%C3%97160&amp;w=160&amp;h=160" class="e-card__preview">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>


                                  <div class="e-card">
                                    <div class="e-card__content"><img src="https://placeholdit.imgix.net/~text?txtsize=17&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=160%C3%97160&amp;w=160&amp;h=160" class="e-card__preview"></div>
                                    <div class="e-card__lead">
                                      <div class="e-card__caption">
                                        <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.</div>
                                      </div>
                                    </div>
                                  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Smaller image 2
Copy Jade

Copy HTML

Show code

Hide code

<div class="e-card">
  <div class="e-card__content">
    <img src="https://placehold.it/240x60/7a81be/fff" class="e-card__preview">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>


                                  <div class="e-card">
                                    <div class="e-card__content"><img src="https://placehold.it/240x60/7a81be/fff" class="e-card__preview"></div>
                                    <div class="e-card__lead">
                                      <div class="e-card__caption">
                                        <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.</div>
                                      </div>
                                    </div>
                                  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

No checkerboard
Copy Jade

Copy HTML

Show code

Hide code
.e-card-no_checkerboard

<div class="e-card e-card-no_checkerboard">
  <div class="e-card__content">
    <img src="https://placehold.it/240x60/7a81be/fff" class="e-card__preview">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>


                                  <div class="e-card e-card-no_checkerboard">
                                    <div class="e-card__content"><img src="https://placehold.it/240x60/7a81be/fff" class="e-card__preview"></div>
                                    <div class="e-card__lead">
                                      <div class="e-card__caption">
                                        <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.</div>
                                      </div>
                                    </div>
                                  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Cover image
Copy Jade

Copy HTML

Show code

Hide code

<div class="e-card">
  <div style="background-image: url('https://placehold.it/1024x200/7a81be/fff')" class="e-card__content"></div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>


                                  <div class="e-card">
                                    <div style="background-image: url('https://placehold.it/1024x200/7a81be/fff')" class="e-card__content"></div>
                                    <div class="e-card__lead">
                                      <div class="e-card__caption">
                                        <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.</div>
                                      </div>
                                    </div>
                                  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Description and Footer
Copy Jade

Copy HTML

Show code

Hide code
.e-card__footer

<div class="e-card">
  <div class="e-card__content">
    <img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
      <div class="e-card__badge">
        <div class="e-label e-label-secondary">
          Default
        </div>
      </div>
    </div>
    <div class="e-card__description">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="e-card__footer">
      <a class="e-btn e-btn-primary">
        Primary Action
      </a>
      <e-dropdown data-markup-content="&lt;e-icon icon=&quot;dots&quot;&gt;&lt;/e-icon&gt;" data-markup-class="e-btn e-btn-borderless e-btn-onlyicon" data-markup-class-active="e-btn-active" data-dropdown-align="top">
        <div class="e-dropdown__content">
          <a href="#0" class="e-dropdown__item">
            <e-icon icon="pencil" type="table"></e-icon>
             Preview
          </a>
          <a href="#0" class="e-dropdown__item">
            <e-icon icon="eye" type="table"></e-icon>
             Edit
          </a>
          <a href="#0" class="e-dropdown__item">
            <e-icon icon="pencil" type="table"></e-icon>
             Copy
          </a>
          <a href="#0" class="e-dropdown__item">
            <e-icon icon="eye" type="table"></e-icon>
             Delete
          </a>
        </div>
      </e-dropdown>
    </div>
  </div>
</div>


                                  <div class="e-card">
                                    <div class="e-card__content"><img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview"></div>
                                    <div class="e-card__lead">
                                      <div class="e-card__caption">
                                        <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                                        <div class="e-card__badge">
                                          <div class="e-label e-label-secondary">Default</div>
                                        </div>
                                      </div>
                                      <div class="e-card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                                      <div class="e-card__footer"><a class="e-btn e-btn-primary">Primary Action</a>
                                        <e-dropdown data-markup-content="&lt;e-icon icon=&quot;dots&quot;&gt;&lt;/e-icon&gt;" data-markup-class="e-btn e-btn-borderless e-btn-onlyicon" data-markup-class-active="e-btn-active" data-dropdown-align="top">
                                          <div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
                                              <e-icon icon="pencil" type="table"></e-icon> Preview</a><a href="#0" class="e-dropdown__item">
                                              <e-icon icon="eye" type="table"></e-icon> Edit</a><a href="#0" class="e-dropdown__item">
                                              <e-icon icon="pencil" type="table"></e-icon> Copy</a><a href="#0" class="e-dropdown__item">
                                              <e-icon icon="eye" type="table"></e-icon> Delete</a></div>
                                        </e-dropdown>
                                      </div>
                                    </div>
                                  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Iframe
Copy Jade

Copy HTML

Show code

Hide code

<div class="e-card">
  <div class="e-card__content">
    <iframe src="https://placeholdit.imgix.net/~text?txtsize=13&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=Iframe+content&amp;w=240&amp;h=190&amp;txttrack=0" class="e-card__preview e-card__preview-stretch"></iframe>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>


                                  <div class="e-card">
                                    <div class="e-card__content">
                                      <iframe src="https://placeholdit.imgix.net/~text?txtsize=13&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=Iframe+content&amp;w=240&amp;h=190&amp;txttrack=0" class="e-card__preview e-card__preview-stretch"></iframe>
                                    </div>
                                    <div class="e-card__lead">
                                      <div class="e-card__caption">
                                        <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.</div>
                                      </div>
                                    </div>
                                  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

With badge
Copy Jade

Copy HTML

Show code

Hide code
.e-card__badge

<div class="e-card">
  <div class="e-card__content">
    <img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
      <div class="e-card__badge">
        <div class="e-label e-label-secondary">
          Default
        </div>
      </div>
    </div>
  </div>
</div>


                                  <div class="e-card">
                                    <div class="e-card__content"><img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview"></div>
                                    <div class="e-card__lead">
                                      <div class="e-card__caption">
                                        <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.</div>
                                        <div class="e-card__badge">
                                          <div class="e-label e-label-secondary">Default</div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Default

Fluid
Copy Jade

Copy HTML

Show code

Hide code
.e-card-fluid

<div class="e-row">
  <div class="e-col-5">
    <div class="e-card e-card-fluid">
      <div class="e-card__content">
        <img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


                                  <div class="e-row">
                                    <div class="e-col-5">
                                      <div class="e-card e-card-fluid">
                                        <div class="e-card__content"><img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview"></div>
                                        <div class="e-card__lead">
                                          <div class="e-card__caption">
                                            <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.</div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Empty with icon
Copy Jade

Copy HTML

Show code

Hide code
.e-card__content-empty

<div class="e-card 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 new item
      </div>
    </div>
  </div>
</div>


                                  <div class="e-card 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 new item</div>
                                      </div>
                                    </div>
                                  </div>

Add new item

Input toggle
Copy Jade

Copy HTML

Show code

Hide code

<div class="e-card e-card-has_overlay">
  <div class="e-card__content">
    <img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview">
  </div>
  <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>
    </div>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <input type="text" value="Lorem ipsum dolor sit amet, consectetur adipisicing elit." class="e-input e-card__input">
    </div>
  </div>
</div>


                                  <div class="e-card e-card-has_overlay">
                                    <div class="e-card__content"><img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview"></div>
                                    <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>
                                      </div>
                                    </div>
                                    <div class="e-card__lead">
                                      <div class="e-card__caption">
                                        <input type="text" value="Lorem ipsum dolor sit amet, consectetur adipisicing elit." class="e-input e-card__input">
                                      </div>
                                    </div>
                                  </div>

With buttons
Copy Jade

Copy HTML

Show code

Hide code
.e-card-has_overlay > .e-cardbuttons, .e-cardaction

<div class="e-card e-card-has_overlay">
  <div class="e-card__content">
    <img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview">
  </div>
  <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 class="e-card__action">
    <a href="#" class="e-btn e-btn-primary">
      Edit this item
    </a>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>


                                  <div class="e-card e-card-has_overlay">
                                    <div class="e-card__content"><img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview"></div>
                                    <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 class="e-card__action"><a href="#" class="e-btn e-btn-primary">Edit this item</a></div>
                                    <div class="e-card__lead">
                                      <div class="e-card__caption">
                                        <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.</div>
                                      </div>
                                    </div>
                                  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Active

Copy Jade

Copy HTML

Show code

Hide code
.e-card-active

<div class="e-row">
  <div class="e-col-3">
    <div class="e-card e-card-active">
      <div class="e-card__content">
        <img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


                                  <div class="e-row">
                                    <div class="e-col-3">
                                      <div class="e-card e-card-active">
                                        <div class="e-card__content"><img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview"></div>
                                        <div class="e-card__lead">
                                          <div class="e-card__caption">
                                            <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.</div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Usage

Components next to each other
Copy Jade

Copy HTML

Show code

Hide code

<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-fluid">
      <div class="e-card__content e-card__content-nopadding">
        <img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </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 src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </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 src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </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 src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </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 src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </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 new item
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


                                  <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-fluid">
                                        <div class="e-card__content e-card__content-nopadding"><img src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview"></div>
                                        <div class="e-card__lead">
                                          <div class="e-card__caption">
                                            <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</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 src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview"></div>
                                        <div class="e-card__lead">
                                          <div class="e-card__caption">
                                            <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</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 src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview"></div>
                                        <div class="e-card__lead">
                                          <div class="e-card__caption">
                                            <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</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 src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview"></div>
                                        <div class="e-card__lead">
                                          <div class="e-card__caption">
                                            <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</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 src="https://placeholdit.imgix.net/~text?txtsize=23&amp;bg=7a81be&amp;txtclr=ffffff&amp;txt=240%C3%97190&amp;w=240&amp;h=190" class="e-card__preview"></div>
                                        <div class="e-card__lead">
                                          <div class="e-card__caption">
                                            <div class="e-card__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</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 new item</div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Add new item