كروت المحتوى

<article class="card p-article-card">
<div class="p-cover-art art-1">
<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 5v16m0-16C8 2 4 3 2 4v15c3-1 6-1 10 2 4-3 7-3 10-2V4c-3-1-6-2-10 1Z"/>
</svg>
</div>
<div class="p-pad">
<span class="p-badge" data-status="published">منشور</span>
<h2>
<a href="pages/management/article-edit.html?id=1">تصميم مساحة عمل أوضح</a>
</h2>
<p>أفكار عملية تساعدك على بناء تجربة واضحة ومتناسقة لمشروعك.</p>
<footer>
<span>أحمد منصور</span>
<a class="text-button" href="pages/management/article-edit.html?id=1">تعديل<svg class="icon directional" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 12h14m-5-5 5 5-5 5"/>
</svg>
</a>
</footer>
</div>
</article>

<article class="card p-pad">
<div class="flex between mb">
<span class="icon-tile tone-0">
<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="M3 8V6a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z"/>
</svg>
</span>
<span class="p-badge" data-status="active">نشط</span>
</div>
<h2>تجديد موقع حنين ويب</h2>
<p class="p-note">حوّل فكرتك إلى واقع بخطة واضحة وجدول منظم وفريق يهتم بالتفاصيل.</p>
<div class="flex between mb">
<small>التقدم</small>
<strong>72%</strong>
</div>
<div class="p-progress">
<span style="width:72%">
</span>
</div>
<div class="flex between section-copy">
<span class="avatar tone-0 " aria-hidden="true">أم</span>
<a class="btn btn-secondary btn-sm" href="pages/workspace/projects.html">
<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="M5 12h14m-5-5 5 5-5 5"/>
</svg>عرض التفاصيل</a>
</div>
</article>

<article class="card p-pad">
<div class="p-cover-art art-2">
<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">
<rect x="3" y="5" width="18" height="16" rx="3"/>
<path d="M7 3v4m10-4v4M3 11h18m-14 4h2m6 0h2m-10 3h2"/>
</svg>
</div>
<p class="premium-kicker section-copy">19 NOV 2026</p>
<h2>اجتماع فريق التصميم</h2>
<p class="p-note">امنح الأعمال المهمة وقتها المستحق.</p>
<a class="btn btn-primary" href="pages/workspace/calendar.html">
<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">
<rect x="3" y="5" width="18" height="16" rx="3"/>
<path d="M7 3v4m10-4v4M3 11h18m-14 4h2m6 0h2m-10 3h2"/>
</svg>التقويم</a>
</article>

<div class="p-stack">
<a class="flex" href="pages/management/article-edit.html?id=2">
<span class="icon-tile tone-0">
<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 5v16m0-16C8 2 4 3 2 4v15c3-1 6-1 10 2 4-3 7-3 10-2V4c-3-1-6-2-10 1Z"/>
</svg>
</span>
<span>
<strong>تفاصيل تصنع تجربة أفضل</strong>
<br>
<small>سارة خليل · 4 دقائق قراءة</small>
</span>
<svg class="icon directional" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 12h14m-5-5 5 5-5 5"/>
</svg>
</a>
<a class="flex" href="pages/management/article-edit.html?id=3">
<span class="icon-tile tone-1">
<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 5v16m0-16C8 2 4 3 2 4v15c3-1 6-1 10 2 4-3 7-3 10-2V4c-3-1-6-2-10 1Z"/>
</svg>
</span>
<span>
<strong>دليل إطلاق منتج جديد</strong>
<br>
<small>عمر حسن · 4 دقائق قراءة</small>
</span>
<svg class="icon directional" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 12h14m-5-5 5 5-5 5"/>
</svg>
</a>
<a class="flex" href="pages/management/article-edit.html?id=4">
<span class="icon-tile tone-2">
<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 5v16m0-16C8 2 4 3 2 4v15c3-1 6-1 10 2 4-3 7-3 10-2V4c-3-1-6-2-10 1Z"/>
</svg>
</span>
<span>
<strong>كيف ننظم مكتبة المكونات</strong>
<br>
<small>لينا إبراهيم · 4 دقائق قراءة</small>
</span>
<svg class="icon directional" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 12h14m-5-5 5 5-5 5"/>
</svg>
</a>
</div>