Landing · Layout

Grid

A fluid marketing grid for feature cards, logo walls and stat rows. The base grid auto-fits as many columns as fit; the --2 / --3 / --4 variants target that many across on desktop and collapse to a single column on narrow screens with no media queries. Gap and card styling bind to the DS space and radius scales. Mirrors the live site's 1/2/3/4-up grids at a 24px gutter.

◆ generated from landing/grid.json — do not edit by hand

Preview

Live pollsAsk, and watch answers land in real time.

QuizzesScore teams and settle it on a leaderboard.

Word cloudsTurn open answers into one shared picture.

Q&ALet the room raise and upvote questions.

Spinner wheelPick a name or a prize at random.

Open endedCollect free-text responses on any slide.

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.

grid.html

<style>
.aha-grid{
  font-family:var(--aha-font-product);
  display:grid;
  gap:var(--aha-space-24);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
}
.aha-grid *{box-sizing:border-box}
.aha-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.aha-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.aha-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.aha-grid__cell{
  display:flex;
  flex-direction:column;
  gap:var(--aha-space-6);
  background:var(--aha-purple-10);
  border:1px solid var(--aha-split);
  border-radius:var(--aha-radius-lg);
  padding:var(--aha-space-24);
}
.aha-grid__cell b{font-size:var(--aha-size-h6);font-weight:var(--aha-weight-semibold);color:var(--aha-text-default)}
.aha-grid__cell span{font-size:var(--aha-size-default);line-height:var(--aha-line-height-body);color:var(--aha-text-secondary)}
</style>
<div class="aha-grid aha-grid--3">
  <div class="aha-grid__cell"><b>Live polls</b><span>Ask, and watch answers land in real time.</span></div>
  <div class="aha-grid__cell"><b>Quizzes</b><span>Score teams and settle it on a leaderboard.</span></div>
  <div class="aha-grid__cell"><b>Word clouds</b><span>Turn open answers into one shared picture.</span></div>
  <div class="aha-grid__cell"><b>Q&amp;A</b><span>Let the room raise and upvote questions.</span></div>
  <div class="aha-grid__cell"><b>Spinner wheel</b><span>Pick a name or a prize at random.</span></div>
  <div class="aha-grid__cell"><b>Open ended</b><span>Collect free-text responses on any slide.</span></div>
</div>

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">