CardList
A vertical layout system for displaying content cards with dates and "Read more" links
A vertical card layout component for organizing content with date circles and navigation.
Overview
The CardList component provides a vertical layout for displaying text-based cards with date circles, "Read more" links, animated arrows, and a "View all" navigation link.
API Reference
CardList
The root container component that manages vertical layout with fixed spacing.
- title:
string- Section title (default: "PRESS RELEASES") - viewAllText:
string- Text for "view all" link - viewAllHref:
string- URL for "view all" link
CardList.Card
Individual text-based card component with "Read more" link.
- date:
Date- Date object to display in circle - showYear:
boolean- Show year format ("Dec 19" / "2025") instead of default ("Dec" / "19") (default: false) - circleSize:
'sm' | 'md' | 'lg'- Circle size with proportional text scaling (default: 'sm') - href: Link URL
- target: Link target attribute
- rel: Link relationship attribute
Default Format
Default date format shows 3-letter month on top and day below.
<CardList>
<CardList.Card date={new Date('2024-03-15')} href="#" target="_blank" rel="noreferrer">
{#snippet children()}
<p>Discover how our latest research is transforming the future of medicine and improving patient outcomes worldwide.</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2024-02-28')} href="#" target="_blank" rel="noreferrer">
{#snippet children()}
<p>Learn about our global initiatives to make life-saving medications more accessible to communities in need.</p>
{/snippet}
</CardList.Card>
</CardList>Year Format
With showYear=true, displays "Month Day" on top and year below.
PRESS RELEASES
Explore stories from our team members about finding meaning and connection in their work at Teva.
<CardList>
<CardList.Card date={new Date('2025-03-03')} showYear={true} href="#" target="_blank" rel="noreferrer">
{#snippet children()}
<p>Explore stories from our team members about finding meaning and connection in their work at Teva.</p>
{/snippet}
</CardList.Card>
</CardList>Circle Sizes (default is sm)
Medium (md) circle size with scaled text.
PRESS RELEASES
Medium circle size example. This demonstrates the medium circle size with proportionally scaled text that maintains visual balance.
<CardList>
<CardList.Card date={new Date('2024-03-15')} circleSize="md" href="#" target="_blank" rel="noreferrer">
{#snippet children()}
<p>Medium circle size example. This demonstrates the medium circle size with proportionally scaled text that maintains visual balance.</p>
{/snippet}
</CardList.Card>
</CardList>