Hotel/Accommodation Card

Display hotel, rental, or accommodation listings in an attractive and information-rich format with this specialized card.

This component is designed for travel and booking websites. It effectively balances a large hero image with vital booking information, including rating, location, key amenities, and nightly price.

Screenshot of a card for a hotel listing with a large photo and booking details.

Get Source Code Preview

About this Component

The hotel card is designed to provide users with all the main information they need to make a booking decision without feeling overwhelmed. It uses a clear visual hierarchy, grouping related information together. An interactive "wishlist" button is included for users who want to save a property for later consideration.

Features

Information-Dense Layout: The design efficiently presents a star rating, location, name, amenities, and price in a clean, multi-section format.
Interactive Wishlist Button: An icon button is overlaid on the main image, providing an intuitive way for users to "favorite" a listing.
Clear Call-to-Action: The footer combines a bold price display with a prominent "View Deal" button to drive user engagement.
Flexible Layout: The main content area uses Flexbox to ensure the price and CTA footer is always aligned neatly at the bottom of the card.

Code Breakdown

HTML Structure

The card is built as an article. The top half is the image container, which holds both the main image and the wishlist button. The bottom half, the div with class .hotel-card-content, is a flex container for the textual details. Inside, the content is semantically structured with a header for the rating and location, a link-wrapped h3 for the hotel name, and a footer for the price and CTA button.

CSS Styling

The overall card is a flex container with flex-direction: column. Inside the content section, margin-top: auto is applied to the footer. This pushes the footer to the bottom of the available space, ensuring the price and "View Deal" button are always aligned horizontally across all cards in a grid, regardless of the amount of content above them. The wishlist button is positioned over the image using position: absolute, with its parent container set to position: relative.

Code

