Horizontal Card

A set of three Bootstrap 5 horizontal cards with the image on the left and content on the right: a blog article card, a listing card with rating, features and price, and a compact course card with a progress bar. Use them in blog indexes, search results, booking sites and learning dashboards.

How it works

The cards sit in .hc-list, a one-column grid limited to 920px. Each article.card.hc-card uses a Bootstrap row g-0: the image column (col-md-5 col-lg-4) contains .hc-media, and the content column contains .hc-body, a flex column that pushes .hc-meta or .hc-footer to the bottom. On phones the columns stack and the image keeps a fixed ratio from --hc-img-ratio. From the md breakpoint the image is positioned absolutely and covers the whole column with object-fit: cover, so it always matches the height of the text.

The article card and the compact card use Bootstrap's stretched-link on the title, so the whole card is clickable. The .hc-card--listing variant has a real button instead, a .hc-badge over the photo, a .hc-rating line and .hc-features pills. The .hc-card--compact variant keeps a small square thumbnail next to the text even on phones. Hovering a card lifts it, deepens the shadow and zooms the image slightly. A small script reads aria-valuenow from each progress bar in .hc-progress, sets the width of .hc-progress__bar and fills .hc-progress__value, so the value is defined in one place.

Customization

--hc-accent and --hc-accent-hover in .hc-list: change the kicker, link hover, avatar, button, focus outline and progress color.
--hc-img-ratio in .hc-list: set the image ratio of stacked cards on phones, e.g. 4 / 3 or 1 / 1.
--hc-radius in .hc-list: make the corners rounder or set 0.5rem for a sharper look.
--hc-thumb in .hc-list (phones) and in the .hc-card--compact rule inside the min-width: 576px media query (larger screens): resize the square thumbnail of the compact card.
col-md-5 col-lg-4 on the image column and col-md-7 col-lg-8 on the text column: use col-md-4 and col-md-8 for a narrower image on tablets.
aria-valuenow="58" on the progress bar: set the course progress; the bar and percentage update on load.
background: #e2e8f0 in .hc-media: change the placeholder color shown while images load.

Accessibility

Each card is an article with a heading. Thumbnails that only repeat the title use an empty alt, while the listing photo has descriptive alt text. When a stretched link receives keyboard focus, :has(.stretched-link:focus-visible) draws an outline around the whole card. The rating includes visually hidden "out of 5" text, the date uses a time element, and the progress bar has role="progressbar" with aria-label and value attributes. Icons and initials are aria-hidden. Hover lift and image zoom are disabled with prefers-reduced-motion: reduce.