Docs How-To Guides Feature Grid (10 cards, responsive)

Feature Grid (10 cards, responsive)

The canonical layout for showing a list of 8–12 product capabilities or plugin replacements on a single 100vh screen-mode section. Pair of flip-box cards per row on mobile, full deck on desktop. Used on the Instinctor homepage screen 2 ("One plugin instead of ten").

When to use it

  • 8–12 short feature cards on one cinematic screen
  • Each card has a front headline + back detail with no CTA needed

    • (the deck is the message — visitors don't click out)

  • A "what's included" or "spec grid" section where every card pulls

    • equal weight

When not to use it

  • Fewer than 6 cards — use Rows with cards instead; the grid will

    • feel sparse

  • Cards each need their own CTA — use Plans or Icon Card
  • Variable card heights (Pinterest-style content) — use Grid's

    • Masonry layout mode instead

Structure

`` Section (100vh, hero_marker) └── Heading ("One plugin instead of ten." style) └── Grid ├── Flip Box × 10 (frosted glass, front/back per card) ``

Section settings

  • content_width = 100 (all three devices)
  • padding_left / padding_right: 24 desktop · 16 tablet · 13 mobile
  • padding_top / padding_bottom: 0 (let screen-mode handle vertical)
  • valign = center
  • screen_cloud_effect = cosmos (or any forced-bg env)

Grid settings (per-device)

| Setting | Desktop | Tablet | Mobile | | --------------------- | ------- | ------ | ------ | | columns | 5 | 5 | 2 | | rows | 2 | 2 | 5 | | gap_horizontal | 10 | 10 | 8 | | gap_vertical | 10 | 10 | 8 | | width_pct | 100 | 100 | 100 | | max_content_width | 1280 | — | — | | cell_sizing | stretch | stretch| stretch|

The 5×2 desktop deck packs ten cards onto one cinematic screen. The 2×5 mobile rearrangement keeps everything on a single 100vh phone screen (height math: 5 rows × (110px card + 8px gap) ≈ 590px + heading margin = comfortable on a 640px+ viewport).

Do NOT set content_width on a Grid. The key content_width belongs to the Section block. The Grid panel's "Content width" slider — despite the matching label — writes to width_pct. The two are different keys. If you find a content_width value on a grid from copy-pasted data, clear it: the resolver might honour it in some release and ignore it in another, and the slider can't reset it.

Flip Box settings (per-device)

| Setting | Desktop | Tablet | Mobile | | -------------------------- | ------- | ------ | ------ | | height | 170 | 170 | 110 | | padding | 20 | 20 | 12 | | front_title_size | 16 | 15 | 13 | | front_content_size | 12 | 11 | 11 | | back_title_size | 16 | 15 | 13 | | back_content_size | 12 | 11 | 11 | | section_max_width | 0 | 0 | 0 | | border_radius | 8 | 8 | 8 | | vertical_align | top | top | top |

  • frosted_glass = true (matches the env-canvas backdrop)
  • front_bg / back_bg = translucent rgba (e.g. rgba(255,255,255,0.08))
  • animation_type = spring (or zoom if targeting low-end devices)
  • section_max_width = 0 lets each card fill its cell on every

    • device — capping at 200/600 looked tight in 1-column mobile, and the grid's own column count is the right place to control width

Copy rules

  • Front Title = the capability (e.g. "Native online store")
  • Front Content = one short line of context, lowercase first word

    • (e.g. "Stripe-powered checkout, no plugin chain")

  • Back Title = the proof point (e.g. "Sell anything")
  • Back Content = 1-2 short sentences expanding the capability
  • Never lead a title or content field with <br>. The card's

    • vertical-align setting (top by default) handles spacing; a leading <br> just creates dead pixels and breaks alignment across cards

  • No em-dashes. Period or colon instead.

Anti-patterns

  • Leading <br> to center text vertically — use

    • vertical_align: center instead. The br pushes text down on mobile too, where you don't have the room for it.

  • content_width on the grid — wrong key for this block; the grid

    • uses width_pct (the panel's "Content width" slider writes to it). Setting content_width does nothing on a grid in most releases and can pin the resolver in others. Clear it if found.

  • Setting section_max_width to a small value (e.g. 200) — caps

    • each card on every device. Leave at 0 / leave unset, let columns drive width.

Related

  • blocks/flip-box — per-card detail
  • blocks/grid — per-device columns explanation
  • blocks/section — screen-mode hero treatment
  • concepts/responsive-overrides — per-device save semantics