Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

View the official docs here

If displaying multiple cards, the code can be simplified by creating a card component. Add the data to an array of objects, and iterating over it e.g.

Product image
Product 1

Body text for product

href && Read more
Product image
Product 2

Body text for product

href && Read more
Product image
Product 3

Body text for product

href && Read more
Astro file 
---
import Card from './Card.astro';
import type { Props as CardType } from './Card.astro';
const cards: CardType[] = [
  {
    img: '/img/placeholder1.jpg',
    alt: 'Product image',
    title: 'Product 1',
    text: 'Body text for product',
    href: 'http://google.com',
    linkText: 'Read more',
  },
  {
    img: '/img/placeholder1.jpg',
    alt: 'Product image',
    title: 'Product 2',
    text: 'Body text for product',
    href: 'http://google.com',
    linkText: 'Read more',
  },
  {
    img: '/img/placeholder1.jpg',
    alt: 'Product image',
    title: 'Product 3',
    text: 'Body text for product',
    href: 'http://google.com',
    linkText: 'Read more',
  },
];
---

<div class="container">
  <div class="row row-cols-1 row-cols-md-3">
    {
      cards.map((card) => (
        <div class="col">
          <Card {...card} />
        </div>
      ))
    }
  </div>
</div>

Card.astro

Astro file 
---
const {img, alt, title, text, href, linkText} = Astro.props;
export interface Props {
  img: string;
  alt: string;
  title: string;
  text: string;
  href?: string;
  linkText?: string;
}
---
<div class="card" style="width: 18rem;">
  <img src={img} class="card-img-top img-fluid" alt={alt}>
  <div class="card-body">
    <h5 class="card-title">{title}</h5>
    <p class="card-text">{text}</p>
    href && <a href={href} class="btn btn-primary">{linkText}</a>
  </div>
</div>