Feature Section

Feature section component to showcase product capabilities in a responsive grid layout with icons, titles, and descriptions. Use the x-fwb.blocks.marketing.feature.item sub-component inside the default slot.

Default Feature Section

Designed for business teams like yours

Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value.

Marketing

Plan it, create it, launch it. Collaborate seamlessly with all the organization and hit your marketing goals every month with our marketing plan.

Legal

Protect your organization, devices and stay compliant with our structured workflows and custom permissions made for you.

Business Automation

Auto-assign tasks, send Slack messages, and much more. Now power up with hundreds of new templates to help you get started.

Blade code

<x-fwb.blocks.marketing.feature
    title="Designed for business teams like yours"
    description="Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value."
>
    <x-fwb.blocks.marketing.feature.item fwb-icon="o-chart-mixed" title="Marketing" description="Plan it, create it, launch it. Collaborate seamlessly with all the organization and hit your marketing goals every month with our marketing plan." />
    <x-fwb.blocks.marketing.feature.item fwb-icon="o-globe" title="Legal" description="Protect your organization, devices and stay compliant with our structured workflows and custom permissions made for you." />
    <x-fwb.blocks.marketing.feature.item fwb-icon="o-adjustments-horizontal" title="Business Automation" description="Auto-assign tasks, send Slack messages, and much more. Now power up with hundreds of new templates to help you get started." />
</x-fwb.blocks.marketing.feature>

Description as Slot Content

Everything you need to build modern apps

Our platform provides all the tools and components you need to create stunning web applications.

Analytics

Track your performance with real-time analytics and detailed reporting dashboards.

Configuration

Customize every aspect of your application with our flexible configuration options and presets.

Templates

Start quickly with our library of pre-built templates and UI components.

Blade code

<x-fwb.blocks.marketing.feature
    title="Everything you need to build modern apps"
    description="Our platform provides all the tools and components you need to create stunning web applications."
>
    <x-fwb.blocks.marketing.feature.item fwb-icon="o-adjustments-horizontal" title="Analytics" description="Track your performance with real-time analytics and detailed reporting dashboards." />
    <x-fwb.blocks.marketing.feature.item fwb-icon="o-cog" title="Configuration">
        Customize every aspect of your application with our <strong>flexible configuration</strong> options and presets.
    </x-fwb.blocks.marketing.feature.item>
    <x-fwb.blocks.marketing.feature.item fwb-icon="o-grid" title="Templates" description="Start quickly with our library of pre-built templates and UI components." />
</x-fwb.blocks.marketing.feature>

Two-Column Grid with nb-items

Core Features

Fast Performance

Optimized for speed with lazy loading, code splitting, and server-side rendering out of the box.

Secure by Default

Built-in security features including CSRF protection, XSS prevention, and encrypted sessions.

Blade code

<x-fwb.blocks.marketing.feature
    title="Core Features"
    :nb-items="2"
>
    <x-fwb.blocks.marketing.feature.item fwb-icon="s-rocket" title="Fast Performance" description="Optimized for speed with lazy loading, code splitting, and server-side rendering out of the box." />
    <x-fwb.blocks.marketing.feature.item fwb-icon="s-shield-check" title="Secure by Default" description="Built-in security features including CSRF protection, XSS prevention, and encrypted sessions." />
</x-fwb.blocks.marketing.feature>

Four-Column Grid without Section Header

Authentication

Complete auth scaffolding with login, register, and password reset.

Dark Mode

Built-in dark mode support with system preference detection.

Responsive

Mobile-first and fully responsive layouts and components.

Components

50+ pre-built Blade components with Tailwind CSS styling.

Blade code

<x-fwb.blocks.marketing.feature :nb-items="4">
    <x-fwb.blocks.marketing.feature.item fwb-icon="s-user-circle" title="Authentication" description="Complete auth scaffolding with login, register, and password reset." />
    <x-fwb.blocks.marketing.feature.item fwb-icon="s-moon" title="Dark Mode" description="Built-in dark mode support with system preference detection." />
    <x-fwb.blocks.marketing.feature.item fwb-icon="s-desktop-pc" title="Responsive" description="Mobile-first and fully responsive layouts and components." />
    <x-fwb.blocks.marketing.feature.item fwb-icon="s-layers" title="Components" description="50+ pre-built Blade components with Tailwind CSS styling." />
</x-fwb.blocks.marketing.feature>

Component Properties

Feature x-fwb.blocks.marketing.feature

Prop Type Default Description
title string '' The section heading text. Hidden when empty.
description string '' The paragraph text below the heading. Hidden when empty.
nb-items int 3 Number of grid columns on large screens (1, 2, 3, or 4).
slot slot - Default slot for feature items. Use x-fwb.blocks.marketing.feature.item components as children.

Feature Item x-fwb.blocks.marketing.feature.item

Prop Type Default Description
fwb-icon string '' Flowbite icon name (e.g. o-chart-mixed, s-rocket). Rendered inside a rounded circle.
title string '' The feature item heading text. Hidden when empty.
description string '' The feature description text. Can also be provided as slot content for rich HTML.
title-element string h3 The HTML element used for the title (e.g. h3, h4).
slot slot - Default slot for rich description content (HTML). Takes priority over the description prop when provided.