React Content Sections - Flowbite

Choose one of these website sections to show extra content relative to the other sections on the page such as a gallery of images, description texts, and more.

Heading with description

Use this example to show a heading with a paragraph and a CTA link anywhere on your page relative to other sections.

View on GitHub

Powering innovation at 200,000+ companies worldwide

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease.

Learn more

Images with heading and description

Use this example to show a couple of images next to a heading and paragraph to provide visual impact to your users.

View on GitHub

We didn't reinvent the wheel

We are strategists, designers and developers. Innovators and problem solvers. Small enough to be simple and quick, but big enough to deliver the scope you want at the pace you need. Small enough to be simple and quick, but big enough to deliver the scope you want at the pace you need.

We are strategists, designers and developers. Innovators and problem solvers. Small enough to be simple and quick.

Video embed content

Use this website section to show a video embedded from YouTube (or another platform) next to the content area of the heading and paragraphs.

View on GitHub

We didn't reinvent the wheel

We are strategists, designers and developers. Innovators and problem solvers. Small enough to be simple and quick, but big enough to deliver the scope you want at the pace you need.

Image gallery

Use this example of an image gallery coded with Tailwind CSS to provide a strong visual impact between the website sections on your page.

View on GitHub

We didn't reinvent the wheel

We are strategists, designers and developers. Innovators and problem solvers. Small enough to be simple and quick, but big enough to deliver the scope you want at the pace you need.

Heading with description (two columns)

This example can be used to show another block of text next to the classic heading with the paragraph and CTA link version.

View on GitHub

Powering innovation at 200,000+ companies worldwide

Empower Developers, IT Ops, and business teams to collaborate at high velocity. Respond to changes and deliver great customer and employee service experiences fast.

Learn more

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

Social proof content

Use this example to show a set of statistical numbers that provide social proof to your users next to the heading and paragraphs.

View on GitHub

Home to the software teams

Meet your developers where they already are. GitHub is home to over 40 million developers and the world’s largest open source community.

73M+
developers
1B+
contributors
4M+
organizations

Content card images

Get started with this website section to show at least three cards with images relative to the descriptive heading and paragraphs.

View on GitHub

Turn collaboration into innovation

Learn more about inner source

Build as one team

Work seamlessly across your organization on a platform designed for collaboration.

Transform your culture

Embrace innersource, iterate faster, and ship more frequently using best tools from open source teams.

Learn as you build

Get insight into how your team builds today with community-backed KPIs.

Table of contents card

Use this example to show the table of contents of a book or online course based on chapters and description with a CTA button.

View on GitHub

Table of contents

Chapter 1: Introduction to Design Principles

This chapter provides an overview of the basic principles of design, such as balance, contrast, and hierarchy. It explains how these principles can be used to create visually pleasing and effective designs.

Chapter 2: Designing for User Experience

This chapter explores the concept of user experience (UX) design and how it relates to the overall design process. It covers topics such as user research, usability testing, and user-centered design.

Chapter 3: Typography in Design

This chapter delves into the art and technique of typography, including the history and evolution of type, the basics of typographic hierarchy, and the use of typography in digital design.

Chapter 4: Color Theory and its Applications

This chapter covers the basics of color theory and its application in design. It includes information on color wheels, complementary colors, color schemes, and the psychological effects of color. It also covers color management and color spaces in digital design.

Chapter 5: Design for the Web

This chapter will cover the basics of web design, including the principles of responsive design, website layout, and typography, as well as the use of HTML, CSS, and JavaScript.

Chapter 6: Branding and Identity Design

This chapter will explore the process of creating and maintaining a brand, including the development of a brand strategy, the creation of a visual identity, and the use of design elements to communicate a brand's message.

Get free sample chapters

Content section with logo, CTA links, image, and feature list

This example can be used to show the logo, a couple of links, a featured image, text, and a feature list as a content section.

View on GitHub
Flowbite logo
Visit the websiteLet's work together

Overview

Since 1984, Flowbite has been serving up grab-and-go frozen daiquiris from its stores across the U.S. Its signature drinks, souvenir cups, and discounted refills have made Flowbite synonymous with great music, good vibes, and starting the best party in town.

  • A/B Testing
  • Craft CMS development
  • UX/UI design
  • Copywriting
  • Brand development
  • Graphic design
  • Front-end development
  • SEO

Background

Come 2021, Flowbite had expanded to over 40 locations. The brand’s digital presence existed, but it lacked strategy. Although its target market of 21-30 year-olds was as engaged (and as loyal) as ever, the brand had outgrown its amateur look of the early '00s and the family-owned business vibes. It needed to show it was a strong brand moving in a new direction - and it was heading there fast.

The challenge

Flowbite’s new website would set the tone for all future marketing initiatives, so the brand needed something to showcase its new identity as soon as possible. A tight timeline, paired with the fact that the new management team were still exploring how to shift the brand from what it used to be to what it needed to be, meant that working collaboratively was a must.