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

کارت

وضعیت: در حال بازبینی
برچسب کوتاه

یک ایده در هر کارت

عنوان کارت ایده را می‌گوید و متن، در دو یا سه جمله، آن را باز می‌کند.

<article class="hq-card hq-card--outline">
  <span class="hq-card__icon"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M4,2H2V28a2,2,0,0,0,2,2H30V28H4V25H26V17H4V13H18V5H4ZM24,19v4H4V19ZM16,7v4H4V7Z"/></svg></span>
  <span class="hq-card__eyebrow">برچسب کوتاه</span>
  <h3 class="hq-card__title">یک ایده در هر کارت</h3>
  <p class="hq-card__body">عنوان کارت ایده را می‌گوید و متن، در دو یا سه جمله، آن را باز می‌کند.</p>
</article>

چه وقت استفاده کنیم

Section titled “چه وقت استفاده کنیم”
  • برای چند ایدهٔ هم‌ارز که کنار هم می‌آیند: خدمات، مزیت‌ها، گام‌ها.
  • وقتی هر مورد عنوان، توضیح کوتاه و گاهی آیکن دارد.

چه وقت استفاده نکنیم

Section titled “چه وقت استفاده نکنیم”
  • برای قاب‌گرفتن متن اصلی صفحه.
  • برای یک نکته، ریسک یا نتیجه؛ از فراخوان استفاده کنید.
  • با سایه یا تزیین؛ کارت تخت است.

گونه‌ها

Section titled “گونه‌ها”
گونه کلاس کاربرد
کادردار hq-card--outline روی زمینهٔ surface-alt؛ پیش‌فرض
رنگی hq-card--tint روی زمینهٔ سفید
معکوس hq-card--inverse فقط برای یک مورد برجسته در ردیف
برچسب کوتاه

یک ایده در هر کارت

عنوان کارت ایده را می‌گوید و متن، در دو یا سه جمله، آن را باز می‌کند.

برچسب کوتاه

یک ایده در هر کارت

عنوان کارت ایده را می‌گوید و متن، در دو یا سه جمله، آن را باز می‌کند.

برچسب کوتاه

یک ایده در هر کارت

عنوان کارت ایده را می‌گوید و متن، در دو یا سه جمله، آن را باز می‌کند.

<div class="hq-grid" style="inline-size:100%">
  <div class="hq-col-4 hq-col-md-4 hq-col-lg-4"><article class="hq-card hq-card--outline">
  <span class="hq-card__icon"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M4,2H2V28a2,2,0,0,0,2,2H30V28H4V25H26V17H4V13H18V5H4ZM24,19v4H4V19ZM16,7v4H4V7Z"/></svg></span>
  <span class="hq-card__eyebrow">برچسب کوتاه</span>
  <h3 class="hq-card__title">یک ایده در هر کارت</h3>
  <p class="hq-card__body">عنوان کارت ایده را می‌گوید و متن، در دو یا سه جمله، آن را باز می‌کند.</p>
</article></div>
  <div class="hq-col-4 hq-col-md-4 hq-col-lg-4"><article class="hq-card hq-card--tint">
  <span class="hq-card__icon"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M4,2H2V28a2,2,0,0,0,2,2H30V28H4V25H26V17H4V13H18V5H4ZM24,19v4H4V19ZM16,7v4H4V7Z"/></svg></span>
  <span class="hq-card__eyebrow">برچسب کوتاه</span>
  <h3 class="hq-card__title">یک ایده در هر کارت</h3>
  <p class="hq-card__body">عنوان کارت ایده را می‌گوید و متن، در دو یا سه جمله، آن را باز می‌کند.</p>
</article></div>
  <div class="hq-col-4 hq-col-md-4 hq-col-lg-4"><article class="hq-card hq-card--inverse">
  <span class="hq-card__icon"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M4,2H2V28a2,2,0,0,0,2,2H30V28H4V25H26V17H4V13H18V5H4ZM24,19v4H4V19ZM16,7v4H4V7Z"/></svg></span>
  <span class="hq-card__eyebrow">برچسب کوتاه</span>
  <h3 class="hq-card__title">یک ایده در هر کارت</h3>
  <p class="hq-card__body">عنوان کارت ایده را می‌گوید و متن، در دو یا سه جمله، آن را باز می‌کند.</p>
</article></div>
</div>

قواعد برندبوک

Section titled “قواعد برندبوک”
  • گوشهٔ radius-md، فاصلهٔ داخلی space-4، بدون سایه.
  • فاصلهٔ بین کارت‌ها space-6 (در گرید وب، فاصلهٔ ستون‌ها).
  • آیکن بالا و سمت شروع (راست در چیدمان فارسی)، یک آیکن برای هر کارت.
  • کارت‌های یک ردیف هم‌قد هستند.
برچسب کوتاه

یک ایده در هر کارت

عنوان کارت ایده را می‌گوید و متن، در دو یا سه جمله، آن را باز می‌کند.

برچسب کوتاه

یک ایده در هر کارت

عنوان کارت ایده را می‌گوید و متن، در دو یا سه جمله، آن را باز می‌کند.

انجام بدهفقط یک کارت معکوس در ردیف، برای مورد برجسته.
برچسب کوتاه

یک ایده در هر کارت

عنوان کارت ایده را می‌گوید و متن، در دو یا سه جمله، آن را باز می‌کند.

برچسب کوتاه

یک ایده در هر کارت

عنوان کارت ایده را می‌گوید و متن، در دو یا سه جمله، آن را باز می‌کند.

انجام ندهچند کارت معکوس که برجستگی را از بین می‌برد.