Content cards

<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">Published</span>
<h2>
<a href="pages/management/article-edit.html?id=1">A clearer workspace starts here</a>
</h2>
<p>Practical ideas for building a clear and consistent experience for your next project.</p>
<footer>
<span>Alex Morgan</span>
<a class="text-button" href="pages/management/article-edit.html?id=1">Edit<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">Active</span>
</div>
<h2>HaneenWeb website refresh</h2>
<p class="p-note">Bring your next idea to life with a focused plan, a clear timeline, and a thoughtful team.</p>
<div class="flex between mb">
<small>Progress</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">AM</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>View details</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>Design team sync</h2>
<p class="p-note">Make space for the work that matters.</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>Calendar</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>Small details, better experiences</strong>
<br>
<small>Sara Wilson · 4 min read</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>A thoughtful product launch</strong>
<br>
<small>Omar Hassan · 4 min read</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>Organizing your component library</strong>
<br>
<small>Lina Davis · 4 min read</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>