• Playground
Components
    • Announcement Bar
    • Bento Grid
    • Blog Card
    • Comparison Table
    • CTA
    • FAQ
    • Feature Section
    • Hero
    • Logo Cloud
    • Newsletter
    • Pricing Card
    • Process
    • Stats
    • Team Card
    • Testimonial
    • Timeline
  • Custom
Surfaces
  • SEO
  1. Playground
  2. Components
  3. Blocks

Blocks

Each sectional component combines structure, content, and design into a complete page section.

Announcement Bar

A slim top-of-page bar that shows a single time-bound announcement, used for launches, sales, and status notices.

Bento Grid

An asymmetric grid of different-sized tiles that showcases features or media with visual variety.

Blog Card

A linked article preview with title, excerpt, meta, and an optional image, used to draw readers in from a list or grid.

Comparison Table

A feature-by-plan matrix that aligns shared attributes so users can compare options and choose one.

CTA

A centered band with a headline and one primary action, used to drive a single next step.

FAQ

An accordion of common questions that keeps answers collapsed until opened, used to cut scroll fatigue.

Feature Section

A two-column pairing of copy and a visual, used to explain one feature at a time.

Hero

An opening page section with a headline, lead, and primary action, used to set context and intent before the reader scrolls.

Logo Cloud

A grid of customer or partner logos, used to signal credibility through recognizable affiliations.

Newsletter

An email-capture form section that posts to a mailing provider, used to grow a subscriber list.

Pricing Card

A single pricing tier with its price, features, and action, used to help users compare and choose a plan.

Process

A sequence of numbered steps, vertical or horizontal, that walks users through how something works in order.

Stats

A row of large numbers with labels, used to surface key metrics for quick, high-impact reading.

Team Card

A profile card with a photo, name, role, and bio, used to introduce a person on a team and about pages.

Testimonial

A quoted endorsement with attribution, used to build trust through an authentic third-party voice.

Timeline

A vertical sequence of dated milestones, used to show chronology and progression.