- عناصر
- اخطار ها
هشدارهای پیش فرض
نمونه کد
اصلی!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
ثانویه!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
موفق!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
اخطار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
اطلاع!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
<!-- primary -->
<div class="flex items-center p-3.5 rounded text-primary bg-primary-light dark:bg-primary-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Primary!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- secondary -->
<div class="flex items-center p-3.5 rounded text-secondary bg-secondary-light dark:bg-secondary-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Secondary!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- success -->
<div class="flex items-center p-3.5 rounded text-success bg-success-light dark:bg-success-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Success!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- warning -->
<div class="flex items-center p-3.5 rounded text-warning bg-warning-light dark:bg-warning-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- danger -->
<div class="flex items-center p-3.5 rounded text-danger bg-danger-light dark:bg-danger-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Danger!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- info -->
<div class="flex items-center p-3.5 rounded text-info bg-info-light dark:bg-info-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Info!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
هشدارهای دور خط
نمونه کد
اصلی!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
اخطار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
<!-- primary -->
<div class="flex items-center p-3.5 rounded text-white-dark border border-primary">
<span class="ltr:pr-2 rtl:pl-2">
<strong class="ltr:mr-2 rtl:ml-2">Primary!</strong>Lorem Ipsum is simply dummy text of the printing.
</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- danger -->
<div class="flex items-center border p-3.5 rounded text-white-dark border-danger">
<span class="ltr:pr-2 rtl:pl-2">
<strong class="ltr:mr-2 rtl:ml-2">Danger!</strong>Lorem Ipsum is simply dummy text of the printing.
</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
هشدارهای پررنگ
نمونه کد
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
اطلاع!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
<!-- primary -->
<div class="flex items-center p-3.5 rounded text-white bg-primary">
<span class="ltr:pr-2 rtl:pl-2">
<strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.
</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- warning -->
<div class="flex items-center p-3.5 rounded text-white bg-warning">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Info!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
هشدارهای آیکن دار
نمونه کد
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
<!-- success -->
<div class="relative flex items-center border p-3.5 rounded text-success bg-success-light border-success ltr:border-l-[64px] rtl:border-r-[64px] dark:bg-success-dark-light">
<span class="absolute ltr:-left-11 rtl:-right-11 inset-y-0 text-white w-6 h-6 m-auto">
<svg> ... </svg>
</span>
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- dark -->
<div class="relative flex items-center border p-3.5 rounded text-dark bg-dark-light border-dark ltr:border-r-[64px] rtl:border-l-[64px] dark:bg-dark-dark-light dark:text-white-light dark:border-white-light/20">
<span class="absolute ltr:-right-11 rtl:-left-11 inset-y-0 text-white w-6 h-6 m-auto">
<svg> ... </svg>
</span>
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
هشدار های جهت دار
نمونه کد
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
<!-- primary -->
<div class="relative flex items-center border p-3.5 rounded before:absolute before:top-1/2 ltr:before:left-0 rtl:before:right-0 rtl:before:rotate-180 before:-mt-2 before:border-l-8 before:border-t-8 before:border-b-8 before:border-t-transparent before:border-b-transparent before:border-l-inherit text-primary bg-primary-light !border-primary ltr:border-l-[64px] rtl:border-r-[64px] dark:bg-primary-dark-light">
<span class="absolute ltr:-left-11 rtl:-right-11 inset-y-0 text-white w-6 h-6 m-auto">
<svg> ... </svg>
</span>
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- danger -->
<div class="relative flex items-center border p-3.5 rounded before:inline-block before:absolute before:top-1/2 ltr:before:right-0 rtl:before:left-0 rtl:before:rotate-180 before:-mt-2 before:border-r-8 before:border-t-8 before:border-b-8 before:border-t-transparent before:border-b-transparent before:border-r-inherit text-danger bg-danger-light border-danger ltr:border-r-[64px] rtl:border-l-[64px] dark:bg-danger-dark-light">
<span class="absolute ltr:-right-11 rtl:-left-11 inset-y-0 text-white w-6 h-6 m-auto">
<svg> ... </svg>
</span>
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
هشدارهای سفارشی
نمونه کد
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
<!-- info -->
<div class="flex items-center p-3.5 rounded text-white bg-info">
<span class="text-white w-6 h-6 ltr:mr-4 rtl:ml-4">
<svg> ... </svg>
</span>
<span><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="btn btn-sm bg-white text-black ltr:ml-auto rtl:mr-auto">Accept</button>
<button type="button" class="ltr:ml-4 rtl:mr-4">
<svg> ... </svg>
</button>
</div>
<!-- gradient -->
<div class="flex items-center p-3.5 rounded text-white" style="background: rgb(188,26,78);background: linear-gradient(135deg, rgba(188,26,78,1) 0%, rgba(0,79,230,1) 100%);">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- image -->
<div class="flex items-center p-3.5 rounded text-white bg-[url('../images/menu-heade.jpg')] bg-no-repeat bg-center bg-cover">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
© روشاک