كروت الأشخاص والفرق

أنماط عملية وأمثلة واضحة قابلة للتخصيص لمشروعك.

بطاقة ملف شخصي

أحمد منصور

مدير مساحة العمل · عمّان، الأردن

12 المشاريع
64 زميل
عرض التفاصيل
عرض كود المثال
<article class="p-person-card">
<span class="avatar tone-0 " aria-hidden="true">أم</span>
<h2>أحمد منصور</h2>
<p>مدير مساحة العمل · عمّان، الأردن</p>
<div class="p-person-stats">
<div>
<strong>12</strong>
<span>المشاريع</span>
</div>
<div>
<strong>64</strong>
<span>زميل</span>
</div>
</div>
<button class="btn btn-primary" data-follow="0" aria-pressed="false">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>متابعة</button>
<a class="text-button section-copy" href="pages/system/profile.html">عرض التفاصيل</a>
</article>

بطاقة ملف شخصي

سارة خليل

المسمى الوظيفي · عمّان، الأردن

15 المشاريع
78 زميل
عرض التفاصيل
عرض كود المثال
<article class="p-person-card">
<span class="avatar tone-1 " aria-hidden="true">سخ</span>
<h2>سارة خليل</h2>
<p>المسمى الوظيفي · عمّان، الأردن</p>
<div class="p-person-stats">
<div>
<strong>15</strong>
<span>المشاريع</span>
</div>
<div>
<strong>78</strong>
<span>زميل</span>
</div>
</div>
<button class="btn btn-secondary" data-follow="1" aria-pressed="false">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>متابعة</button>
<a class="text-button section-copy" href="pages/system/profile.html">عرض التفاصيل</a>
</article>

بطاقة ملف شخصي

عمر حسن

الشركة · عمّان، الأردن

18 المشاريع
92 زميل
عرض التفاصيل
عرض كود المثال
<article class="p-person-card">
<span class="avatar tone-2 " aria-hidden="true">عح</span>
<h2>عمر حسن</h2>
<p>الشركة · عمّان، الأردن</p>
<div class="p-person-stats">
<div>
<strong>18</strong>
<span>المشاريع</span>
</div>
<div>
<strong>92</strong>
<span>زميل</span>
</div>
</div>
<button class="btn btn-primary" data-follow="2" aria-pressed="false">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>متابعة</button>
<a class="text-button section-copy" href="pages/system/profile.html">عرض التفاصيل</a>
</article>

بطاقة فريق

لينا إبراهيم

مدير مساحة العمل · عمّان، الأردن

21 المشاريع
106 زميل
عرض التفاصيل
عرض كود المثال
<article class="p-person-card">
<span class="avatar tone-3 " aria-hidden="true">لإ</span>
<h2>لينا إبراهيم</h2>
<p>مدير مساحة العمل · عمّان، الأردن</p>
<div class="p-person-stats">
<div>
<strong>21</strong>
<span>المشاريع</span>
</div>
<div>
<strong>106</strong>
<span>زميل</span>
</div>
</div>
<button class="btn btn-secondary" data-follow="3" aria-pressed="false">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>متابعة</button>
<a class="text-button section-copy" href="pages/system/profile.html">عرض التفاصيل</a>
</article>

بطاقة فريق

آدم ناصر

المسمى الوظيفي · عمّان، الأردن

24 المشاريع
120 زميل
عرض التفاصيل
عرض كود المثال
<article class="p-person-card">
<span class="avatar tone-4 " aria-hidden="true">آن</span>
<h2>آدم ناصر</h2>
<p>المسمى الوظيفي · عمّان، الأردن</p>
<div class="p-person-stats">
<div>
<strong>24</strong>
<span>المشاريع</span>
</div>
<div>
<strong>120</strong>
<span>زميل</span>
</div>
</div>
<button class="btn btn-primary" data-follow="4" aria-pressed="false">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>متابعة</button>
<a class="text-button section-copy" href="pages/system/profile.html">عرض التفاصيل</a>
</article>

بطاقة فريق

مايا عادل

الشركة · عمّان، الأردن

27 المشاريع
134 زميل
عرض التفاصيل
عرض كود المثال
<article class="p-person-card">
<span class="avatar tone-5 " aria-hidden="true">مع</span>
<h2>مايا عادل</h2>
<p>الشركة · عمّان، الأردن</p>
<div class="p-person-stats">
<div>
<strong>27</strong>
<span>المشاريع</span>
</div>
<div>
<strong>134</strong>
<span>زميل</span>
</div>
</div>
<button class="btn btn-secondary" data-follow="5" aria-pressed="false">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>متابعة</button>
<a class="text-button section-copy" href="pages/system/profile.html">عرض التفاصيل</a>
</article>