Panel

Default
.e-panel

Cillum quis id
199 EUR
<div class="e-row">
  <div class="e-col-3">
    <div class="e-panel">
      <div class="e-panel__title">
        <span>
          Qui ex duis 
        </span>
      </div>
      <div class="e-panel__value">
        <span class="text-color-info">
          199
        </span>
        <small>
           EUR
        </small>
      </div>
    </div>
  </div>
</div>


                        <div class="e-row">
                          <div class="e-col-3">
                            <div class="e-panel">
                              <div class="e-panel__title"><span>Aute anim irure </span></div>
                              <div class="e-panel__value"><span class="text-color-info">199</span><small> EUR</small></div>
                            </div>
                          </div>
                        </div>

Variations

With icon
> .e-panel__icon

In est ullamco
199 EUR
<div class="e-row">
  <div class="e-col-3">
    <div class="e-panel">
      <div class="background-color-info e-panel__icon">
        <e-icon icon="e-spent"></e-icon>
      </div>
      <div class="e-panel__title">
        <span>
          Ex in non 
        </span>
      </div>
      <div class="e-panel__value">
        <span class="text-color-info">
          199
        </span>
        <small>
           EUR
        </small>
      </div>
    </div>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-3">
                              <div class="e-panel">
                                <div class="background-color-info e-panel__icon">
                                  <e-icon icon="e-spent"></e-icon>
                                </div>
                                <div class="e-panel__title"><span>Ut anim in </span></div>
                                <div class="e-panel__value"><span class="text-color-info">199</span><small> EUR</small></div>
                              </div>
                            </div>
                          </div>

Different order

199
Laboris ea consectetur 
<div class="e-row">
  <div class="e-col-3">
    <div class="e-panel">
      <div class="background-color-info e-panel__icon">
        <e-icon icon="e-spent"></e-icon>
      </div>
      <div class="e-panel__value text-size-headline">
        199
      </div>
      <div class="text-color-shade">
        Velit duis ex 
      </div>
    </div>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-3">
                              <div class="e-panel">
                                <div class="background-color-info e-panel__icon">
                                  <e-icon icon="e-spent"></e-icon>
                                </div>
                                <div class="e-panel__value text-size-headline">199</div>
                                <div class="text-color-shade">Esse esse dolor 
                                </div>
                              </div>
                            </div>
                          </div>

With text
> .e-panel__text, .e-panel__text-twolines

Magna tempor sint
199 EUR
Laboris ex ad quis ut 
<div class="e-row">
  <div class="e-col-3">
    <div class="e-panel">
      <div class="background-color-info e-panel__icon">
        <e-icon icon="e-spent"></e-icon>
      </div>
      <div class="e-panel__title">
        <span>
          Consequat pariatur dolor 
        </span>
      </div>
      <div class="e-panel__value">
        <span class="text-color-info">
          199
        </span>
        <small>
           EUR
        </small>
      </div>
      <div class="clearfix"></div>
      <div class="e-panel__text">
        Incididunt exercitation dolore sint consequat 
      </div>
    </div>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-3">
                              <div class="e-panel">
                                <div class="background-color-info e-panel__icon">
                                  <e-icon icon="e-spent"></e-icon>
                                </div>
                                <div class="e-panel__title"><span>Amet officia eu </span></div>
                                <div class="e-panel__value"><span class="text-color-info">199</span><small> EUR</small></div>
                                <div class="clearfix"></div>
                                <div class="e-panel__text">Dolore anim aliquip est consectetur 
                                </div>
                              </div>
                            </div>
                          </div>

Bordered
.e-panel-box

Ad officia sunt
199 EUR
<div class="e-row">
  <div class="e-col-3">
    <div class="e-panel e-panel-box">
      <div class="e-panel__title">
        <span>
          Ad anim enim 
        </span>
      </div>
      <div class="e-panel__value">
        <span class="text-color-info">
          199
        </span>
        <small>
           EUR
        </small>
      </div>
    </div>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-3">
                              <div class="e-panel e-panel-box">
                                <div class="e-panel__title"><span>Fugiat consectetur dolore </span></div>
                                <div class="e-panel__value"><span class="text-color-info">199</span><small> EUR</small></div>
                              </div>
                            </div>
                          </div>

