Camel2.0 — Dokumentacja komponentów UI

2.12 #Components.EarningPointItem Earning Point Item

Toggle example guides Toggle HTML markup

Element grida "Dodatkowe sposoby zdobywania punktów". Ikona + separator + body (tytuł + punkty + opis). Grid: .earning-point-grid — 1 kolumna mobile, 2 kolumny desktop.

Example
Konkursy 50–200 Win

Bierz udział w konkursach i zdobywaj dodatkowe punkty Win.

Markup: earning-point-item.html
<div class="earning-point-grid" style="max-width: 900px;">
  <div class="earning-point-item">
    <div class="earning-point-item__icon">
      <img src="assets/images/app-icon-winston.png" alt="" style="width:45px; height:45px; background:#eee; border-radius:8px;">
    </div>
    <div class="earning-point-item__separator"></div>
    <div class="earning-point-item__body">
      <div class="earning-point-item__header">
        <span class="earning-point-item__title">Konkursy</span>
        <span class="earning-point-item__points">50–200 Win</span>
      </div>
      <p class="earning-point-item__desc">Bierz udział w konkursach i zdobywaj dodatkowe punkty Win.</p>
    </div>
  </div>
</div>
Source: src/scss/components/_earning-point-item.scss, line 1