Blog, Portfolio & Events

Use blog, portfolio, and event schedule blocks to showcase articles, case studies, and conference or event agendas on your marketing pages.

Default Blog

Blade code

<x-fwb.blocks.marketing.blog />

Custom Blog

Latest Articles

Insights and tutorials from our engineering team.

Blade code

<x-fwb.blocks.marketing.blog title="Latest Articles" description="Insights and tutorials from our engineering team.">
    <article class="p-6 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
        <div class="flex justify-between items-center mb-5 text-gray-500">
            <span class="bg-blue-100 text-blue-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">
                Guide
            </span>
            <span class="text-sm">3 days ago</span>
        </div>
        <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"><a href="#">Getting started with Flowbite Blade</a></h2>
        <p class="mb-5 font-light text-gray-500 dark:text-gray-400">Learn how to install and configure Flowbite Blade components in your Laravel application step by step.</p>
        <div class="flex justify-between items-center">
            <div class="flex items-center space-x-4 rtl:space-x-reverse">
                <img class="w-7 h-7 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt="Jese Leos avatar" />
                <span class="font-medium dark:text-white">Jese Leos</span>
            </div>
            <a href="#" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
                Read more
                <x-fwb-o-arrow-right class="ml-2 w-4 h-4" />
            </a>
        </div>
    </article>
</x-fwb.blocks.marketing.blog>

Default Portfolio

Blade code

<x-fwb.blocks.marketing.portfolio />

Custom Portfolio

Featured Projects

A selection of our best work from the past year.

Design System

Component Library

A comprehensive design system with over 200 reusable components built for enterprise applications.

View case study

Blade code

<x-fwb.blocks.marketing.portfolio title="Featured Projects" description="A selection of our best work from the past year.">
    <div class="p-6 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
        <span class="bg-blue-100 text-blue-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 mb-4">
            Design System
        </span>
        <h3 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Component Library</h3>
        <p class="mb-4 font-light text-gray-500 dark:text-gray-400">A comprehensive design system with over 200 reusable components built for enterprise applications.</p>
        <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
            View case study
            <x-fwb-o-arrow-right class="rtl:rotate-180 w-3.5 h-3.5 ms-2" />
        </a>
    </div>
</x-fwb.blocks.marketing.portfolio>

Default Event Schedule

Schedule

Download PDF version

08:00 - 09:00

Opening remarks

09:00 - 10:00

Keynote: The Future of Design Systems

10:00 - 11:00

Workshop: Building Accessible Components

11:00 - 12:00

Networking and coffee break

12:00 - 13:00

Lunch break

13:00 - 14:00

Panel: Scaling Tailwind CSS in Production

14:00 - 15:00

Closing remarks and Q&A

Blade code

<x-fwb.blocks.marketing.event-schedule />

Custom Event Schedule

Conference Agenda

Download PDF version

09:00 - 10:00

Welcome and Registration

10:00 - 11:30

Keynote: Building Modern Web Apps with Laravel

11:30 - 12:30

Panel Discussion: The Future of PHP

Blade code

<x-fwb.blocks.marketing.event-schedule title="Conference Agenda">
    <div class="flex flex-col gap-2 py-4 sm:gap-6 sm:flex-row sm:items-center">
        <p class="w-32 text-lg font-normal text-gray-500 sm:text-right dark:text-gray-400 shrink-0">09:00 - 10:00</p>
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Welcome and Registration</h3>
    </div>
    <div class="flex flex-col gap-2 py-4 sm:gap-6 sm:flex-row sm:items-center">
        <p class="w-32 text-lg font-normal text-gray-500 sm:text-right dark:text-gray-400 shrink-0">10:00 - 11:30</p>
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Keynote: Building Modern Web Apps with Laravel</h3>
    </div>
    <div class="flex flex-col gap-2 py-4 sm:gap-6 sm:flex-row sm:items-center">
        <p class="w-32 text-lg font-normal text-gray-500 sm:text-right dark:text-gray-400 shrink-0">11:30 - 12:30</p>
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Panel Discussion: The Future of PHP</h3>
    </div>
</x-fwb.blocks.marketing.event-schedule>

Component Properties

Blog x-fwb.blocks.marketing.blog

Prop Type Default Description
title string 'Our Blog' Heading text displayed above the blog post cards.
description string 'We use an agile approach...' Subheading text displayed below the title.
slot slot - Blog post <article> elements displayed in a two-column grid. When empty, default sample posts are shown.

Portfolio x-fwb.blocks.marketing.portfolio

Prop Type Default Description
title string 'Our work' Heading text displayed above the portfolio cards.
description string 'Crafted with skill and care...' Subheading text displayed below the title.
slot slot - Portfolio card elements displayed in a three-column grid. When empty, default sample projects are shown.

EventSchedule x-fwb.blocks.marketing.event-schedule

Prop Type Default Description
title string 'Schedule' Heading text displayed above the schedule timeline.
slot slot - Schedule items, each containing a time and event title in a flex row layout. When empty, default sample schedule is shown.