Card Layout Component

Horizontal Layout (Default)

Cards display side-by-side in a row. This is the default behavior.

<card-layout
  card1-title="Sherman Fairchild Library"
  card1-description="Study spaces, course reserves, and technology lending."
  card1-link="https://library.caltech.edu/locations/sfl"

  card2-title="Caltech Archives"
  card2-description="Explore Caltech's rich history and scientific legacy."
  card2-link="https://library.caltech.edu/archives"

  card3-title="Research Support"
  card3-description="Get help with data management, publishing, and more."
  card3-link="https://library.caltech.edu/publish"
></card-layout>

Vertical Layout

Cards stack vertically with image on the left and content on the right. Great for listing items or priority content.

<card-layout
  layout="vertical"
  card1-image="https://example.com/image1.jpg"
  card1-alt="Library study space"
  card1-title="Study Spaces"
  card1-description="Reserve individual study rooms, group collaboration spaces..."
  card1-link="/spaces"
  card1-link-text="Reserve a space"

  card2-image="https://example.com/image2.jpg"
  card2-title="Research Consultations"
  ...
></card-layout>

With Images and Alt Text

Add images with custom alt text for accessibility.

<card-layout
  card1-image="https://example.com/image1.jpg"
  card1-alt="Interior view of a modern library with students studying"
  card1-title="Digital Collections"
  card1-description="Browse digitized rare books, photographs, and manuscripts."
  card1-link="https://library.caltech.edu/archives/collections"
  card1-link-text="Explore collections"

  card2-image="https://example.com/image2.jpg"
  card2-alt="Librarian presenting to a group of researchers"
  card2-title="Workshops & Events"
  card2-description="Join us for research skills workshops and special events."
  card2-link="https://library.caltech.edu/events"
  card2-link-text="View calendar"

  card3-image="https://example.com/image3.jpg"
  card3-alt="Stack of textbooks and course materials"
  card3-title="Course Reserves"
  card3-description="Access textbooks and materials for your courses."
  card3-link="https://library.caltech.edu/borrow/reserves"
  card3-link-text="Find reserves"
></card-layout>

Attributes Reference

Attribute	Description	Default
layout	Card arrangement: "horizontal" or "vertical"	"horizontal"
card[1-3]-image	URL for the card image	Placeholder shown
card[1-3]-alt	Alt text for the card image (accessibility)	Uses card title
card[1-3]-title	Card heading text	"Card One/Two/Three"
card[1-3]-description	Brief description text	"Add your content here."
card[1-3]-link	URL for the "Read more" link	Link hidden if not set
card[1-3]-link-text	Custom text for the link	"Read more"