Here's the complete, self-contained code. It's ready to be populated with your property listings.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f9fafb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* === Grid Container for the Cards === */
.cards-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* === Hotel Card Styles === */
.hotel-card {
    --hotel-radius: 12px;
    --hotel-shadow: 0 4px 10px rgba(0,0,0,0.06);

background-color: #ffffff;
    border-radius: var(--hotel-radius);
    box-shadow: var(--hotel-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.hotel-card:hover .hotel-card-image {
    transform: scale(1.05);
}

.hotel-card-image-container {
    position: relative;
    overflow: hidden;
}
.hotel-card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
/* Wishlist heart button */
.hotel-wishlist-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #374151;
}
.hotel-wishlist-btn:hover { color: #ef4444; }
.hotel-wishlist-btn svg { width: 20px; height: 20px; }

.hotel-card-content {
    padding: 1rem 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
/* Top line: stars and location */
.hotel-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.hotel-rating { display: flex; gap: 0.125rem; color: #f59e0b; }
.hotel-rating svg { width: 16px; height: 16px; }

.hotel-location { font-size: 0.875rem; color: #6b7280; }

.hotel-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}
.hotel-card-title-link {
    text-decoration: none;
    color: inherit;
}
.hotel-card-title-link:hover { text-decoration: underline; }

/* Amenities list */
.hotel-amenities {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: #4b5563;
    flex-wrap: wrap;
    margin: 0;
}
.hotel-amenities span { display: flex; align-items: center; gap: 0.35rem; }
.hotel-amenities svg { width: 16px; height: 16px; }

/* Footer with price and CTA */
.hotel-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Pushes footer down */
    padding-top: 1rem;
}
.hotel-price .price-amount {
    font-size: 1.375rem;
    font-weight: 700;
}
.hotel-price .price-period {
    font-size: 0.875rem;
    color: #6b7280;
}

.hotel-cta {
    background-color: #1f2937;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.hotel-cta:hover { background-color: #374151; }

</style>

<div class="cards-grid-container">

<article class="hotel-card">
        <div class="hotel-card-image-container">
            
            <img class="hotel-card-image" src="https://placehold.co/600x440/a78bfa/ffffff/png?text=Hotel+A" alt="Lobby of the Serenity Grand Hotel.">
            <button class="hotel-wishlist-btn" aria-label="Add to wishlist">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M1.24264 8.24264L8 15L14.7574 8.24264C15.553 7.44699 16 6.36786 16 5.24264V5.05234C16 2.8143 14.1857 1 11.9477 1C10.7166 1 9.55233 1.55959 8.78331 2.52086L8 3.5L7.21669 2.52086C6.44767 1.55959 5.28338 1 4.05234 1C1.8143 1 0 2.8143 0 5.05234V5.24264C0 6.36786 0.44699 7.44699 1.24264 8.24264Z"></path></svg>                 
            </button>
        </div>
        <div class="hotel-card-content">
            <header class="hotel-card-header">
                <div class="hotel-rating" title="4 out of 5 stars">
                     <span class="visually-hidden">Rating: 4 out of 5 stars</span>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 1.75a.75.75 0 01.692.462l1.41 3.393 3.663.416a.75.75 0 01.43 1.298l-2.72 2.457 1.056 3.734a.75.75 0 01-1.14.828L8 12.193l-3.192 1.954a.75.75 0 01-1.14-.828l1.056-3.734-2.72-2.457a.75.75 0 01.43-1.298l3.663-.416L7.308 2.212A.75.75 0 018 1.75z" clip-rule="evenodd"/></svg>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 1.75a.75.75 0 01.692.462l1.41 3.393 3.663.416a.75.75 0 01.43 1.298l-2.72 2.457 1.056 3.734a.75.75 0 01-1.14.828L8 12.193l-3.192 1.954a.75.75 0 01-1.14-.828l1.056-3.734-2.72-2.457a.75.75 0 01.43-1.298l3.663-.416L7.308 2.212A.75.75 0 018 1.75z" clip-rule="evenodd"/></svg>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 1.75a.75.75 0 01.692.462l1.41 3.393 3.663.416a.75.75 0 01.43 1.298l-2.72 2.457 1.056 3.734a.75.75 0 01-1.14.828L8 12.193l-3.192 1.954a.75.75 0 01-1.14-.828l1.056-3.734-2.72-2.457a.75.75 0 01.43-1.298l3.663-.416L7.308 2.212A.75.75 0 018 1.75z" clip-rule="evenodd"/></svg>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 1.75a.75.75 0 01.692.462l1.41 3.393 3.663.416a.75.75 0 01.43 1.298l-2.72 2.457 1.056 3.734a.75.75 0 01-1.14.828L8 12.193l-3.192 1.954a.75.75 0 01-1.14-.828l1.056-3.734-2.72-2.457a.75.75 0 01.43-1.298l3.663-.416L7.308 2.212A.75.75 0 018 1.75z" clip-rule="evenodd"/></svg>
                </div>
                <div class="hotel-location">Kyoto, Japan</div>
            </header>
            <a href="#" class="hotel-card-title-link">
                <h3 class="hotel-card-title">Serenity Grand Hotel</h3>
            </a>
            <div class="hotel-amenities">
                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M30.9,24.7c-0.2-0.5-0.7-0.8-1.3-0.6l-2.6,0.9c-2.7,0.9-5.7,0.6-8.2-0.6l0.2-0.2c1.7-1.7,1.7-4.5,0-6.2c0,0,0,0,0,0 l-7.5-7.5C10.2,9,7.8,9,6.4,10.4L2,14.8c-0.3,0.3-0.5,0.7-0.5,1.2s0.2,0.9,0.5,1.2c0.6,0.6,1.5,0.7,2.1,0.2L9,14.2l2.8,2.8 l-2.6,2.6c-1.6-0.1-3.3,0.1-4.9,0.6l-2.6,0.9c-0.5,0.2-0.8,0.7-0.6,1.3c0.2,0.5,0.7,0.8,1.3,0.6l2.6-0.9c3.6-1.2,7.6-0.4,10.4,2.2 c2.3,2.1,5.3,3.2,8.4,3.2c1.3,0,2.7-0.2,4-0.6l2.6-0.9C30.8,25.8,31.1,25.2,30.9,24.7z"></path> <path d="M23,17c2.8,0,5-2.2,5-5s-2.2-5-5-5s-5,2.2-5,5S20.2,17,23,17z"></path></svg>Pool</span>
                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -32 576 576" fill="currentColor"><path d="M568.25 192c-29.04.13-135.01 6.16-213.84 83-33.12 29.63-53.36 63.3-66.41 94.86-13.05-31.56-33.29-65.23-66.41-94.86-78.83-76.84-184.8-82.87-213.84-83-4.41-.02-7.79 3.4-7.75 7.82.23 27.92 7.14 126.14 88.77 199.3C172.79 480.94 256 480 288 480s115.19.95 199.23-80.88c81.64-73.17 88.54-171.38 88.77-199.3.04-4.42-3.34-7.84-7.75-7.82zM287.98 302.6c12.82-18.85 27.6-35.78 44.09-50.52 19.09-18.61 39.58-33.3 60.26-45.18-16.44-70.5-51.72-133.05-96.73-172.22-4.11-3.58-11.02-3.58-15.14 0-44.99 39.14-80.27 101.63-96.74 172.07 20.37 11.7 40.5 26.14 59.22 44.39a282.768 282.768 0 0 1 45.04 51.46z"></path></svg>Spa</span>
                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M24,13.5V10c0-4.4-3.6-8-8-8s-8,3.6-8,8v3.5c-1.9,2-3,4.6-3,7.5c0,3.5,1.6,6.7,4.4,8.8C9.6,29.9,9.8,30,10,30h12 c0.2,0,0.4-0.1,0.6-0.2c2.8-2.1,4.4-5.3,4.4-8.8C27,18.1,25.9,15.4,24,13.5z M10,11.8V10c0-3.3,2.7-6,6-6s6,2.7,6,6v1.8 c-1.7-1.1-3.8-1.8-6-1.8S11.7,10.7,10,11.8z M22,20.1c-0.1,0-0.2,0-0.3,0c-0.4,0-0.8-0.3-1-0.7c-0.3-1.1-1.1-2-2-2.6 c-0.5-0.3-0.6-0.9-0.3-1.4c0.3-0.5,0.9-0.6,1.4-0.3c1.3,0.9,2.3,2.2,2.8,3.7C22.8,19.4,22.5,19.9,22,20.1z"></path></svg>Gym</span>
            </div>            
            <div class="hotel-card-footer">
                <div class="hotel-price">
                    <span class="price-amount">$450</span>
                    <span class="price-period">/ night</span>
                </div>
                <a href="#" class="hotel-cta">View Deal</a>
            </div>
        </div>
    </article>
</div>

View Output