froala/design-blocks

★ 13,641HTMLAudience · designerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((design-blocks))
    What it does
      170+ HTML sections
      Copy-paste layout blocks
      Visual builder
    Block Types
      Headers footers
      Pricing tables
      Testimonials
      Call to action
    Tech Stack
      Bootstrap 4
      Font Awesome
      HTML CSS
    Frameworks
      Angular
      React
      Vue

mindmap root((design-blocks)) What it does 170+ HTML sections Copy-paste layout blocks Visual builder Block Types Headers footers Pricing tables Testimonials Call to action Tech Stack Bootstrap 4 Font Awesome HTML CSS Frameworks Angular React Vue

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Copy pre-built HTML sections for headers, footers, and pricing tables into your website without writing layout code from scratch.

USE CASE 2

Use the visual builder at froala.com to drag and drop design blocks into a page layout and preview the result in the browser.

USE CASE 3

Import design blocks into an Angular, React, or Vue project using the framework-specific versions provided.

USE CASE 4

Download Sketch or PSD design files to prototype a website layout before building the HTML version.

Tech stack

HTMLCSSBootstrap 4Font AwesomeAngularReactVue

Getting it running

Difficulty · easy Time to first run · 5min

Review the Froala Open Web Design License before using in commercial or redistributed projects.

Froala Open Web Design License: free to use, but review the specific terms before commercial or redistributed use.

In plain English

Froala Design Blocks is a collection of over 170 pre-built HTML sections for building websites. Each block is a ready-to-use chunk of HTML and CSS for a common part of a web page: headers, footers, contact forms, pricing tables, feature highlights, testimonials, team member grids, call-to-action sections, and more. The idea is that you pick the blocks you want, copy their HTML into your project, and assemble a full page from them without writing layout code from scratch. All blocks are built on top of Bootstrap 4, a widely used front-end framework. They also rely on Font Awesome for icons and Google Fonts (Roboto by default) for typography. The blocks are responsive, meaning they adjust their layout to fit both desktop and mobile screens. You can access the blocks in several ways: download the repository directly, install it via npm, or use a visual builder at froala.com that lets you arrange and preview blocks in a browser without touching code. The project also has framework-specific versions for Angular, React, and Vue if you prefer to work within those ecosystems. Sketch and PSD design files are also available for designers who want to prototype in those tools. The blocks are organized into categories and each category has its own HTML file in the dist folder so you can browse them as working examples. The CSS is available in both regular and minified form. The license is the Froala Open Web Design License (FOWDL), which is specific to this project and different from standard open-source licenses. The project is free to use but the license terms should be reviewed before using it in commercial or redistributed work.

Copy-paste prompts

Prompt 1

How do I install Froala Design Blocks via npm and include a pricing table block in my Bootstrap 4 HTML page?

Prompt 2

Show me how to use the Froala Design Blocks React package to add a testimonials section to my React app.

Prompt 3

How do I customize the Roboto font and color scheme in a Froala Design Block to match my brand guidelines?

Prompt 4

Which Froala Design Blocks categories are available in the dist folder and how do I preview them as working HTML examples?

Open on GitHub → Explain another repo

← froala on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.