Centred Description With Icon Blocks

A centred intro paragraph above a row of icon blocks. Frames a section theme, then lists supporting features in tidy, evenly spaced columns.

import { Building2Icon, ThumbsUpIcon, Users2Icon } from "lucide-react";

export default function IconSectionCentredDescriptionWithIconBlocks() {
  return (
    <>
      {/* Icon Blocks */}
      <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px] py-24 lg:py-32">
        <div className="max-w-2xl mx-auto">
          {/* Grid */}
          <div className="grid gap-12">
            <div>
              <h2 className="text-3xl font-bold lg:text-4xl">Our vision</h2>
              <p className="mt-3 text-muted-foreground">
                For as long as there have been cities, the public square has
                been a fundamental part of the urban landscape - an open,
                approachable space to meet and engage with friends and
                neighbours. Space aims to capture this spirit of bringing people
                together in an exciting, welcoming environment.
              </p>
            </div>
            <div className="space-y-6 lg:space-y-10">
              {/* Icon Block */}
              <div className="flex">
                <Building2Icon className="flex-shrink-0 mt-2 h-6 w-6" />
                <div className="ms-5 sm:ms-8">
                  <h3 className="text-base sm:text-lg font-semibold">
                    High quality Co-Living spaces
                  </h3>
                  <p className="mt-1 text-muted-foreground">
                    Our fully furnished spaces are designed and purpose-built
                    with Co-Living in mind, featuring high-end finishes and
                    amenities that go far beyond traditional apartment
                    buildings.
                  </p>
                </div>
              </div>
              {/* End Icon Block */}
              {/* Icon Block */}
              <div className="flex">
                <Users2Icon className="flex-shrink-0 mt-2 h-6 w-6" />
                <div className="ms-5 sm:ms-8">
                  <h3 className="text-base sm:text-lg font-semibold">
                    Fostering vibrant communities
                  </h3>
                  <p className="mt-1 text-muted-foreground">
                    Our passion is bringing people together. Beyond creating
                    beautiful spaces, we provide shared experiences.
                  </p>
                </div>
              </div>
              {/* End Icon Block */}
              {/* Icon Block */}
              <div className="flex">
                <ThumbsUpIcon className="flex-shrink-0 mt-2 h-6 w-6" />
                <div className="ms-5 sm:ms-8">
                  <h3 className="text-base sm:text-lg font-semibold">
                    Simple and all-inclusive
                  </h3>
                  <p className="mt-1 text-muted-foreground">
                    We worry about the details so that our residents don&apos;t
                    have to. From our online application process to simple,
                    all-inclusive billing we aim to make the living experience
                    as effortless as possible.
                  </p>
                </div>
              </div>
              {/* End Icon Block */}
            </div>
          </div>
          {/* End Grid */}
        </div>
      </div>
      {/* End Icon Blocks */}
    </>
  );
}

About this block

Centred Description With Icon Blocks opens with a bold section heading and a short introductory paragraph centred in a narrow column, so the reader absorbs the theme before scanning details. Below that sits a vertical stack of icon blocks: each block places an icon on the left and pairs it with a subheading and a short paragraph to its right. Three icon blocks ship in the demo, spaced generously so the column never feels dense.

The heading, intro copy, and each icon block are independent. You can rewrite any of them, swap in a different icon from the icon library, or add and remove blocks without affecting the others. The narrow centred column keeps everything readable at all viewport widths without extra work.

When to use

Reach for this block when you want to introduce a concept in a sentence or two and then immediately back it up with a short list of supporting points. It works well mid-page on a product landing page for an AI assistant, where you might open with a mission statement and follow it with three capability pillars like accuracy, context awareness, and data privacy. It is a calmer alternative to a wide multi-column grid when you have three or four points and prose matters more than quick scanning.

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to establish the headline offer before the detail begins
Feature Sections if you want a richer image-led introduction before narrowing to icon-level specifics

After

A CTA section to close the pitch once the supporting points have landed
Testimonials to reinforce the claims made in the icon blocks with social proof

What you can display

The block is designed for a short narrative followed by a handful of supporting capability or value statements. A few fits beyond the obvious:

Product pillars. State the core principles of your AI assistant, one icon block per pillar, so new visitors understand the philosophy at a glance.
Service promises. Describe what a customer can expect at each stage of onboarding, with an icon that signals the tone of each promise.
Trust signals. Lead with a brief company statement and follow with three reassurances around security, reliability, and support.

Tip: keep each icon block paragraph to two or three sentences so the column stays easy to read in a single pass without scrolling mid-block.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to establish the headline offer before the detail begins
Feature Sections if you want a richer image-led introduction before narrowing to icon-level specifics

After

A CTA section to close the pitch once the supporting points have landed
Testimonials to reinforce the claims made in the icon blocks with social proof

What you can display

The block is designed for a short narrative followed by a handful of supporting capability or value statements. A few fits beyond the obvious:

Product pillars. State the core principles of your AI assistant, one icon block per pillar, so new visitors understand the philosophy at a glance.
Service promises. Describe what a customer can expect at each stage of onboarding, with an icon that signals the tone of each promise.
Trust signals. Lead with a brief company statement and follow with three reassurances around security, reliability, and support.

Tip: keep each icon block paragraph to two or three sentences so the column stays easy to read in a single pass without scrolling mid-block.

Centred Description With Icon Blocks

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display