Overview

The <vision-cardlist> web component provides a vertical layout for displaying text-based cards with date circles, "Read more" links, animated arrows, and a "View all" navigation link. It includes a section title and footer navigation.

API Reference

<vision-cardlist>

The root container web component that manages vertical layout with fixed spacing and includes title and footer navigation.

title: string - Section title (default: "PRESS RELEASES")
view-all-text: string - Text for "view all" link (default: "View all press releases")
view-all-href: string - URL for "view all" link (default: "#")

<vision-cardlist-card>

Individual text-based card web component with "Read more" link and animated arrow.

date: string - ISO date string to display in circle (default: current date)
show-year: boolean - Show year format ("Dec 19" / "2025") instead of default ("Dec" / "19") (default: false)
circle-size: 'sm' | 'md' | 'lg' - Circle size with proportional text scaling (default: 'sm')
href: string - Link URL
target: string - Link target attribute
rel: string - Link relationship attribute

Basic Usage

Default date format shows 3-letter month on top and day below. The component includes a title, cards, and "View all" link.

Discover how our latest research is transforming the future of medicine and improving patient outcomes worldwide.

Learn about our global initiatives to make life-saving medications more accessible to communities in need.

<vision-cardlist title="PRESS RELEASES" view-all-text="View all press releases" view-all-href="#">
	<vision-cardlist-card date="2024-03-15" href="#">
		<p>Discover how our latest research is transforming the future of medicine and improving patient outcomes worldwide.</p>
	</vision-cardlist-card>
	<vision-cardlist-card date="2024-02-28" href="#">
		<p>Learn about our global initiatives to make life-saving medications more accessible to communities in need.</p>
	</vision-cardlist-card>
</vision-cardlist>

Year Format

With show-year="true", displays "Month Day" on top and year below.

Explore stories from our team members about finding meaning and connection in their work at Teva.

Join us for our flagship event showcasing the latest advances in pharmaceutical technology.

<vision-cardlist title="PRESS RELEASES" view-all-text="View all press releases" view-all-href="#">
	<vision-cardlist-card date="2025-03-03" show-year="true" href="#">
		<p>Explore stories from our team members about finding meaning and connection in their work at Teva.</p>
	</vision-cardlist-card>
	<vision-cardlist-card date="2025-04-15" show-year="true" href="#">
		<p>Join us for our flagship event showcasing the latest advances in pharmaceutical technology.</p>
	</vision-cardlist-card>
</vision-cardlist>

Circle Sizes

The circle-size attribute controls the date circle size with proportional text scaling. Available sizes: sm (default), md, lg.

Small circle size (default). Compact design suitable for dense content layouts.

Medium circle size with scaled text. Balanced visibility for standard content sections.

Large circle size for prominent display. Enhanced visibility for featured content or hero sections.

<vision-cardlist title="CIRCLE SIZE EXAMPLES">
	<vision-cardlist-card date="2024-03-15" circle-size="sm" href="#">
		<p>Small circle size (default). Compact design suitable for dense content layouts.</p>
	</vision-cardlist-card>
	<vision-cardlist-card date="2024-03-15" circle-size="md" href="#">
		<p>Medium circle size with scaled text. Balanced visibility for standard content sections.</p>
	</vision-cardlist-card>
	<vision-cardlist-card date="2024-03-15" circle-size="lg" href="#">
		<p>Large circle size for prominent display. Enhanced visibility for featured content or hero sections.</p>
	</vision-cardlist-card>
</vision-cardlist>