High Fashion
Bodoni Moda editorial serif, marquee season ticker, ghost watermark numbers, 5-dot rating instead of stars, seam-line borders, alternating dark/warm/white cells, minimal Montserrat body text. Use case: luxury fashion house.
High Fashion the 11th of 15 designs in the 15 CSS Testimonials & Reviews collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<section class="tm-fas" aria-label="Client archive">
<header class="tm-fas-season-bar">
<div class="tm-fas-sb-brand">Maison Noir · Client Archive</div>
<div class="tm-fas-sb-meta">Est. MMXII · 8,400 Patrons</div>
</header>
<div class="tm-fas-top-row">
<article class="tm-fas-cell tm-fas-dark">
<div class="tm-fas-coll-label">A/W Collection · Maison</div>
<blockquote class="tm-fas-bq">"I wore the coat to the opening and three people asked me who designed it before I even reached the bar. <em>That is the effect.</em>"</blockquote>
<span class="tm-fas-deco-num" aria-hidden="true">01</span>
<figcaption class="tm-fas-author-area">
<div><cite class="tm-fas-an">Isabella Fontaine</cite><span class="tm-fas-ar">Paris · 12-year patron</span></div>
<div class="tm-fas-dots" aria-label="5 out of 5">
<span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
</div>
</figcaption>
</article>
<article class="tm-fas-cell">
<div class="tm-fas-coll-label">S/S Collection · Resort</div>
<blockquote class="tm-fas-bq">"The tailoring is so precise it feels <em>custom</em>, even off the rack. I've stopped buying anything else."</blockquote>
<span class="tm-fas-deco-num" aria-hidden="true">02</span>
<figcaption class="tm-fas-author-area">
<div><cite class="tm-fas-an">Mireille Auclair</cite><span class="tm-fas-ar">Montréal · Stylist</span></div>
<div class="tm-fas-dots" aria-label="5 out of 5">
<span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
</div>
</figcaption>
</article>
</div>
<div class="tm-fas-mid-row">
<article class="tm-fas-cell tm-fas-warm">
<div class="tm-fas-coll-label">Accessories</div>
<blockquote class="tm-fas-sq">"The bag is three seasons old and strangers still stop me to ask about it. <em>Timeless</em> is an overused word. Here it's accurate."</blockquote>
<span class="tm-fas-deco-num" aria-hidden="true">03</span>
<figcaption class="tm-fas-author-area">
<div><cite class="tm-fas-an">Yuki Tanaka</cite><span class="tm-fas-ar">Tokyo · Editor</span></div>
<div class="tm-fas-dots" aria-label="5 out of 5">
<span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
</div>
</figcaption>
</article>
<article class="tm-fas-cell">
<div class="tm-fas-coll-label">Ready-to-wear</div>
<blockquote class="tm-fas-sq">"Every single piece I've bought has survived five seasons of heavy wear without losing its shape. <em>Engineering dressed as fashion.</em>"</blockquote>
<span class="tm-fas-deco-num" aria-hidden="true">04</span>
<figcaption class="tm-fas-author-area">
<div><cite class="tm-fas-an">Dominique Peres</cite><span class="tm-fas-ar">São Paulo · Architect</span></div>
<div class="tm-fas-dots" aria-label="5 out of 5">
<span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
</div>
</figcaption>
</article>
<article class="tm-fas-cell tm-fas-dark">
<div class="tm-fas-coll-label">Bespoke</div>
<blockquote class="tm-fas-sq">"Three fittings, infinite patience. The result was a suit <em>nothing else in my wardrobe could compete with.</em>"</blockquote>
<span class="tm-fas-deco-num" aria-hidden="true">05</span>
<figcaption class="tm-fas-author-area">
<div><cite class="tm-fas-an">Raj Mehra</cite><span class="tm-fas-ar">London · Barrister</span></div>
<div class="tm-fas-dots" aria-label="5 out of 5">
<span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
</div>
</figcaption>
</article>
</div>
<div class="tm-fas-bot-row">
<article class="tm-fas-cell tm-fas-feat">
<div class="tm-fas-coll-label">Couture · Featured</div>
<blockquote class="tm-fas-bq">"I've dressed from the top maisons for thirty years. What separates <em>Maison Noir</em> is that every garment has a point of view — and the confidence not to explain it."</blockquote>
<figcaption class="tm-fas-author-area">
<div><cite class="tm-fas-an">Countess Vera Ostrovsky</cite><span class="tm-fas-ar">Moscow · Geneva · 30-year patron</span></div>
<div class="tm-fas-dots" aria-label="5 out of 5">
<span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
</div>
</figcaption>
</article>
<div class="tm-fas-score-panel">
<div class="tm-fas-sp-num">9.9</div>
<div class="tm-fas-sp-sub">Patron score</div>
<span class="tm-fas-sp-line" aria-hidden="true"></span>
<div class="tm-fas-sp-count">8,400 verified patrons</div>
</div>
</div>
</section> /* High Fashion — Bodoni Moda editorial. The season-bar ticker uses
::after marquee animation to scroll season tags behind the brand
name. Ghost watermark numbers (01-05) sit at 4% opacity bottom-right.
Five-dot rating system replaces stars for editorial restraint. */
.tm-fas {
--tm-fas-white: #fafafa;
--tm-fas-black: #0a0a0a;
--tm-fas-warm: #f5f2ee;
--tm-fas-offblack: #1a1a1a;
--tm-fas-gray: #888;
--tm-fas-lgray: #d8d5d0;
--tm-fas-text: #1a1a1a;
background: var(--tm-fas-white);
font-family: 'Montserrat', system-ui, sans-serif;
color: var(--tm-fas-text);
min-height: 520px;
overflow: hidden;
}
.tm-fas-season-bar {
background: var(--tm-fas-black);
color: rgba(255,255,255,0.5);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px clamp(20px, 4vw, 48px);
overflow: hidden;
position: relative;
}
.tm-fas-season-bar::after {
content: 'S/S 25 A/W 25 S/S 25 A/W 25 S/S 25 A/W 25 S/S 25 A/W 25 S/S 25 A/W 25';
position: absolute;
font-family: 'Montserrat', system-ui, sans-serif;
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255,255,255,0.12);
white-space: nowrap;
width: 200%;
animation: tm-fas-ticker 14s linear infinite;
}
@keyframes tm-fas-ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.tm-fas-sb-brand {
font-family: 'Bodoni Moda', 'Didot', serif;
font-size: 14px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
position: relative;
z-index: 1;
}
.tm-fas-sb-meta {
font-size: 9px;
letter-spacing: 0.25em;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.tm-fas-top-row {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 280px;
}
.tm-fas-mid-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-top: 1px solid var(--tm-fas-lgray);
}
.tm-fas-bot-row {
display: grid;
grid-template-columns: 2fr 1fr;
border-top: 1px solid var(--tm-fas-lgray);
}
.tm-fas-cell {
padding: clamp(28px, 4vw, 44px);
border-right: 1px solid var(--tm-fas-lgray);
position: relative;
overflow: hidden;
transition: background 0.4s;
display: flex;
flex-direction: column;
}
.tm-fas-cell:last-child { border-right: none; }
.tm-fas-dark { background: var(--tm-fas-black); }
.tm-fas-warm { background: var(--tm-fas-warm); }
.tm-fas-cell:not(.tm-fas-dark):hover { background: var(--tm-fas-warm); }
.tm-fas-dark:hover { background: #111; }
.tm-fas-bq {
font-family: 'Bodoni Moda', 'Didot', serif;
font-style: italic;
font-size: clamp(1.3rem, 2vw, 1.7rem);
line-height: 1.35;
color: var(--tm-fas-text);
margin: 0;
flex: 1;
}
.tm-fas-bq em { font-style: normal; font-weight: 700; }
.tm-fas-dark .tm-fas-bq { color: rgba(250,250,250,0.9); }
.tm-fas-dark .tm-fas-bq em { color: rgba(250,250,250,0.5); }
.tm-fas-sq {
font-family: 'Bodoni Moda', 'Didot', serif;
font-style: italic;
font-size: 1rem;
line-height: 1.5;
color: var(--tm-fas-text);
margin: 0;
flex: 1;
}
.tm-fas-sq em { font-style: normal; font-weight: 700; }
.tm-fas-dark .tm-fas-sq { color: rgba(250,250,250,0.85); }
.tm-fas-deco-num {
font-family: 'Bodoni Moda', 'Didot', serif;
font-size: 6.5rem;
font-weight: 700;
color: var(--tm-fas-text);
opacity: 0.04;
position: absolute;
bottom: -10px;
right: 20px;
line-height: 1;
pointer-events: none;
user-select: none;
}
.tm-fas-dark .tm-fas-deco-num { color: #fff; opacity: 0.05; }
.tm-fas-author-area {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 28px;
position: relative;
z-index: 1;
}
.tm-fas-an {
font-family: 'Montserrat', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
font-style: normal;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tm-fas-text);
line-height: 1.4;
display: block;
}
.tm-fas-dark .tm-fas-an { color: rgba(250,250,250,0.8); }
.tm-fas-ar {
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tm-fas-gray);
margin-top: 4px;
font-weight: 300;
display: block;
}
.tm-fas-dark .tm-fas-ar { color: rgba(250,250,250,0.3); }
.tm-fas-dots {
display: flex;
gap: 5px;
}
.tm-fas-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--tm-fas-text);
}
.tm-fas-dark .tm-fas-dot { background: rgba(250,250,250,0.6); }
.tm-fas-coll-label {
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--tm-fas-gray);
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 10px;
}
.tm-fas-coll-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--tm-fas-lgray);
}
.tm-fas-dark .tm-fas-coll-label { color: rgba(250,250,250,0.3); }
.tm-fas-dark .tm-fas-coll-label::after { background: rgba(255,255,255,0.08); }
.tm-fas-feat .tm-fas-bq { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.tm-fas-score-panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 32px 24px;
background: var(--tm-fas-black);
text-align: center;
}
.tm-fas-sp-num {
font-family: 'Bodoni Moda', 'Didot', serif;
font-size: 3.8rem;
font-weight: 400;
color: rgba(250,250,250,0.9);
line-height: 1;
}
.tm-fas-sp-sub {
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(250,250,250,0.3);
margin-top: 8px;
}
.tm-fas-sp-line {
display: block;
width: 40px;
height: 1px;
background: rgba(250,250,250,0.15);
margin: 18px auto;
}
.tm-fas-sp-count {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(250,250,250,0.4);
}
@media (max-width: 820px) {
.tm-fas-top-row,
.tm-fas-mid-row,
.tm-fas-bot-row { grid-template-columns: 1fr; }
.tm-fas-cell { border-right: none; border-bottom: 1px solid var(--tm-fas-lgray); }
.tm-fas-deco-num { font-size: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
.tm-fas-season-bar::after { animation: none; }
}