Skip to content
UIGrammer
EN 中文

Anti-pattern · Layout · High

Center-Aligned Three-Card Hero

The center-aligned three-card hero is the default generated layout: centred headline, centred subhead, three identical feature cards below.

The tell

Headline, subhead and CTA all centred, followed by a row of three equal cards.

Why it happens

Centring is the safest choice when you do not know the content length, and three columns divide evenly into twelve. The model optimises for symmetry because symmetry always looks composed.

The rule

Break the symmetry on one axis — alignment, column count, or card scale.

  1. Left-align the hero copy, or set it on an asymmetric grid.
  2. Use two or four columns, or make one card span double width.
  3. Replace at least one card with something real: a product shot, a code block, a metric.

What is a Center-Aligned Three-Card Hero?

Centred headline, centred two-line subhead, one centred button, then three identical cards with an icon, a title and a sentence. It is the modal completion for "landing page" and it is legible, balanced and completely anonymous. Break one axis: left-align the text, vary the card sizes, or replace one card with a real product surface.

Fix prompt

Paste this after your existing prompt to strip the pattern from the result.