Card Components
Grid Layout
Cats
Card Heading
Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.
Cats
Card Heading
Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.
Cats
Card Heading
Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.
Cats
Card Heading
Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.
Cats
Card Heading
Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.
Cats
Card Heading
Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.
Stacked Layout
Card Heading
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Card Heading
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Card Heading
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Actions on Right
Card Heading
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Card Heading
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Card Heading
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Demonstrating Container Queries
The Card components below are all set to use the card row (horizontal) layout, but the responsive styles are adjusting based on where each card is rendered.
Responsive styles based on container queries are updated based on the width of an element's parent container. They are not adjusted based on the width of the viewport. For example, the components in the narrow mimiced "sidebar" are rendered using a column (stacked) layout, while the components in the wider "main content" area are rendered using the expected row (horizontal) layout. The components know to do this because styles set using container queries look at the width of the parent container and not at the width of the viewport.
Sidebar
Card Heading
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Sidebar
Card Heading
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Main content
Card Heading
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Main content
Card Heading
Maecenas sed diam eget risus varius blandit sit amet non magna.
Using a Custom Image Component
The Card component examples below are ingesting a custom image component that utilizes the Next.js Image component as a base.
Card Heading
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Card Heading
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Card Heading
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cats
Card Heading
Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.
Cats
Card Heading
Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.
Cats
Card Heading
Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.
