سبک کارت برای امتیازدهی
برای منبع ارزشمند بازخورد از کارت امتیازدهی با متغیر استفاده کنید.
کارت امتیازدهی
می
من یک طراح رابط / تجربه کاربری هستم و دوست دارم خلاق باشم.
- 213پروژه
- 87.5%انجام شده
- 587مسئولیت
108 امتیاز
مثال کد
<div class="card">
<div class="card-inner">
<div class="team">
<div class="user-card user-card-s2">
<div class="user-avatar md bg-info">
<span>می</span>
<div class="status dot dot-lg dot-success"></div>
</div>
<div class="user-info">
<h6>محمدرضا یاسینی</h6>
<span class="sub-text">mmreza@</span>
</div>
<ul class="rating mt-1">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-half-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
</div>
<div class="team-details pt-0">
<p>من یک طراح رابط / تجربه کاربری هستم و دوست دارم خلاق باشم.</p>
</div>
<ul class="team-statistics">
<li><span>213</span><span>پروژه</span></li>
<li><span>87.5%</span><span>انجام شده</span></li>
<li><span>587</span><span>مسئولیت</span></li>
</ul>
<div class="team-view">
<a href="#" class="btn btn-round btn-outline-light w-150px"><span>مشاهده پروفایل</span></a>
</div>
</div><!-- .team -->
</div><!-- .card-inner -->
</div><!-- .card -->
<div class="card">
<div class="card-inner">
<div class="rating-card d-flex align-center flex-column">
<div class="user-info mb-2">
<h6>کیفیت طراحی</h6>
</div>
<div class="user-avatar md bg-teal m-2">
<span>4.5</span>
<div class="status dot dot-lg dot-success"></div>
</div>
<ul class="rating mt-1">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-half-fill"></em></li>
</ul>
</div>
<div class="text-center mt-1">
<p>108 امتیاز</p>
</div>
<div class="gy-3 pt-4">
<div class="progress-rating">
<div class="progress-rating-title">5 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar bg-teal" data-progress="72"></div>
</div>
<div class="progress-rating-percent">72%</div>
</div>
<div class="progress-rating">
<div class="progress-rating-title">4 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar bg-success" data-progress="58"></div>
</div>
<div class="progress-rating-percent">58%</div>
</div>
<div class="progress-rating">
<div class="progress-rating-title">3 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar bg-info" data-progress="34"></div>
</div>
<div class="progress-rating-percent">34%</div>
</div>
<div class="progress-rating">
<div class="progress-rating-title">2 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar bg-warning" data-progress="18"></div>
</div>
<div class="progress-rating-percent">18%</div>
</div>
<div class="progress-rating">
<div class="progress-rating-title">1 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar bg-danger" data-progress="55"></div>
</div>
<div class="progress-rating-percent">55%</div>
</div>
</div>
</div><!-- .card-inner -->
</div><!-- .card -->
نقد و بررسی مشتری
4.4
مجموع 47,860مثال کد
<div class="card">
<div class="card-inner">
<div class="rating-card text-center mb-1">
<h6 class="title">نقد و بررسی مشتری</h6>
<div class="rating-wrap bg-light rating-pill my-1">
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-half-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
<span class="amount">3.5 از 5</span>
</div>
<span class="sub-text mt-1">40 امتیاز مشتری</span>
</div>
<div class="pt-3 gy-3">
<div class="progress-rating">
<div class="progress-rating-title">5 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar" data-progress="62"></div>
</div>
<div class="progress-rating-percent">62%</div>
</div>
<div class="progress-rating">
<div class="progress-rating-title">4 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar" data-progress="47"></div>
</div>
<div class="progress-rating-percent">47%</div>
</div>
<div class="progress-rating">
<div class="progress-rating-title">3 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar" data-progress="24"></div>
</div>
<div class="progress-rating-percent">24%</div>
</div>
<div class="progress-rating">
<div class="progress-rating-title">2 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar" data-progress="30"></div>
</div>
<div class="progress-rating-percent">30%</div>
</div>
<div class="progress-rating">
<div class="progress-rating-title">1 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar" data-progress="40"></div>
</div>
<div class="progress-rating-percent">40%</div>
</div>
</div>
</div><!-- .card-inner -->
</div><!-- .card -->
<div class="card">
<div class="card-inner">
<div class="rating-card text-center mb-1">
<h6 class="title">نقد و بررسی مشتری</h6>
<div class="rating-wrap bg-light rating-pill my-1">
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-half-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
<span class="amount">3.5 از 5</span>
</div>
<span class="sub-text mt-1">40 امتیاز مشتری</span>
</div>
<div class="pt-3 gy-3">
<div class="progress-rating">
<div class="progress-rating-title">5 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar" data-progress="62"></div>
</div>
<div class="progress-rating-percent">62%</div>
</div>
<div class="progress-rating">
<div class="progress-rating-title">4 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar" data-progress="47"></div>
</div>
<div class="progress-rating-percent">47%</div>
</div>
<div class="progress-rating">
<div class="progress-rating-title">3 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar" data-progress="24"></div>
</div>
<div class="progress-rating-percent">24%</div>
</div>
<div class="progress-rating">
<div class="progress-rating-title">2 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar" data-progress="30"></div>
</div>
<div class="progress-rating-percent">30%</div>
</div>
<div class="progress-rating">
<div class="progress-rating-title">1 ستاره</div>
<div class="progress progress-md progress-alt">
<div class="progress-bar" data-progress="40"></div>
</div>
<div class="progress-rating-percent">40%</div>
</div>
</div>
</div><!-- .card-inner -->
</div><!-- .card -->
پروفایل کاربر
طراح رابط / تجربه کاربری در گوگل
- ایران، تهران، میدان آزادی، پلاک 1
- 21 آبان 1402
- تمام وقت
توسعه دهنده در سافت نیو
- ایران، تهران، میدان آزادی، پلاک 1
- 21 آبان 1402
- تمام وقت
مثال کد
<div class="card">
<div class="card-inner">
<h4 class="card-title mb-1">طراح رابط / تجربه کاربری در گوگل</h4>
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-half-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
<div class="d-flex justify-content-between align-items-end">
<ul class="pt-2 gy-1">
<li><em class="icon ni ni-map-pin"></em><span>ایران، تهران، میدان آزادی، پلاک 1</span></li>
<li><em class="icon ni ni-calender-date"></em><span>21 آبان 1402</span></li>
<li><em class="icon ni ni-briefcase"></em><span>تمام وقت</span></li>
</ul>
<span class="badge badge-dim badge-sm rounded-pill bg-outline-info">1,550,000 تومان</span>
</div>
<div class="collapse" id="collapseDes1">
<div class="divider"></div>
<div class="rating-card-description">
<h5 class="card-title">توضیحات</h5>
<p class="text-muted">چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت. چند مثال متن سریع برای ساخت بر روی عنوان کارت انبوه.</p>
<ul class="pt-2 gy-1">
<li><em class="icon ni ni-check-circle"></em><span>30 روز مرخصی</span></li>
<li><em class="icon ni ni-check-circle"></em><span>نوشیدنی های رایگان</span></li>
<li><em class="icon ni ni-check-circle"></em><span>مرخصی با حقوق</span></li>
<li><em class="icon ni ni-check-circle"></em><span>مراقبت های بهداشتی</span></li>
</ul>
</div>
</div>
</div>
<div class="card-footer rating-card-footer bg-light border-top d-flex align-center justify-content-between">
<a class="switch-text collapsed" data-toggle="collapse" href="#collapseDes1">
<div class="link link-gray switch-text-normal">
<span>اطلاعات کمتر</span><em class="icon ni ni-upword-ios"></em>
</div>
<div class="link link-gray switch-text-collapsed">
<span>اطلاعات بیشتر</span><em class="icon ni ni-downward-ios"></em>
</div>
</a>
<a href="#" class="btn btn-primary">درخواست</a>
</div>
</div>
<div class="card">
<div class="card-inner">
<h4 class="card-title mb-1">توسعه دهنده در سافت نیو</h4>
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-half-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
<div class="d-flex justify-content-between align-items-end">
<ul class="pt-2 gy-1">
<li><em class="icon ni ni-map-pin"></em><span>ایران، تهران، میدان آزادی، پلاک 1</span></li>
<li><em class="icon ni ni-calender-date"></em><span>21 آبان 1402</span></li>
<li><em class="icon ni ni-briefcase"></em><span>تمام وقت</span></li>
</ul>
<span class="badge badge-dim badge-sm rounded-pill bg-outline-info">1,550,000 تومان</span>
</div>
<div class="collapse show" id="collapseDes2">
<div class="divider"></div>
<div class="rating-card-description">
<h5 class="card-title">توضیحات</h5>
<p class="text-muted">چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت. چند مثال متن سریع برای ساخت بر روی عنوان کارت انبوه.</p>
<ul class="pt-2 gy-1">
<li><em class="icon ni ni-check-circle"></em><span>30 روز مرخصی</span></li>
<li><em class="icon ni ni-check-circle"></em><span>نوشیدنی های رایگان</span></li>
<li><em class="icon ni ni-check-circle"></em><span>مرخصی با حقوق</span></li>
<li><em class="icon ni ni-check-circle"></em><span>مراقبت های بهداشتی</span></li>
</ul>
</div>
</div>
</div>
<div class="card-footer rating-card-footer bg-light border-top d-flex align-center justify-content-between">
<a class="switch-text" data-toggle="collapse" href="#collapseDes2">
<div class="link link-gray switch-text-normal">
<span>اطلاعات کمتر</span><em class="icon ni ni-upword-ios"></em>
</div>
<div class="link link-gray switch-text-collapsed">
<span>اطلاعات بیشتر</span><em class="icon ni ni-downward-ios"></em>
</div>
</a>
<a href="#" class="btn btn-primary">درخواست</a>
</div>
</div>
پروفایل موسسه
سافت نیو
معیارها در سافت نیو
مثال کد
<div class="card">
<div class="card-inner">
<h4 class="card-title mb-1">سافت نیو</h4>
<div class="rating-wrap my-1">
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-half-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
<span class="amount ms-2">4.4 (78)</span>
</div>
<h5 class="card-title mt-4">معیارها در سافت نیو</h5>
<div class="rating-card">
<div class="d-flex align-center justify-content-between py-1">
<span class="text-muted">سودآوری</span>
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
</ul>
</div>
<div class="d-flex align-center justify-content-between py-1">
<span class="text-muted">موقعیت رقابتی</span>
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
</div>
<div class="d-flex align-center justify-content-between py-1">
<span class="text-muted">ارزش برند</span>
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
</ul>
</div>
<div class="d-flex align-center justify-content-between py-1">
<span class="text-muted">محیط</span>
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
</div>
</div>
<div class="collapse" id="collapseDes3">
<div class="divider"></div>
<div class="rating-card-description">
<h5 class="card-title">توضیحات</h5>
<p class="text-muted">چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت. چند مثال متن سریع برای ساخت بر روی عنوان کارت انبوه.</p>
<ul class="pt-2 gy-1">
<li><em class="icon ni ni-check-circle"></em><span>30 روز مرخصی</span></li>
<li><em class="icon ni ni-check-circle"></em><span>نوشیدنی های رایگان</span></li>
<li><em class="icon ni ni-check-circle"></em><span>مرخصی با حقوق</span></li>
<li><em class="icon ni ni-check-circle"></em><span>مراقبت های بهداشتی</span></li>
</ul>
</div>
</div>
</div>
<div class="card-footer rating-card-footer bg-light border-top d-flex align-center justify-content-between">
<a class="switch-text collapsed" data-toggle="collapse" href="#collapseDes3">
<div class="link link-gray switch-text-normal">
<span>اطلاعات کمتر</span><em class="icon ni ni-upword-ios"></em>
</div>
<div class="link link-gray switch-text-collapsed">
<span>اطلاعات بیشتر</span><em class="icon ni ni-downward-ios"></em>
</div>
</a>
<a href="#" class="btn btn-primary">درخواست</a>
</div>
</div>
فرم نقد و بررسی
سافت نیو
معیارها در سافت نیو
سافت نیو
معیارها در سافت نیو
مثال کد
<div class="card">
<div class="card-inner">
<h4 class="card-title mb-1">سافت نیو</h4>
<div class="rating-wrap my-1">
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-half-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
<span class="amount ms-2">4.4 (78)</span>
</div>
<form action="#" class="mt-2">
<div class="form-group">
<label class="form-label" for="title">عنوان</label>
<div class="form-control-wrap">
<input type="text" class="form-control" id="title" value="فقط وقتی که رفته دلتنگش می شوی!" required>
</div>
</div>
<div class="form-group">
<label class="form-label" for="job-title">عنوان شغل</label>
<div class="form-control-wrap">
<input type="text" class="form-control" id="job-title" value="توسعه دهنده ارشد فرانت اند" required>
</div>
</div>
<div class="form-group">
<label class="form-label" for="review">تجربه شما چطور بود؟</label>
<div class="form-control-wrap">
<textarea class="form-control no-resize" id="review">من ماه هاست که از دش‌لایت استفاده می کنم و با هر به روز رسانی تازه بهتر می شود. با تشکر از شما برای چنین لمس طراحی عالی. واقعا دوستش دارم</textarea>
</div>
</div>
</form>
<h5 class="card-title mt-5">معیارها در سافت نیو</h5>
<div class="rating-card">
<div class="d-flex align-center justify-content-between py-1">
<span class="text-muted">سودآوری</span>
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
</ul>
</div>
<div class="d-flex align-center justify-content-between py-1">
<span class="text-muted">موقعیت رقابتی</span>
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
</div>
<div class="d-flex align-center justify-content-between py-1">
<span class="text-muted">ارزش برند</span>
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
</ul>
</div>
<div class="d-flex align-center justify-content-between py-1">
<span class="text-muted">محیط</span>
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
</div>
</div>
</div>
<div class="card-footer bg-light border-top d-flex align-center justify-content-end py-3">
<a href="#" class="btn btn-primary">انتشار نقد و بررسی</a>
</div>
</div>
<div class="card">
<div class="card-inner">
<h4 class="card-title mb-1">سافت نیو</h4>
<div class="rating-wrap my-1">
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-half-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
<span class="amount ms-2">4.4 (78)</span>
</div>
<form action="#" class="mt-2">
<div class="form-group">
<label class="form-label" for="rt-title">عنوان</label>
<div class="form-control-wrap">
<input type="text" class="form-control" id="rt-title" placeholder="عنوان" required>
</div>
</div>
<div class="form-group">
<label class="form-label" for="rt-job-title">عنوان شغل</label>
<div class="form-control-wrap">
<input type="text" class="form-control" id="rt-job-title" placeholder="عنوان شغل" required>
</div>
</div>
<div class="form-group">
<label class="form-label" for="rt-review">تجربه شما چطور بود؟</label>
<div class="form-control-wrap">
<textarea class="form-control no-resize" id="rt-review" placeholder="تجربه خود را در سافت نیو شرح دهید"></textarea>
</div>
</div>
</form>
<h5 class="card-title mt-5">معیارها در سافت نیو</h5>
<div class="rating-card">
<div class="d-flex align-center justify-content-between py-1">
<span class="text-muted">سودآوری</span>
<ul class="rating">
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
</div>
<div class="d-flex align-center justify-content-between py-1">
<span class="text-muted">موقعیت رقابتی</span>
<ul class="rating">
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
</div>
<div class="d-flex align-center justify-content-between py-1">
<span class="text-muted">ارزش برند</span>
<ul class="rating">
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
</div>
<div class="d-flex align-center justify-content-between py-1">
<span class="text-muted">محیط</span>
<ul class="rating">
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul>
</div>
</div>
</div>
<div class="card-footer bg-light border-top d-flex align-center justify-content-end py-3">
<a href="#" class="btn btn-primary">انتشار نقد و بررسی</a>
</div>
</div>
امتیاز مشتریان
کیفیت طراحی
توسط سافت نیو
13 روز پیشکیفیت ویژگی
توسط سافت نیو
6 روز پیش
من ماه هاست که از دش‌لایت استفاده می کنم و با هر به روز رسانی تازه بهتر می شود. با تشکر از شما برای چنین لمس طراحی عالی. علاوه بر این من قطعا با محصول شما همکاری می کنم. بسیار قدردانی می کنم. واقعا دوستش دارم
ف‌ت
فرشید ترنیاننویسنده
منطقه زمانی به زمان سرور شما بستگی دارد چون ما به طور پیش فرض از آن استفاده می کنیم. بنابراین باید آن را از سرور خود تغییر دهید. برای مشکلات نمایش داده ها، می توانید نشانی اینترنتی وب سایت خود را ارسال کنید تا بررسی کنیم که چه چیزی واقعا اشتباه است.
د‌ع
دنیا عامری
با تشکر برای راهنمایی. واقعا پشتیبانی عالی است.
مثال کد
<div class="card">
<div class="card-inner py-3">
<div class="d-flex align-center justify-content-between">
<div>
<h5 class="title">کیفیت طراحی</h5>
<div class="d-sm-flex">
<p class="m-0 pe-2">توسط <a href="#">سافت نیو</a></p>
<span>13 روز پیش</span>
</div>
</div>
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-half-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul><!-- .rating -->
</div>
</div>
</div><!-- .card -->
<div class="card">
<div class="card-inner border-bottom bg-lighter py-3">
<div class="d-flex align-center justify-content-between">
<div>
<h5 class="title">کیفیت ویژگی</h5>
<div class="d-sm-flex">
<p class="m-0 pe-2">توسط <a href="#">سافت نیو</a></p>
<span>6 روز پیش</span>
</div>
</div>
<ul class="rating">
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-fill"></em></li>
<li><em class="icon ni ni-star-half-fill"></em></li>
<li><em class="icon ni ni-star"></em></li>
</ul><!-- .rating -->
</div>
</div>
<div class="card-inner">
<p>من ماه هاست که از دش‌لایت استفاده می کنم و با هر به روز رسانی تازه بهتر می شود. با تشکر از شما برای چنین لمس طراحی عالی. علاوه بر این من قطعا با محصول شما همکاری می کنم. بسیار قدردانی می کنم. واقعا دوستش دارم</p>
</div>
<div class="card-inner border-top">
<div class="d-flex">
<div class="user-avatar md bg-purple me-3">
<span>ف‌ت</span>
</div>
<div>
<h5 class="mt-0">فرشید ترنیان <span class="badge badge-dim bg-outline-info ms-1">نویسنده</span></h5>
<p>با تشکر از بازخورد ارزشمند شما.</p>
<p>منطقه زمانی به زمان سرور شما بستگی دارد چون ما به طور پیش فرض از آن استفاده می کنیم. بنابراین باید آن را از سرور خود تغییر دهید. برای مشکلات نمایش داده ها، می توانید نشانی اینترنتی وب سایت خود را ارسال کنید تا بررسی کنیم که چه چیزی واقعا اشتباه است.</p>
</div>
</div>
</div>
<div class="card-inner border-top">
<div class="d-flex">
<div class="user-avatar md bg-info me-3">
<span>د‌ع</span>
</div>
<div>
<h5 class="mt-0">دنیا عامری<span class="badge badge-dim bg-outline-success ms-1">خریداری شده</span></h5>
<p>با تشکر برای راهنمایی. واقعا پشتیبانی عالی است.</p>
</div>
</div>
</div>
</div><!-- .card -->
سفارشی سازی
برای سفارشی سازی کردن کامپوننت می توانید از آیکون امتیازدهی سفارشی استفاده کنید.
مثال کد
<ul class="rating text-danger">
<li><em class="icon ni ni-heart-fill"></em></li>
<li><em class="icon ni ni-heart-fill"></em></li>
<li><em class="icon ni ni-heart-fill"></em></li>
<li><em class="icon ni ni-heart-fill"></em></li>
<li><em class="icon ni ni-heart"></em></li>
</ul>
