CardList
A vertical layout system for displaying content cards with dates and customizable action 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, customizable action links, animated arrows, and a "View all" navigation link.
API Reference
CardList
The root container component that manages vertical layout with fixed spacing.
- heading:
Snippet- Title content snippet for custom heading levels (optional) - viewAllText:
string- Text for "view all" link (optional, button hidden if not provided) - viewAllHref:
string- URL for "view all" link (default: "#") - viewAllTarget:
string- Target for "view all" link (optional, e.g., "_blank")
CardList.Card
Individual text-based card component with customizable action 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') - linkText:
string- Text for the action link (default: 'Read more') - 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 viewAllText="View all press releases" viewAllHref="#" viewAllTarget="_blank">
{#snippet heading()}
<h2>Press releases</h2>
{/snippet}
<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.
Events
Explore stories from our team members about finding meaning and connection in their work at Teva.
<CardList viewAllText="View all events" viewAllHref="#">
{#snippet heading()}
<h2>Events</h2>
{/snippet}
<CardList.Card date={new Date('2025-03-03')} showYear={true} href="#">
{#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.
Circle Size Examples
Medium circle size example. This demonstrates the medium circle size with proportionally scaled text that maintains visual balance.
<CardList>
{#snippet heading()}
<h3>Circle Size Examples</h3>
{/snippet}
<CardList.Card date={new Date('2024-03-15')} circleSize="md" href="#">
{#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>Custom Link Text
The linkText prop allows customization of the action link text for different use cases.
News & Events
Join our upcoming webinar series on innovative pharmaceutical research and development.
Explore our new patient assistance program designed to improve medication accessibility.
Access our comprehensive annual sustainability report highlighting environmental initiatives.
<CardList viewAllText="View all news" viewAllHref="#" viewAllTarget="_blank">
{#snippet heading()}
<h2>News & Events</h2>
{/snippet}
<CardList.Card date={new Date('2024-03-15')} linkText="Learn more" href="#">
{#snippet children()}
<p>Join our upcoming webinar series on innovative pharmaceutical research and development.</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2024-02-28')} linkText="View details" href="#">
{#snippet children()}
<p>Explore our new patient assistance program designed to improve medication accessibility.</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2024-01-15')} linkText="Download PDF" href="#">
{#snippet children()}
<p>Access our comprehensive annual sustainability report highlighting environmental initiatives.</p>
{/snippet}
</CardList.Card>
</CardList>