Cards

This HTML snippet demonstrates a responsive grid of cards, suitable for displaying content such as articles or products:

<div class="row gap-2 justify-center">
    <div class="col-12-xs col-5-sm col-3-xl">
        <div class="card">
            <img
              src="https://storage.lib.hkbu.edu.hk/projects/bookplate/KATH-002.jpg"
              alt=""
            />
            <h3 class="card-title p-2">A Disappearing Art:</h3>
            <p class="card-body">Bookplates and Hong Kong</p>
        </div>
    </div>
    <div class="col-12-xs col-5-sm col-3-xl">
        <div class="card">
            <img
              src="https://storage.lib.hkbu.edu.hk/projects/bookplate/KATH-002.jpg"
              alt=""
            />
            <h3 class="card-title">Hello, ninjas</h3>
            <p class="card-body">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            </p>
        </div>
    </div>
    <div class="col-12-xs col-5-sm col-3-xl">
        <div class="card">
            <img
              src="https://storage.lib.hkbu.edu.hk/projects/bookplate/KATH-002.jpg"
              alt=""
            />
            <h3 class="card-title">Hello, ninjas</h3>
            <p class="card-body">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            </p>
        </div>
    </div>
    <div class="col-12-xs col-5-sm col-3-xl">
        <div class="card">
            <img
              src="https://storage.lib.hkbu.edu.hk/projects/bookplate/KATH-002.jpg"
              alt=""
            />
            <h3 class="card-title">Hello, ninjas</h3>
            <p class="card-body">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            </p>
        </div>
    </div>
</div>

Key Features

• Responsive Grid: Uses responsive classes (col-12-xs, col-5-sm, col-3-xl) to ensure cards adapt to various screen sizes.

• Card Layout: Each card includes an image, title (<h3>), and body content (<p>), making it suitable for presenting structured content.

• Alignment and Spacing: justify-center and gap-2 classes manage alignment and spacing between cards, ensuring a visually appealing layout.