UI компоненти
dbank.bg
Система · 08Обща за групата

UI компоненти

Строителните блокове на дигиталните продукти — живи, с готов за копиране код. Всеки компонент стъпва на токените от Цветове и Мрежа и стил. Натиснете „Покажи кода" под примера.

Бутони

Едно основно действие на екран — синьо или жълто, никога и двете. Вторичните действия са контурни или прозрачни.

HTML 
<button class="db-btn db-btn-primary">Кандидатствай</button>
<button class="db-btn db-btn-accent">Отвори сметка</button>
<button class="db-btn db-btn-secondary">Научи повече</button>
<button class="db-btn db-btn-ghost">Отказ</button>
<button class="db-btn db-btn-danger">Блокирай картата</button>
<button class="db-btn db-btn-primary" disabled>Недостъпен</button>

Размери

HTML 
<button class="db-btn db-btn-primary db-btn-lg">Голям</button>
<button class="db-btn db-btn-primary">Стандартен</button>
<button class="db-btn db-btn-primary db-btn-sm">Малък</button>
  • Текстът на бутона е глагол: „Кандидатствай", „Изпрати", „Потвърди" — не „ОК" или „Да".
  • Жълтият бутон е запазен за най-важното действие в потока (открий сметка, подпиши).
  • Минимална докосваема площ на мобилен: 44×44px.

Формуляри

Както е изписано в личната карта.
Непълен IBAN — очакват се 22 знака.
HTML 
<div class="db-field">
  <label class="db-label" for="name">Име и фамилия</label>
  <input class="db-input" id="name" type="text" placeholder="Мария Иванова">
  <span class="db-hint">Както е изписано в личната карта.</span>
</div>

<!-- Невалидно състояние -->
<input class="db-input is-invalid" aria-invalid="true" aria-describedby="err">
<span class="db-error" id="err">Непълен IBAN — очакват се 22 знака.</span>
  • Етикетът стои над полето — не изчезващ placeholder вместо етикет.
  • Грешката казва какво да се направи, не само че е грешно.
  • Полетата за суми и IBAN използват Ubuntu Mono при преглед на данните.

Избори и превключватели

HTML 
<label class="db-check"><input type="checkbox" checked> Съгласен съм</label>
<label class="db-check"><input type="radio" name="r"> Стандартен превод</label>

<label class="db-switch">
  <input type="checkbox" checked><span class="track"></span>
  Известия за плащания
</label>

Значки и статуси

Нов продукт Одобрен Изчаква подпис Просрочие Архивиран
HTML 
<span class="db-badge db-badge-blue">Нов продукт</span>
<span class="db-badge db-badge-green">Одобрен</span>
<span class="db-badge db-badge-yellow">Изчаква подпис</span>
<span class="db-badge db-badge-red">Просрочие</span>
<span class="db-badge db-badge-gray">Архивиран</span>

Известия

Планирана поддръжкаDOnline няма да е достъпен на 12.10 между 02:00 и 04:00 ч.
Преводът е изпълнен1 250,00 лв. към Иван Петров — реф. № 8842105.
Картата изтича скороДебитната ви карта е валидна до 31.10.2026 г. Ще получите нова автоматично.
Неуспешен преводНедостатъчна наличност. Проверете сметката и опитайте отново.
HTML 
<div class="db-alert db-alert-success">
  <svg>…</svg>
  <div>
    <strong>Преводът е изпълнен</strong>
    1 250,00 лв. към Иван Петров — реф. № 8842105.
  </div>
</div>
<!-- варианти: db-alert-info / -success / -warn / -error -->

Продуктова карта

Промоция до 31.12
Потребителски кредит „Д Експрес"

Одобрение до 24 часа, фиксирана лихва от 5,9% и нула такса за кандидатстване онлайн.

HTML 
<div class="db-card">
  <span class="db-badge db-badge-yellow">Промоция до 31.12</span>
  <div class="db-card-title">Потребителски кредит „Д Експрес"</div>
  <p>Одобрение до 24 часа, фиксирана лихва от 5,9%…</p>
  <button class="db-btn db-btn-primary db-btn-sm">Кандидатствай</button>
</div>

Таблици с данни

ДатаОписаниеСтатусСума
28.08.2026Превод към „Мебели АРТ" ЕООДИзпълнен−2 340,00 лв.
27.08.2026Заплата — „Техносвят" АДПолучен+3 850,00 лв.
27.08.2026Абонамент DStreamОбработва се−19,99 лв.
26.08.2026Теглене АТМ — бул. Витоша 15Изпълнен−200,00 лв.
HTML 
<table class="db-table">
  <thead><tr><th>Дата</th><th>Описание</th><th>Статус</th>
  <th style="text-align:right">Сума</th></tr></thead>
  <tbody>
    <tr><td>28.08.2026</td><td>Превод…</td>
    <td><span class="db-badge db-badge-green">Изпълнен</span></td>
    <td class="num">−2 340,00 лв.</td></tr>
  </tbody>
</table>

Раздели и прогрес

Заявка за кредит — стъпка 2 от 450%
HTML 
<div class="db-tabs">
  <button class="db-tab is-active">Сметки</button>
  <button class="db-tab">Карти</button>
</div>

<div class="db-progress"><span style="width:50%"></span></div>

Общи правила за интерфейс

  • Фокус: всеки интерактивен елемент има видим жълт фокус пръстен (outline: 2px solid #FDB913).
  • Движение: преходи 150–250ms с плавно ускорение; при prefers-reduced-motion — изключени.
  • Празни състояния: илюстрация + едно изречение + едно действие. Никога само „Няма данни".
  • Зареждане: скелетни екрани в Sky 100, не блокиращи спинъри.