<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="timber-acoustic-card" aria-label="Timber Acoustic Panels" itemscope itemtype="https://schema.org/Product" style="max-width:720px;margin:0 auto;font-family:system-ui,Arial,sans-serif;">
<style>
.timber-acoustic-card { background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.06);overflow:hidden;border:1px solid #eef2f7; }
.tac-grid { display:flex;flex-wrap:wrap;gap:18px;padding:18px;align-items:center; }
.tac-media { flex:0 0 220px; }
.tac-media img { width:220px;height:140px;object-fit:cover;border-radius:8px;display:block; }
.tac-body { flex:1 1 360px; min-width:220px; }
.tac-title { margin:0 0 6px;font-size:1.15rem;color:#0f172a;line-height:1.25; }
.tac-desc { margin:0 0 12px;color:#6b7280;font-size:.95rem; }
.tac-features { display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px; }
.tac-pill { background:#f3faf6;color:#0f3b29;padding:6px 9px;border-radius:999px;font-size:.85rem;border:1px solid rgba(15,59,41,.06); }
.tac-cta { display:inline-block;padding:10px 14px;background:#2a6f4e;color:#fff;border-radius:8px;text-decoration:none;font-weight:600;font-size:.95rem;box-shadow:0 6px 14px rgba(42,111,78,.14); }
.tac-meta { margin-top:10px;font-size:.87rem;color:#94a3b8; }
@media (max-width:560px){ .tac-grid{flex-direction:column;align-items:stretch} .tac-media{flex:0 0 auto;margin:0 auto} .tac-media img{width:100%;height:180px} }
</style>
<div class="tac-grid">
<div class="tac-media">
<img src="https://via.placeholder.com/880x560.png?text=Timber+Acoustic+Panels" alt="Timber Acoustic Panels in meeting room" itemprop="image">
</div>
<div class="tac-body">
<h3 class="tac-title" itemprop="name">Timber Acoustic Panels — Natural Warmth & Superior Acoustics</h3>
<p class="tac-desc" itemprop="description">
Engineered timber wall and ceiling panels with perforated/slatted faces and acoustic backing to reduce echo, improve speech clarity, and add elegant timber finishes to interiors.
</p>
<div class="tac-features" aria-hidden="true">
<span class="tac-pill">NRC 0.55–0.90</span>
<span class="tac-pill">Oak • Walnut • Ash</span>
<span class="tac-pill">FSC options</span>
</div>
<a class="tac-cta" href="#contact" role="button" aria-label="Request quote for Timber Acoustic Panels">Request a Quote</a>
<div class="tac-meta">
<small>Typical use: Offices • Auditoriums • Hospitality • Residential</small>
</div>
<!-- Lightweight JSON-LD product snippet -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Timber Acoustic Panels",
"image": "https://via.placeholder.com/880x560.png?text=Timber+Acoustic+Panels",
"description": "Perforated or slatted timber panels with acoustic backing, suitable for walls and ceilings to reduce reverberation and improve speech clarity.",
"brand": { "@type": "Brand", "name": "Your Brand" },
"material": "Veneer/MDF, Solid Timber, PET or Mineral Fiber core",
"offers": {
"@type": "Offer",
"url": "#contact",
"availability": "https://schema.org/InStock"
}
}
</script>
</div>
</div>
</section>
If you want, I can:
Replace the placeholder image URL with your product image.
Change brand colors or CTA link.
Expand this into a richer hero block (ratings, price, downloadable spec sheet). Which would you like?
<section class="timber-acoustic-card" aria-label="Timber Acoustic Panels" itemscope itemtype="https://schema.org/Product" style="max-width:720px;margin:0 auto;font-family:system-ui,Arial,sans-serif;">
<style>
.timber-acoustic-card { background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.06);overflow:hidden;border:1px solid #eef2f7; }
.tac-grid { display:flex;flex-wrap:wrap;gap:18px;padding:18px;align-items:center; }
.tac-media { flex:0 0 220px; }
.tac-media img { width:220px;height:140px;object-fit:cover;border-radius:8px;display:block; }
.tac-body { flex:1 1 360px; min-width:220px; }
.tac-title { margin:0 0 6px;font-size:1.15rem;color:#0f172a;line-height:1.25; }
.tac-desc { margin:0 0 12px;color:#6b7280;font-size:.95rem; }
.tac-features { display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px; }
.tac-pill { background:#f3faf6;color:#0f3b29;padding:6px 9px;border-radius:999px;font-size:.85rem;border:1px solid rgba(15,59,41,.06); }
.tac-cta { display:inline-block;padding:10px 14px;background:#2a6f4e;color:#fff;border-radius:8px;text-decoration:none;font-weight:600;font-size:.95rem;box-shadow:0 6px 14px rgba(42,111,78,.14); }
.tac-meta { margin-top:10px;font-size:.87rem;color:#94a3b8; }
@media (max-width:560px){ .tac-grid{flex-direction:column;align-items:stretch} .tac-media{flex:0 0 auto;margin:0 auto} .tac-media img{width:100%;height:180px} }
</style>
<div class="tac-grid">
<div class="tac-media">
<img src="https://via.placeholder.com/880x560.png?text=Timber+Acoustic+Panels" alt="Timber Acoustic Panels in meeting room" itemprop="image">
</div>
<div class="tac-body">
<h3 class="tac-title" itemprop="name">Timber Acoustic Panels — Natural Warmth & Superior Acoustics</h3>
<p class="tac-desc" itemprop="description">
Engineered timber wall and ceiling panels with perforated/slatted faces and acoustic backing to reduce echo, improve speech clarity, and add elegant timber finishes to interiors.
</p>
<div class="tac-features" aria-hidden="true">
<span class="tac-pill">NRC 0.55–0.90</span>
<span class="tac-pill">Oak • Walnut • Ash</span>
<span class="tac-pill">FSC options</span>
</div>
<a class="tac-cta" href="#contact" role="button" aria-label="Request quote for Timber Acoustic Panels">Request a Quote</a>
<div class="tac-meta">
<small>Typical use: Offices • Auditoriums • Hospitality • Residential</small>
</div>
<!-- Lightweight JSON-LD product snippet -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Timber Acoustic Panels",
"image": "https://via.placeholder.com/880x560.png?text=Timber+Acoustic+Panels",
"description": "Perforated or slatted timber panels with acoustic backing, suitable for walls and ceilings to reduce reverberation and improve speech clarity.",
"brand": { "@type": "Brand", "name": "Your Brand" },
"material": "Veneer/MDF, Solid Timber, PET or Mineral Fiber core",
"offers": {
"@type": "Offer",
"url": "#contact",
"availability": "https://schema.org/InStock"
}
}
</script>
</div>
</div>
</section>
If you want, I can:
Replace the placeholder image URL with your product image.
Change brand colors or CTA link.
Expand this into a richer hero block (ratings, price, downloadable spec sheet). Which would you like?
