HTML CSS Testimonial Card Horizontal

This horizontal testimonial card HTML CSS tutorial shows you how to build a split-layout review card with a full-bleed client photo on one side and a dark quote panel on the other. The card uses a large gold quote icon, an italic serif quote, and an author section with a short underline accent above the name and title.

Final output:

“

Working with this team completely changed how we think about product velocity. We shipped in six weeks what we estimated would take two quarters, without cutting a single corner on quality.

Sarah Okonkwo

Chief Product Officer, Pulsegrid

Steps for HTML CSS Testimonial Card Horizontal:

1. First, link the Inter and Instrument Serif fonts from Google Fonts in the head.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
    rel="stylesheet">

Let’s start with a .testimonial-card div. Inside it, add an .img-wrapper div with the client image, and a .testimonial-card-body div.

<div class="testimonial-card">
    <div class="img-wrapper">
        <img src="sarah-okonkwo.png" alt="">
    </div>
    <div class="testimonial-card-body"></div>
</div>

Then reset margins, define the Instrument Serif font as a CSS variable on :root, and set Inter as the font family. Style the card with a max-width, a dark background, and a warm cream text color. Use a two-column grid so the image takes up one third and the quote body takes up two thirds.

Set the overflow property to hidden so the image gradient doesn’t bleed outside the card corners. On very small screens, switch the display property to block so both sides stack vertically.

* {
    margin: 0;
    box-sizing: border-box;
}
:root {
    --heading-font: "Instrument Serif", serif;
}
body {
    font-family: "Inter", sans-serif;
}
.testimonial-card {
    max-width: 44rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    background-color: hsl(60, 4%, 10%);
    color: hsl(40, 21%, 89%);
    border-radius: .25rem;
    box-shadow: 0px 2px 2rem 0px hsla(0, 0%, 0%, 0.18);
    overflow: hidden;
}
@media screen and (max-width: 500px) {
    .testimonial-card {
        display: block;
    }
}

Output:

2. Style the .img-wrapper. Set the position property to relative so the gradient overlay can be placed inside it using absolute positioning. The ::after pseudo-element adds a dark gradient on the right edge of the image, since it fades from transparent to the same dark color as the card background. This creates a seamless blend between the image and the quote body next to it.

