カード

<div class="u-space-y-sm">
<!-- eslint-disable-next-line -->
<TextCard title="ブログのタイトルが入ります" date="2024.03.01" tags={["Astro", "JavaScript"]} href="/blog/sample-post" />
<!-- eslint-disable-next-line -->
<TextCard title="Astroで始めるモダンWebフロントエンド開発：静的サイト生成とコンポーネント設計のベストプラクティス" date="2024.02.03" tags={["Astro", "JavaScript", "TypeScript", "React", "Vue", "SSG", "Web開発", "フロントエンド", "HTML", "CSS", "Node.js", "Vite", "パフォーマンス", "SEO"]} href="/blog/astro-modern-web" />
</div>

 <div class="u-space-y-sm">
<a class="c-link-card" href="★★★">
<div class="c-link-card_meta">
<p class="c-link-card_page-title">タイトルが入ります</p>
<p class="c-link-card_description" data-text-overflow="2">説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
<div class="c-link-card_info">
<div class="c-link-card_icon"><img src="/favicon.ico" alt="" width="100" height="100"></div>
<div class="c-link-card_site-info">
<p class="c-link-card_site-title">My Snippets</p>
<p class="c-link-card_url">http://localhost:4321/snippets/components/card/</p>
</div>
</div>
</div>
<figure class="c-link-card_img">
<img src="https://placehold.jp/1200x630.png" alt="★★★" width="200" height="105">
</figure>
</a>
<a class="c-link-card" href="★★★" target="_blank">
<div class="c-link-card_meta">
<p class="c-link-card_page-title">YotubeTitleが入ります。YotubeTitleが入ります。YotubeTitleが入ります。YotubeTitleが入ります。YotubeTitleが入ります。YotubeTitleが入ります。YotubeTitleが入ります。</p>
<p class="c-link-card_description" data-text-overflow="2">https://youtube.com/@tbs_bloomberg👆チャンネル登録・高評価をよろしくお願いしますTBSアナウンサー篠原梨菜がMCを務める番組「Human Insight」。ウェルビーイング、メンタルヘルスや人間とAIの違いなど、ビジネス視点から人間の心身の謎を解き明かします。今回のテーマは「幸</p>
<div class="c-link-card_info">
<div class="c-link-card_icon"><img src="https://www.youtube.com/s/desktop/30100020/img/logos/favicon.ico" alt="" width="100" height="100"></div>
<div class="c-link-card_site-info">
<p class="c-link-card_site-title">My Snippets</p>
<p class="c-link-card_url">http://localhost:4321/snippets/components/card/</p>
</div>
</div>
</div>
<figure class="c-link-card_img">
<img src="https://placehold.jp/1200x630.png" alt="★★★" width="200" height="105">
</figure>
<span role="img" class="icon_external" aria-label="新規タブで開く"></span>
</a>
</div>