نشان‌ها

سرفصل‌ها


<h1>
Example heading
<span class="bg-primary-500 text-white rounded-md py-[.35em] px-[.65em] inline-block font-normal">
New
</span>
</h1>
<h2>
Example heading
<span class="bg-primary-500 text-white rounded-md py-[.35em] px-[.65em] inline-block font-normal">
New
</span>
</h2>
<h3>
Example heading
<span class="bg-primary-500 text-white rounded-md py-[.35em] px-[.65em] inline-block font-normal">
New
</span>
</h3>
<h4>
Example heading
<span class="bg-primary-500 text-white rounded-md py-[.35em] px-[.65em] inline-block font-normal">
New
</span>
</h4>
<h5>
Example heading
<span class="bg-primary-500 text-white rounded-md py-[.35em] px-[.65em] inline-block font-normal">
New
</span>
</h5>
<h6>
Example heading
<span class="bg-primary-500 text-white rounded-md py-[.35em] px-[.65em] inline-block font-normal">
New
</span>
</h6>

عنوان مثال جدید

نشان‌های قرص


<span class="inline-block px-[15px] py-[3px] text-white border border-primary-500 bg-primary-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Primary
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-secondary-500 bg-secondary-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Secondary
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-success-500 bg-success-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Success
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-danger-500 bg-danger-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Danger
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-warning-500 bg-warning-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Warning
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-info-500 bg-info-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Info
</span>
<span class="inline-block px-[15px] py-[3px] text-dark border border-gray-50 bg-gray-50 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Light
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-dark bg-dark text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Dark
</span>

اولیه ثانویه موفقیت خطر هشدار اطلاعات نور تیره

نشان‌های قرص طرح کلی


<span class="inline-block px-[15px] py-[3px] text-primary-500 border border-primary-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Primary
</span>
<span class="inline-block px-[15px] py-[3px] text-secondary-500 border border-secondary-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Secondary
</span>
<span class="inline-block px-[15px] py-[3px] text-success-500 border border-success-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Success
</span>
<span class="inline-block px-[15px] py-[3px] text-danger-500 border border-danger-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Danger
</span>
<span class="inline-block px-[15px] py-[3px] text-warning-500 border border-warning-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Warning
</span>
<span class="inline-block px-[15px] py-[3px] text-info-500 border border-info-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Info
</span>
<span class="inline-block px-[15px] py-[3px] border border-gray-100 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Light
</span>
<span class="inline-block px-[15px] py-[3px] text-dark border border-dark text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Dark
</span>

اولیه ثانویه موفقیت خطر هشدار اطلاعات نور تیره

نشان‌های طرح کلی


<span class="inline-block px-[15px] py-[3px] text-primary-500 border border-primary-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Primary
</span>
<span class="inline-block px-[15px] py-[3px] text-secondary-500 border border-secondary-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Secondary
</span>
<span class="inline-block px-[15px] py-[3px] text-success-500 border border-success-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Success
</span>
<span class="inline-block px-[15px] py-[3px] text-danger-500 border border-danger-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Danger
</span>
<span class="inline-block px-[15px] py-[3px] text-warning-500 border border-warning-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Warning
</span>
<span class="inline-block px-[15px] py-[3px] text-info-500 border border-info-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Info
</span>
<span class="inline-block px-[15px] py-[3px] border border-gray-100 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Light
</span>
<span class="inline-block px-[15px] py-[3px] text-dark border border-dark text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Dark
</span>

اولیه ثانویه موفقیت خطر هشدار اطلاعات نور تیره

رنگ‌های پس‌زمینه


<span class="inline-block px-[15px] py-[3px] text-white border border-primary-500 bg-primary-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Primary
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-secondary-500 bg-secondary-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Secondary
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-success-500 bg-success-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Success
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-danger-500 bg-danger-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Danger
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-warning-500 bg-warning-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Warning
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-info-500 bg-info-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Info
</span>
<span class="inline-block px-[15px] py-[3px] text-dark border border-gray-50 bg-gray-50 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Light
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-dark bg-dark text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
Dark
</span>

اولیه ثانویه موفقیت خطر هشدار اطلاعات نور تیره