तथ्याङ्क टाइल

स्क्रिन खोल्नासाथ थाहा पाउनुपर्ने एउटै सङ्ख्या र त्यो कुन दिशामा गयो देखाउनुपर्दा।

प्रत्यक्ष पूर्वावलोकन

स्रोत

HTML CSS

<article class="dc-stat">
  <h3 class="dc-stat__label">이번 달 정산액</h3>
  <p class="dc-stat__value">4,820<span class="dc-stat__unit">만원</span></p>
  <p class="dc-stat__delta dc-stat__delta--up"><span class="dc-stat__arrow" aria-hidden="true">▲</span>+12.4%<span class="dc-stat__period">지난달 대비</span></p>
</article>

.dc-stat {
  display: flex; flex-direction: column; gap: var(--dc-2);
  min-width: 170px; max-width: 260px;
  padding: var(--dc-4);
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  font-family: var(--dc-font);
}
.dc-stat__label { margin: 0; font-size: 13px; font-weight: 600; color: var(--dc-text-sub); }
.dc-stat__value {
  margin: 0; font-size: 32px; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.01em; color: var(--dc-text);
}
.dc-stat__unit { margin-left: var(--dc-1); font-size: 14px; font-weight: 600; color: var(--dc-text-sub); }
.dc-stat__delta {
  display: flex; align-items: center; gap: var(--dc-1);
  margin: 0; font-size: 12px; font-weight: 700;
  color: var(--dc-text-sub);
}
.dc-stat__delta--up { color: var(--dc-ok); }
.dc-stat__delta--down { color: var(--dc-danger); }
.dc-stat__arrow { font-size: 9px; }
.dc-stat__period { margin-left: var(--dc-1); font-weight: 400; color: var(--dc-text-mute); }
.dc-stat-grid {
  display: grid; gap: var(--dc-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.dc-stat-grid .dc-stat { min-width: 0; max-width: none; }
.dc-stat__spark { display: block; width: 100%; height: 36px; color: var(--dc-brand); }
.dc-stat__sparkline {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.dc-stat__sparkdot { fill: currentColor; }
@media (max-width: 420px) {
  .dc-stat__value { font-size: 28px; }
}

कसरी प्रयोग गर्ने

एक स्क्रिनमा मुख्य सङ्ख्या एउटै; अरू सानो र सहायक
परिवर्तनमा चिन्ह, तीर र तुलनाको अवधि सँगै लेख्नुहोस् — रङले बढ्यो कि घट्यो भन्दैन
एकाई सङ्ख्याको छेउमा सानो राख्नुहोस्, सङ्ख्या पहिले पढिन्छ
छेउछाउ राख्ने टाइलको अवधि र एकाई एउटै हुनुपर्छ

ध्यान दिनुपर्ने कुरा

हरियो र रातो मात्रले दिशा देखाए वर्णअन्धता भएकालाई दुवै एकै हो — तीर हटाउनु हुन्न
ठूला सङ्ख्यामा tabular-nums राख्दा अंक फाटेको देखिन्छ; तालिकाका अंक स्तम्भमा मात्र प्रयोग गर्नुहोस्

अर्को

सूची पङ्क्ति जानकारी प्रदर्शन एप

सेटिङ सूची जानकारी प्रदर्शन एप

कार्ड सूची जानकारी प्रदर्शन एप

च्याट बबल जानकारी प्रदर्शन एप