Skip to main content

Design Rules

Тази страница описва кратки правила за последователен UI в документацията.

1) Кога кой компонент да се ползва​

  • Използвайте InfoSpot за layout с изображение вляво и съдържание вдясно (1:4).
  • Използвайте InfoSpotReverse за layout със съдържание вляво и изображение вдясно (4:1).
  • Използвайте DocCard за заглавие + body (header и body визуално разграничени).
  • Използвайте DocCard2 и DocCard3 за групиране на карти в grid.
  • Използвайте InfoCard за кратки акценти без header.
  • Използвайте InfoCard2 и InfoCard3 за групи от InfoCard.

2) Variant правила​

InfoSpot / InfoSpotReverse​

  • info: неутрален вид (без лява цветна лента).
  • warning: използвайте само за важни ограничения/рискове.
  • tip: използвайте за добри практики и полезни съвети.

InfoCard​

  • info: обща информация, неутрално съобщение.
  • success: успешно действие или положителен резултат.
  • warning: внимание преди действие.
  • error: проблем, грешка, блокиращо условие.

3) Икони и изображения​

  • Иконите са опционални; не са задължителни за всеки блок.
  • За DocCard ползвайте headerImageSrc само когато добавя реална стойност.
  • За InfoCard ползвайте iconSrc и iconText за кратък контекст.
  • Поддържайте кратък alt текст за достъпност.
  • Предпочитайте ясни PNG/SVG и сходен визуален стил между страниците.

4) Текст и съдържание​

  • Заглавията на карти да са кратки (2 до 5 думи).
  • Един блок = една основна идея.
  • Дълги обяснения премествайте извън картите, в обикновен Markdown текст.
  • Използвайте bullets за сканиране, не дълги параграфи.

5) Spacing и плътност​

  • Дръжте еднакъв вертикален rhythm между блоковете.
  • При много карти на страница използвайте compact за InfoCard.
  • Избягвайте смесване на прекалено много компоненти един под друг без текстови секции между тях.

6) Responsive правила​

  • DocCard2 и InfoCard2: 2 -> 1.
  • DocCard3 и InfoCard3: 3 -> 2 -> 1.
  • Проверявайте важните страници на mobile ширина преди merge.

7) Accessibility checklist​

  • Всеки образ има смислен alt.
  • Цветът не е единствен носител на значение (добавяйте и текст).
  • Линковете в картите да имат ясни текстове, не „click here“.

8) Quick examples​

<InfoCard variant="warning" iconText="Внимание">

Проверете всички задължителни полета.

</InfoCard>
<DocCard2>
  <DocCard title="Статус" headerImageSrc="/img/docusaurus.png">Активно</DocCard>
  <DocCard title="Следваща стъпка">Потвърждение</DocCard>
</DocCard2>

9) Anti-patterns (да се избягват)​

  • Не използвайте error за обикновена информация.
  • Не слагайте големи изображения в header на всяка карта.
  • Не комбинирайте твърде много variants в един малък екранен сегмент.
  • Не повтаряйте една и съща икона/текст без причина.