Overview
This card layout emphasizes the author profile alongside blog content.
Get Code
Author Highlight Card
Highlighting the author increases trust and engagement.
John Doe
Content Writer
<template>
<div class="w-full max-w-md bg-white border border-slate-200 rounded-xl p-5">
<h3 class="text-lg font-bold text-slate-900 mb-3">
Author Highlight Card
</h3>
<p class="text-sm text-slate-600 mb-4">
Highlighting the author increases trust and engagement.
</p>
<div class="flex items-center gap-3 mt-4">
<img
class="w-8 h-8 rounded-full"
src="https://i.pravatar.cc/100"
alt="Author"
/>
<div>
<p class="text-sm font-medium text-slate-900">John Doe</p>
<p class="text-xs text-slate-400">Content Writer</p>
</div>
</div>
</div>
</template>
Use Cases
- Personal blogs
- Editorial websites
- Writer portfolios