.testimonial-card .img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 600px) {
    .testimonial-card .img-wrapper {
        height: 25rem;
    }
}
.testimonial-card .img-wrapper::after {
    content: "";
    position: absolute;
    right: 0;
    width: 3rem;
    height: 100%;
    background: linear-gradient(90deg, rgba(26, 26, 24, 0) 0%, #1A1A18 100%);
}
.testimonial-card .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

Output:

3. Fill in .testimonial-card-body with the quotes icon, the blockquote, and a div with the client name and title.

<div class="testimonial-card-body">
    <span class="quotes-icon">"</span>
    <blockquote>Working with this team completely changed how we think about product velocity. We shipped in six weeks what we estimated would take two quarters, without cutting a single corner on quality.</blockquote>
    <div>
        <h3>Sarah Okonkwo</h3>
        <span>Chief Product Officer, Pulsegrid</span>
    </div>
</div>

Use clamp() on the padding so it scales with the screen size. Style the quotes icon with the Instrument Serif font at a large size and a warm gold color. Set the display property to block and the height property to 3rem so it takes up a fixed amount of space without the large line height pushing the blockquote too far down.

.testimonial-card .testimonial-card-body {
    padding: clamp(1.25rem, calc(1rem + 1.67vw), 2.5rem);
}
.testimonial-card .quotes-icon {
    font-family: var(--heading-font);
    font-size: 4.5rem;
    line-height: 1;
    color: hsl(39, 46%, 61%);
    display: block;
    height: 3rem;
}

Output:

“

Working with this team completely changed how we think about product velocity. We shipped in six weeks what we estimated would take two quarters, without cutting a single corner on quality.

Sarah Okonkwo

Chief Product Officer, Pulsegrid

4. Style the blockquote with the Instrument Serif font in italic. A generous line height and wide letter spacing make the quote feel open and easy to read. Then style the author div with some top margin and left padding to make room for the decorative gold line.

Set the position property to relative on the div so the ::after pseudo-element can be placed to the left of the text using absolute positioning.

.testimonial-card blockquote {
    margin-top: 1.25rem;
    font-family: var(--heading-font);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.7;
    letter-spacing: 1.25px;
}
.testimonial-card .testimonial-card-body div {
    margin-top: 2rem;
    position: relative;
    padding-left: 3rem;
}
.testimonial-card .testimonial-card-body div::after {
    content: "";
    position: absolute;
    left: 0;
    width: 2rem;
    height: 1px;
    background: hsl(39, 46%, 61%);
}

Style the name with a semi-bold weight and the title with a smaller muted color to create a clear visual hierarchy between the two.

.testimonial-card .testimonial-card-body div h3 {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.5;
    letter-spacing: 0.28px;
    margin-bottom: .125rem;
}
.testimonial-card .testimonial-card-body div span {
    font-size: .813rem;
    line-height: 1.4;
    letter-spacing: 0.13px;
    color: hsl(43, 8%, 44%);
}

Output:

“

Working with this team completely changed how we think about product velocity. We shipped in six weeks what we estimated would take two quarters, without cutting a single corner on quality.

Sarah Okonkwo

Chief Product Officer, Pulsegrid

Final Output Code for HTML CSS Testimonial Card Horizontal:

HTML

<div class="testimonial-card">
    <div class="img-wrapper">
        <img src="Sarah-Okonkwo.png" alt="">
    </div>
    <div class="testimonial-card-body">
        <span class="quotes-icon">“</span>
        <blockquote>Working with this team completely changed how we
            think about product velocity. We shipped in six
            weeks what we estimated would take two quarters,
            without cutting a single corner on quality.</blockquote>
        <div>
            <h3>Sarah Okonkwo</h3>
            <span>Chief Product Officer, Pulsegrid</span>
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    box-sizing: border-box;
}

:root {
    --heading-font: "Instrument Serif", serif;
}

body {
    font-family: "Inter", sans-serif;
}

.testimonial-card {
    max-width: 44rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    background-color: hsl(60, 4%, 10%);
    color: hsl(40, 21%, 89%);
    border-radius: .25rem;
    box-shadow: 0px 2px 2rem 0px hsla(0, 0%, 0%, 0.18);
    overflow: hidden;
}

@media screen and (max-width: 500px) {
    .testimonial-card {
        display: block;
    }
}

.testimonial-card .img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 600px) {
    .testimonial-card .img-wrapper {
        height: 25rem;
    }
}

.testimonial-card .img-wrapper::after {
    content: "";
    position: absolute;
    right: 0;
    width: 3rem;
    height: 100%;
    background: linear-gradient(90deg, rgba(26, 26, 24, 0) 0%, #1A1A18 100%);
}

.testimonial-card .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.testimonial-card .testimonial-card-body {
    padding: clamp(1.25rem, calc(1rem + 1.67vw), 2.5rem);
}

.testimonial-card .testimonial-card-body .quotes-icon {
    font-family: var(--heading-font);
    font-size: 4.5rem;
    line-height: 1;
    color: hsl(39, 46%, 61%);
    display: block;
    height: 3rem;
}

.testimonial-card .testimonial-card-body blockquote {
    margin-top: 1.25rem;
    font-family: var(--heading-font);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.7;
    letter-spacing: 1.25px;
}

.testimonial-card .testimonial-card-body div {
    margin-top: 2rem;
    position: relative;
    padding-left: 3rem;
}

.testimonial-card .testimonial-card-body div::after {
    content: "";
    position: absolute;
    left: 0;
    width: 2rem;
    height: 1px;
    background: hsl(39, 46%, 61%);
}

.testimonial-card .testimonial-card-body div h3 {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.5;
    letter-spacing: 0.28px;
    margin-bottom: .125rem;
}

.testimonial-card .testimonial-card-body div span {
    font-size: .813rem;
    line-height: 1.4;
    letter-spacing: 0.13px;
    color: hsl(43, 8%, 44%);
}

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.