×

HubSpot Guide to Coupon CSS

/ CRM, Hubspot / By

HubSpot Guide to Coupon CSS Design

Building attractive, high-converting coupon designs with CSS is easier when you follow a structured, Hubspot-inspired approach. In this guide, you will learn how to create a reusable coupon component, style it with modern CSS, and optimize it for marketing performance.

This tutorial is based on the techniques demonstrated in the original article at HubSpot’s coupon CSS guide, adapted into a step-by-step, practical workflow.

Why Use a HubSpot-Style Coupon Layout?

Coupon components are powerful for promotions, lead generation, and ecommerce sales. A clean layout, inspired by HubSpot design principles, offers:

  • Clear hierarchy for offer, code, and expiry
  • Scannable information on any screen size
  • Easy reusability across multiple pages
  • Consistent branding for all marketing campaigns

By standardizing your HTML and CSS, you can plug this coupon component into any CMS, including systems that integrate with HubSpot.

HTML Structure for a HubSpot Coupon Block

Start by creating semantic, minimal markup. The goal is a container that is easy to target with CSS and flexible enough to reuse.

<div class="coupon">
  <div class="coupon-header">
    <span class="coupon-brand">Your Brand</span>
    <span class="coupon-tag">Limited Time</span>
  </div>

  <div class="coupon-body">
    <h2 class="coupon-title">25% Off All Plans</h2>
    <p class="coupon-description">Save on your next purchase when you apply this code at checkout.</p>
  </div>

  <div class="coupon-footer">
    <div class="coupon-code-wrapper">
      <span class="coupon-label">Use code</span>
      <span class="coupon-code">SAVE25</span>
    </div>
    <span class="coupon-expiry">Expires: 30 June 2026</span>
  </div>
</div>

This structure separates the coupon header, body, and footer, mirroring the section-based layouts often seen in HubSpot templates.

Core CSS for a HubSpot Coupon Look

Next, add base styling to make the coupon stand out while remaining clean and professional.

.coupon {
  max-width: 420px;
  border: 2px dashed #d0d4dc;
  border-radius: 12px;
  padding: 1.5rem;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.coupon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.coupon-brand {
  font-weight: 700;
  color: #111827;
}

.coupon-tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
}

.coupon-title {
  margin: 0 0 0.35rem;
  font-size: 1.5rem;
  color: #111827;
}

.coupon-description {
  margin: 0;
  font-size: 0.95rem;
  color: #4b5563;
}

.coupon-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.coupon-code-wrapper {
  display: flex;
  flex-direction: column;
}

.coupon-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}

.coupon-code {
  margin-top: 0.15rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: #111827;
  color: #f9fafb;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.coupon-expiry {
  font-size: 0.8rem;
  color: #6b7280;
  text-align: right;
}

This styling produces a crisp coupon card similar to many promotional elements seen in HubSpot-powered landing pages.

Responsive Enhancements with a HubSpot Mindset

Modern marketing pages must work on mobile first. Use media queries to optimize your coupon component.

@media (max-width: 480px) {
  .coupon {
    padding: 1.25rem;
  }

  .coupon-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .coupon-expiry {
    text-align: left;
  }
}

This mirrors the responsive thinking common in HubSpot drag-and-drop layouts, ensuring the coupon remains readable and tappable on small screens.

Step-by-Step: Building Your Coupon the HubSpot Way

  1. Plan the content
    • Decide on discount, code, expiry, and legal text.
    • Align the coupon language with your brand tone.
  2. Set up the HTML
    • Copy the base structure into your page template.
    • Use descriptive class names for easier maintenance.
  3. Apply base CSS
    • Define colors, border style, and typography.
    • Match your brand’s palette or your HubSpot theme.
  4. Test responsiveness
    • Preview on mobile, tablet, and desktop.
    • Adjust spacing and font sizes if any content wraps awkwardly.
  5. Reuse for other campaigns
    • Only change the text and code.
    • Keep the structural CSS consistent for brand recognition.

Advanced Styling Ideas from HubSpot-Inspired UI

Once the basic version works, you can extend the coupon to behave like a more dynamic marketing component.

HubSpot Style Hover and Focus States

Add subtle interaction for better user engagement and accessibility.

.coupon {
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.coupon:hover,
.coupon:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.coupon-code {
  cursor: pointer;
}

.coupon-code:focus,
.coupon-code:hover {
  background: #1f2937;
}

These micro-interactions mimic polished components frequently used in HubSpot landing pages and email modules.

Adding a HubSpot-Style Ribbon or Badge

Highlight your offer using a corner ribbon, ideal for limited-time deals.

.coupon.ribbon {
  position: relative;
  overflow: hidden;
}

.coupon.ribbon::before {
  content: "Sale";
  position: absolute;
  top: 12px;
  right: -40px;
  width: 140px;
  text-align: center;
  background: #e11d48;
  color: #f9fafb;
  padding: 0.25rem 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transform: rotate(35deg);
}

This visual treatment resembles promotional badges you might configure in a HubSpot theme or module.

Integrating Coupon CSS into Your Workflow

To get the most from your coupon component, consider how it fits into your broader marketing stack, whether you use HubSpot or another platform.

  • Landing pages: Feature coupons next to signup forms.
  • Email campaigns: Convert the coupon design into an email-friendly version.
  • Blog posts: Drop the coupon into relevant content to drive action.
  • Pop-ups and slide-ins: Reuse the styles inside modal components.

If you run a complex site and need help integrating coupon design into broader SEO and conversion funnels, an agency like Consultevo can help align design, tracking, and automation.

Referencing the Original HubSpot Coupon Tutorial

The techniques in this walkthrough are aligned with best practices showcased in the original tutorial on the HubSpot blog. For more design inspiration, alternate layouts, and variations on this pattern, review the source article at HubSpot’s coupon CSS example.

By combining this reusable component with your own branding and analytics, you can quickly ship promotional elements that look professional, support your SEO goals, and integrate cleanly into any marketing workflow.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Verified by MonsterInsights