Landing · Layout

Section container

The outer wrapper for every landing section: a full-bleed background band with its content centred and capped at the landing content width (1280px), carrying the standard vertical rhythm. Soft and dark variants alternate sections. Grounds directly on the live marketing site (max-width 1280px, section padding ~64/32); framework-free and bound to the shared --aha-* tokens.

◆ generated from landing/section-container.json — do not edit by hand

Preview

Section container

A band that spans full width, with its content centred

The section paints its background edge to edge; the inner column caps the reading width at the landing content max-width and carries the standard vertical rhythm. Add a modifier for a soft or dark band.

Soft band

The same container, tinted, for alternating sections down a page.

Dark band

The same container on the dark surface token, for a high-contrast closing section.

Paste-and-run HTML

Framework-free — copy the whole block into any page (Webflow, WordPress, a static site). It binds only to the shared --aha-* tokens, so load the token layer once on the page first and the block inherits the AhaSlides brand automatically.

section-container.html

<style>
.aha-section{
  background:var(--aha-white);
  color:var(--aha-text-default);
  font-family:var(--aha-font-product);
  padding:clamp(var(--aha-space-48),6vw,var(--aha-space-96)) clamp(var(--aha-space-16),4vw,var(--aha-space-32));
}
.aha-section *{box-sizing:border-box}
.aha-section__inner{
  max-width:var(--aha-breakpoint-desktop);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:var(--aha-space-16);
}
.aha-section--soft{background:var(--aha-purple-10)}
.aha-section--dark{background:var(--aha-bg-dark);color:var(--aha-icon-inverse)}
.aha-section--dark .aha-section__lead{color:var(--aha-white-a50)}
.aha-section__eyebrow{
  margin:0;
  font-size:var(--aha-size-sm);
  font-weight:var(--aha-weight-semibold);
  letter-spacing:var(--aha-letter-spacing-subheadings);
  text-transform:uppercase;
  color:var(--aha-color-primary);
}
.aha-section__title{
  margin:0;
  font-size:clamp(var(--aha-size-h3),4vw,var(--aha-size-h1));
  line-height:var(--aha-line-height-heading);
  font-weight:var(--aha-weight-semibold);
  letter-spacing:var(--aha-letter-spacing-headlines);
}
.aha-section__lead{
  margin:0;
  max-width:60ch;
  font-size:var(--aha-size-l);
  line-height:var(--aha-line-height-body);
  color:var(--aha-text-secondary);
}
</style>
<section class="aha-section">
  <div class="aha-section__inner">
    <p class="aha-section__eyebrow">Section container</p>
    <h2 class="aha-section__title">A band that spans full width, with its content centred</h2>
    <p class="aha-section__lead">The section paints its background edge to edge; the inner column caps the reading width at the landing content max-width and carries the standard vertical rhythm. Add a modifier for a soft or dark band.</p>
  </div>
</section>
<section class="aha-section aha-section--soft">
  <div class="aha-section__inner">
    <h2 class="aha-section__title">Soft band</h2>
    <p class="aha-section__lead">The same container, tinted, for alternating sections down a page.</p>
  </div>
</section>
<section class="aha-section aha-section--dark">
  <div class="aha-section__inner">
    <h2 class="aha-section__title">Dark band</h2>
    <p class="aha-section__lead">The same container on the dark surface token, for a high-contrast closing section.</p>
  </div>
</section>

Load the tokens once

Add this to your page <head> before the block — it defines every --aha-* custom property the block reads:

head

<link rel="stylesheet" href="https://ahaslides-product.github.io/ahaslides-design/variables.css">