Bordered with tooltip
> e-tooltip.e-panel__tooltip

Consectetur veniam ipsum
199 EUR
<div class="e-row">
  <div class="e-col-3">
    <div class="e-panel e-panel-box">
      <e-tooltip content="tooltip content" type="helper" class="e-panel__tooltip"></e-tooltip>
      <div class="e-panel__title">
        <span>
          Occaecat esse nostrud 
        </span>
      </div>
      <div class="e-panel__value">
        <span class="text-color-info">
          199
        </span>
        <small>
           EUR
        </small>
      </div>
    </div>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-3">
                              <div class="e-panel e-panel-box">
                                <e-tooltip content="tooltip content" type="helper" class="e-panel__tooltip"></e-tooltip>
                                <div class="e-panel__title"><span>Quis eiusmod deserunt </span></div>
                                <div class="e-panel__value"><span class="text-color-info">199</span><small> EUR</small></div>
                              </div>
                            </div>
                          </div>

Items
> .e-panel__item

Velit reprehenderit sint
199 EUR
Sunt ad aliquip
199 EUR
Elit enim culpa
199 EUR
Ex anim sunt
199 EUR
<div class="e-row">
  <div class="e-col-3">
    <div class="e-panel e-panel-box">
      <div class="e-panel__item">
        <div class="e-panel__title">
          <span>
            Proident pariatur nisi 
          </span>
        </div>
        <div class="e-panel__value">
          <span class="text-color-info">
            199
          </span>
          <small>
             EUR
          </small>
        </div>
      </div>
      <div class="e-panel__item">
        <div class="e-panel__title">
          <span>
            Ut nulla elit 
          </span>
        </div>
        <div class="e-panel__value">
          <span class="text-color-info">
            199
          </span>
          <small>
             EUR
          </small>
        </div>
      </div>
    </div>
  </div>
  <div class="e-col-3">
    <div class="e-panel e-panel-box">
      <div class="e-panel__item">
        <div class="e-panel__title">
          <span>
            Nisi et exercitation 
          </span>
        </div>
        <div class="e-panel__value">
          <span class="text-color-info">
            199
          </span>
          <small>
             EUR
          </small>
        </div>
      </div>
    </div>
    <div class="e-panel e-panel-box">
      <div class="e-panel__item">
        <div class="e-panel__title">
          <span>
            Labore eu ea 
          </span>
        </div>
        <div class="e-panel__value">
          <span class="text-color-info">
            199
          </span>
          <small>
             EUR
          </small>
        </div>
      </div>
    </div>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-3">
                              <div class="e-panel e-panel-box">
                                <div class="e-panel__item">
                                  <div class="e-panel__title"><span>Sint consequat in </span></div>
                                  <div class="e-panel__value"><span class="text-color-info">199</span><small> EUR</small></div>
                                </div>
                                <div class="e-panel__item">
                                  <div class="e-panel__title"><span>Esse consectetur tempor </span></div>
                                  <div class="e-panel__value"><span class="text-color-info">199</span><small> EUR</small></div>
                                </div>
                              </div>
                            </div>
                            <div class="e-col-3">
                              <div class="e-panel e-panel-box">
                                <div class="e-panel__item">
                                  <div class="e-panel__title"><span>Laborum sunt lorem </span></div>
                                  <div class="e-panel__value"><span class="text-color-info">199</span><small> EUR</small></div>
                                </div>
                              </div>
                              <div class="e-panel e-panel-box">
                                <div class="e-panel__item">
                                  <div class="e-panel__title"><span>Culpa lorem qui </span></div>
                                  <div class="e-panel__value"><span class="text-color-info">199</span><small> EUR</small></div>
                                </div>
                              </div>
                            </div>
                          </div>

Last update

Message refactor(icon): use new component
Date:
()
Committer: David Gyenes
Component history