رفتن به محتوا
HarmoniQHarmoniQزبان طراحی هارمونیک

برچسب

وضعیت: در حال بازبینی
داده و هوش مصنوعی ارزیابی و تشخیص پیش‌نویس تحویل‌شده متوقف
<span class="hq-pill hq-pill--blue">داده و هوش مصنوعی</span>
<span class="hq-pill hq-pill--cyan">ارزیابی و تشخیص</span>
<span class="hq-pill hq-pill--gray">پیش‌نویس</span>
<span class="hq-pill hq-pill--teal">تحویل‌شده</span>
<span class="hq-pill hq-pill--red">متوقف</span>

گونه‌ها

Section titled “گونه‌ها”
گونه عنصر کاربرد
ثابت <span> دسته، حوزه یا وضعیت یک مورد؛ فقط خواندنی
انتخاب‌شدنی <button aria-pressed> فیلتر کردن فهرست، مثل نمونه‌کارها بر اساس صنعت
حذف‌شدنی <span> با دکمهٔ حذف فیلترهای اعمال‌شده که کاربر می‌تواند بردارد

انتخاب‌شدنی

Section titled “انتخاب‌شدنی”

برچسب انتخاب‌شده زمینهٔ accent می‌گیرد.

<div role="group" aria-label="فیلتر صنعت" style="display:flex;flex-wrap:wrap;gap:var(--hq-space-1)">
  <button class="hq-pill hq-pill--gray" type="button" aria-pressed="true">همه</button>
  <button class="hq-pill hq-pill--gray" type="button" aria-pressed="false">مالی و بیمه</button>
  <button class="hq-pill hq-pill--gray" type="button" aria-pressed="false">خرده‌فروشی</button>
  <button class="hq-pill hq-pill--gray" type="button" aria-pressed="false">آموزش</button>
</div>

حذف‌شدنی

Section titled “حذف‌شدنی”
مالی و بیمه ۱۴۰۴ 
<span class="hq-pill hq-pill--blue hq-pill--dismissible">
  مالی و بیمه
  <button class="hq-pill__dismiss" type="button" aria-label="حذف فیلتر مالی و بیمه"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"/></svg></button>
</span>
<span class="hq-pill hq-pill--blue hq-pill--dismissible">
  ۱۴۰۴
  <button class="hq-pill__dismiss" type="button" aria-label="حذف فیلتر ۱۴۰۴"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"/></svg></button>
</span>

رنگ‌ها

Section titled “رنگ‌ها”

رنگ برچسب معنا دارد، نه تزیین. هر خانواده پس‌زمینهٔ پلهٔ ۱۰ و متن پلهٔ ۷۰ را می‌گیرد (خاکستری: ۸۰).

رنگ کاربرد
آبی پیش‌فرض برای دسته‌ها
فیروزه‌ای حوزه‌های خدمت و برند
خاکستری وضعیت خنثی یا پیش‌نویس
سبزآبی وضعیت مثبت یا انجام‌شده
قرمز وضعیت منفی یا متوقف؛ فقط با واژهٔ روشن

متن

Section titled “متن”

یک یا دو واژه. اسم، نه جمله.

مالی و بیمه خرده‌فروشی
انجام بدهیک رنگ برای یک نوع برچسب در کل صفحه.
مالی و بیمه خرده‌فروشی
انجام ندهرنگ‌های مختلف برای دسته‌های هم‌ارز؛ رنگ معنای اضافه‌ای القا می‌کند که وجود ندارد.