Section reference › Content

Call to action "type": "cta"

A short, bold block with a heading, one line of text and buttons that asks visitors to take the next step. Four styles: coloured band, boxed card, photo background or split with image.

Example#

Paste this into the sections list of a page file:

{
  "type": "cta",
  "style": "banner",
  "eyebrow": "Ready when you are",
  "title": "Start your free 14-day trial",
  "text": "No credit card needed. Cancel any time with one click.",
  "buttons": [
    {
      "label": "Start free trial",
      "href": "signup.html",
      "style": "light",
      "icon": "arrow-right"
    },
    {
      "label": "Talk to sales",
      "href": "contact.html",
      "style": "outline"
    }
  ]
}

Options#

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in buttons#

Variants and styles#

banner#

Full-width band in the primary colour with centred text. Default tone "primary".

{
  "type": "cta",
  "style": "banner",
  "eyebrow": "Ready when you are",
  "title": "Start your free 14-day trial",
  "text": "No credit card needed. Cancel any time with one click.",
  "buttons": [
    {
      "label": "Start free trial",
      "href": "signup.html",
      "style": "light",
      "icon": "arrow-right"
    },
    {
      "label": "Talk to sales",
      "href": "contact.html",
      "style": "outline"
    }
  ]
}

boxed#

A rounded card with text on the left and buttons on the right, sitting on the page background. Default tone "light".

{
  "type": "cta",
  "style": "boxed",
  "title": "Have a project in mind?",
  "text": "Tell us about it and get a fixed quote within 48 hours.",
  "buttons": [
    {
      "label": "Get a quote",
      "href": "contact.html",
      "style": "light",
      "icon": "send"
    }
  ]
}

image#

Centred text over a darkened background photo. Default tone "dark".

{
  "type": "cta",
  "style": "image",
  "image": "placeholder",
  "overlay": 0.6,
  "eyebrow": "Book a table",
  "title": "Dinner on the terrace this weekend?",
  "text": "We hold a few tables for walk-ins, but booking is safer.",
  "buttons": [
    {
      "label": "Reserve now",
      "href": "reservations.html",
      "style": "primary"
    },
    {
      "label": "See the menu",
      "href": "menu.html",
      "style": "outline"
    }
  ]
}

split#

Text and buttons on the left, a photo on the right. Default tone "alt".

{
  "type": "cta",
  "style": "split",
  "image": "placeholder",
  "eyebrow": "Free consultation",
  "title": "Not sure where to start?",
  "text": "Book a 30-minute call with one of our advisers. We will look at your situation and suggest the simplest next step.",
  "buttons": [
    {
      "label": "Book a call",
      "href": "contact.html",
      "style": "primary",
      "icon": "calendar-check"
    }
  ]
}

Tips#

• On the primary-coloured banner, "light" and "outline" buttons stand out best; "primary" buttons blend in.
• Keep the title under about 8 words and use one main button plus at most one secondary.
• "fluid" only affects the boxed and split styles.

Editing it in the HTML files#

The style is a class on the section: cta-banner, cta-boxed, cta-image or cta-split. The heading is h2.cta-title.

Where it's used#

Open these pages in template/ to see it working:

• Creative Agency: template/creative-agency/about.html (source src/demos/creative-agency/pages/about.json)
• Real Estate: template/real-estate/agents.html (source src/demos/real-estate/pages/agents.json)
• Corporate: template/corporate/about.html (source src/demos/corporate/pages/about.json)
• Finance: template/finance/about.html (source src/demos/finance/pages/about.json)
• Law Firm: template/law-firm/about.html (source src/demos/law-firm/pages/about.json)
• SaaS Product: template/saas/about.html (source src/demos/saas/pages/about.json)
• Mobile App: template/mobile-app/about.html (source src/demos/mobile-app/pages/about.json)
• Tech Conference: template/conference/about.html (source src/demos/conference/pages/about.json)
• Online Academy: template/education/about.html (source src/demos/education/pages/about.json)
• Restaurant: template/restaurant/about.html (source src/demos/restaurant/pages/about.json)
• Coffee Shop: template/cafe/about.html (source src/demos/cafe/pages/about.json)
• Hotel & Resort: template/hotel/about.html (source src/demos/hotel/pages/about.json)
• Wedding: template/wedding/about.html (source src/demos/wedding/pages/about.json)
• Gym & Fitness: template/gym/about.html (source src/demos/gym/pages/about.json)
• Yoga Studio: template/yoga/about.html (source src/demos/yoga/pages/about.json)
• Day Spa & Salon: template/spa/about.html (source src/demos/spa/pages/about.json)
• Medical Clinic: template/medical/about.html (source src/demos/medical/pages/about.json)
• Dental Clinic: template/dental/about.html (source src/demos/dental/pages/about.json)
• Pet Care: template/pet-care/faq.html (source src/demos/pet-care/pages/faq.json)
• Construction: template/construction/careers.html (source src/demos/construction/pages/careers.json)
• Car Dealer: template/car-dealer/index.html (source src/demos/car-dealer/pages/index.json)
• Travel Agency: template/travel/about.html (source src/demos/travel/pages/about.json)
• Photographer: template/photography/about.html (source src/demos/photography/pages/about.json)
• Architecture Studio: template/architecture/index.html (source src/demos/architecture/pages/index.json)
• Interior Design: template/interior-design/about.html (source src/demos/interior-design/pages/about.json)
• Portfolio: template/portfolio/about.html (source src/demos/portfolio/pages/about.json)
• Music Festival: template/music-festival/artist-luma-vale.html (source src/demos/music-festival/pages/artist.json)
• Fashion Store: template/fashion-store/about.html (source src/demos/fashion-store/pages/about.json)
• Charity: template/charity/about.html (source src/demos/charity/pages/about.json)
• Logistics: template/logistics/about.html (source src/demos/logistics/pages/about.json)