[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70900":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":12,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":15,"starSnapshotCount":15,"syncStatus":16,"lastSyncTime":35,"discoverSource":36},70900,"design-blocks","froala\u002Fdesign-blocks","froala","A set of 170+ Bootstrap based design blocks ready to be used to create clean modern websites.","https:\u002F\u002Fwww.froala.com\u002Fdesign-blocks",null,"HTML",1,1222,25,0,2,49.46,"Other",false,"dev",true,[23,24,25,26,27,28,29,30,31],"bootstrap-theme","bootstrap4","design-templates","designer","html-template","html5","material-design","modern-design","website-design","2026-06-12 04:00:58","# [Froala Design Blocks](https:\u002F\u002Fwww.froala.com\u002Fdesign-blocks)   [![Tweet](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Furl\u002Fhttp\u002Fshields.io.svg?style=social)](https:\u002F\u002Ftwitter.com\u002Fintent\u002Ftweet?text=Get%20over%20170%20free%20design%20blocks%20based%20on%20Bootstrap%204&url=https:\u002F\u002Fwww.froala.com\u002Fdesign-blocks&via=froala&hashtags=bootstrap,design,templates,blocks,developers)  [![Slack](https:\u002F\u002Ffroala-design-blocks-slack.herokuapp.com\u002Fbadge.svg)](https:\u002F\u002Ffroala-design-blocks-slack.herokuapp.com\u002F)\n\n[![Price](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fprice-FREE-0098f7.svg)](https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002FLICENSE)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Ffroala-design-blocks.svg?colorB=brightgreen)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ffroala-design-blocks)\n[![CDNJS](https:\u002F\u002Fimg.shields.io\u002Fcdnjs\u002Fv\u002Ffroala-design-blocks.svg)](https:\u002F\u002Fcdnjs.com\u002Flibraries\u002Ffroala-design-blocks)\n[![GitHub package version](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fpackage-json\u002Fv\u002Ffroala\u002Fdesign-blocks.svg)](https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks)\n[![License: FOWDL v1.0](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-FOWDL-blue.svg)](https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002FLICENSE)\n\nOver 170 responsive design blocks ready to be used in your web or mobile apps. All blocks are based on the Bootstrap Library, and they are the building blocks for beautiful websites.\n\n**Discuss it on [Product Hunt](https:\u002F\u002Fwww.producthunt.com\u002Fposts\u002Ffroala-design-blocks-2-2) 🦄**\n\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.froala.com\u002Fdesign-blocks\u002Fwebpage-builder\">Design Blocks Builder »\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.froala.com\u002Fwysiwyg-editor\">WYSIWYG HTML Editor\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fwww.froala.com\u002Fpages\">Pages\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fwww.froala.com\u002Fblog\">Blog\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Farchive\u002Fmaster.zip\">Download\u003C\u002Fa>\u003C\u002Fp>\n\n![Design Blocks](https:\u002F\u002Fraw.githubusercontent.com\u002Ffroala\u002Fdesign-blocks\u002Fmaster\u002Fdesign-blocks.jpg)\n\n## Table of contents\n\n- [Quick start](#quick-start)\n- [Implementations](#implementations)\n- [What's included?](#whats-included)\n- [Dependencies](#dependencies)\n- [Categories](#categories)\n- [Browser support](#browser-support)\n- [Community](#community)\n- [Bugs and feature requests](#bugs-and-feature-requests)\n- [Contributing guidelines](#contributing-guidelines)\n- [Contributors](#contributors)\n- [Copyright and license](#copyright-and-license)\n\n\n## Quick start\n\n1. **Download Froala Design Blocks.** There are several ways to start using the Froala Design Blocks depending on how you prefer:\n\n- [Use the builder](https:\u002F\u002Fwww.froala.com\u002Fdesign-blocks\u002Fwebpage-builder)\n- [Download the latest release](https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002Ffroala-design-blocks.zip?raw=true) and then read the [What's included](#whats-included) section below.\n- Clone the repo and run it.\n  ```bash\n  git clone https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks.git\n  cd design-blocks\n  npm install\n  npm run start\n  ```\n\n2. **Design Blocks Skeleton.** You can use the following code layout as a starting point.\n\n   ```html\n   \u003C!DOCTYPE html>\n   \u003Chtml>\n     \u003Chead>\n       \u003Ctitle>Froala Design Blocks - Skeleton\u003C\u002Ftitle>\n       \u003Cmeta name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=1.0\">\n       \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F4.1.3\u002Fcss\u002Fbootstrap.min.css\" integrity=\"sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb\" crossorigin=\"anonymous\">\n       \u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i\" rel=\"stylesheet\">\n       \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Ffont-awesome\u002F4.7.0\u002Fcss\u002Ffont-awesome.css\">\n       \u003Clink type=\"text\u002Fcss\" rel=\"stylesheet\" href=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Ffroala-design-blocks\u002F2.0.1\u002Fcss\u002Ffroala_blocks.min.css\">\n     \u003C\u002Fhead>\n\n     \u003Cbody>\n         \u003C!-- Insert HTML for contents. -->\n     \u003C\u002Fbody>\n   \u003C\u002Fhtml>    \n   ```\n\n3. **Add design blocks.** Once you have the Froala Design Blocks basic HTML structure in place, start browsing the design blocks that you want to use and copy\u002Fpaste the HTML for them.\n\n\n\n## Implementations\n\n[\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fdev\u002Fassets\u002Flogo-html.png?raw=true\" height=\"60\" \u002F>](https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks)    [\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Ffroala\u002Fangular-froala-design-blocks\u002Fblob\u002Fmaster\u002Fsrc\u002Fassets\u002Flogo-angluar.png?raw=true\" height=\"60\" \u002F>](https:\u002F\u002Fgithub.com\u002Ffroala\u002Fangular-froala-design-blocks)    [\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Ffroala\u002Freact-froala-design-blocks\u002Fblob\u002Fmaster\u002Fpublic\u002Flogo-react.png?raw=true\" height=\"60\" \u002F>](https:\u002F\u002Fgithub.com\u002Ffroala\u002Freact-froala-design-blocks)        [\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Ffroala\u002Fvue-froala-design-blocks\u002Fblob\u002Fmaster\u002Fsrc\u002Fassets\u002Flogo-vue.png?raw=true\" height=\"60\" \u002F>](https:\u002F\u002Fgithub.com\u002Ffroala\u002Fvue-froala-design-blocks)    [\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fdev\u002Fassets\u002Flogo-psd.png?raw=true\" height=\"60\" \u002F>](https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fdev\u002Fassets\u002Fpsds\u002Fpsd-pages.zip?raw=true)    [\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fdev\u002Fassets\u002Flogo-sketch.png?raw=true\" height=\"60\" \u002F>](https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fdev\u002Fassets\u002Fsketch\u002Ffroala-design-blocks.sketch?raw=true)\n\n\n\n\n## What's included\n\nWithin the download archive you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:\n\n```\ndesign-blocks\u002F\n├── dist\u002F\n│   ├── css\u002F\n│   │   ├── froala_blocks.css\n│   │   └── froala_blocks.min.css\n│   └── imgs\u002F\n│   │── call_to_action.html\n│   │── contacts.html\n│   │── contents.html\n│   │── features.html\n│   │── footers.html\n│   │── forms.html\n│   │── headers.html\n│   │── index.html\n│   │── pricings.html\n│   │── teams.html\n│   └── testimonials.html\n├── assets\u002F\n├── screenshots\u002F\n└── src\u002F\n```\n\nWe provide compiled CSS (`froala_blocks.css`), as well as compiled and minified CSS (`froala_blocks.min.css`). Also, in the downloaded archive you will find useful images and PSD files that you can use to create new backgrounds. In the `screenshots` folder, there are the screenshots of all design blocks.\n\n\n\n## Dependencies\n\n- **Bootstrap**. Froala Design Blocks is built on Bootstrap 4 library and fully supports it. It uses the Javascript files only for the header design blocks, so if you don't need them, we recommend not to include the Bootstrap JS files in order to reduce your bundle size.\n\n- **Font Awesome**. We're using the amazing Font Awesome library for the social network icons.\n\n- **Google Fonts**. By default, the Design Blocks toolkit is built using the Roboto font, however that can easily be changed to other fonts.\n\n\n\n## Categories\n\n- Call to action - https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002Fdist\u002Fcall-to-action.html\n- Contacts - https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002Fdist\u002Fcontacts.html\n- Contents - https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002Fdist\u002Fcontents.html\n- Features - https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002Fdist\u002Ffeatures.html\n- Footers - https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002Fdist\u002Ffooters.html\n- Forms - https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002Fdist\u002Fforms.html\n- Headers - https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002Fdist\u002Fheaders.html\n- Pricings - https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002Fdist\u002Fpricings.html\n- Teams - https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002Fdist\u002Fteams.html\n- Testimonials - https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002Fdist\u002Ftestimonials.html\n\n\n\n## Browser Support\n\nAt the moment, we aim to support all major web browsers. Any issue in the browsers listed below should be reported as a bug:\n\n- Internet Explorer 10+\n- Microsoft Edge 14+\n- Safari 6+\n- Firefox (Current - 1) and Current versions\n- Chrome (Current - 1) and Current versions\n- Opera (Current - 1) and Current versions\n- Safari iOS 7.0+\n- Android 6.0+\n\n(Current - 1) and Current means that we support the current stable version of the browser and the version that precedes it.\n\n\n\n## Bugs and feature requests\n\nHave a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fissues\u002Fnew).\n\n\n\n## Community\n\nGet updates on Froala Design Blocks' development and chat with the project maintainers and community members:\n\n- Follow [@froala on Twitter](https:\u002F\u002Ftwitter.com\u002Ffroala)\n- Read and subscribe to [The Official Froala Blog](https:\u002F\u002Fwww.froala.com\u002Fblog)\n- Check the [Official Website](https:\u002F\u002Fwww.froala.com\u002Fdesign-blocks)\n- Join us [on Facebook](https:\u002F\u002Fwww.facebook.com\u002Ffroala\u002F)\n- [Google+](https:\u002F\u002Fplus.google.com\u002F+Froala\u002F)\n- [Pinterest](https:\u002F\u002Fpinterest.com\u002Ffroala\u002F)\n\n\n\n## Contributing guidelines\n\nAll contributions are more than welcomed. Contributions may close an issue, fix a bug (reported or not reported), add new design blocks, improve the existing code, add new feature, and so on. In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. [Read the full Code of Conduct](https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fdev\u002FCODE_OF_CONDUCT.md).\n\nThe `dev` branch is the default and base branch for the project. It is used for development and all Pull Requests should go there. Please make sure not to commit the `dist` folder in the `dev` branch.\n\n#### Development\n\nThe project needs to be compiled, therefore the files in the `src` folder are those we'll be developing on. Don't make changes in the `dist` or `demo` folders as they will be overwritten when `src` is compiled.\n\n1. Get code\n\n```bash\ngit clone git@github.com:froala\u002Fdesign-blocks.git\ncd design-blocks\n```\n\n2. Install dependencies and run project\n\n```bash\nnpm install\nnpm run start\n```\n\nWith the gulp server running, the project is available at the following address [localhost:8001](http:\u002F\u002Flocalhost:8001\u002F). The `src` files are automatically compiled when changes have been made.\n\n#### Versioning\nThrough the development of new versions, we're going use the Semantic Versioning: https:\u002F\u002Fdocs.npmjs.com\u002Fgetting-started\u002Fsemantic-versioning. Example: 1.0.0.\n- Major release: increment the first digit and reset middle and last digits to zero. Introduces major changes that might break backward compatibility. E.g. 2.0.0\n- Minor release: increment the middle digit and reset last digit to zero. It would fix bugs and also add new features without breaking backward compatibility. E.g. 1.1.0\n- Patch release: increment the third digit. It would fix bugs and keep backward compatibility. E.g. 1.0.1\n\n\n\n## Contributors\n\nSpecial thanks to everyone who contributed to getting the Froala Design Blocks to the current state.  🙏\n\n- [Creative Tim](https:\u002F\u002Fwww.creative-tim.com\u002F) ❤️ - design blocks PSDs, help with typography and SVGs for shapes\n- [Reaction](https:\u002F\u002Freaction.ca) - design blocks Sketches:\n- [m5o](https:\u002F\u002Fgithub.com\u002Fm5o) - help with update to Bootstrap 4\n- [Pexels](https:\u002F\u002Fwww.pexels.com\u002F) - photos\n- [Undraw](https:\u002F\u002Fundraw.co\u002F) - illustrations\n- [FeatherIcons](https:\u002F\u002Ffeathericons.com\u002F) - icons\n\n## Copyright and License\n\nCode and documentation copyright 2018 [Froala Labs](https:\u002F\u002Fwww.froala.com\u002F). Code released under the [Froala Open Web Design License](https:\u002F\u002Fgithub.com\u002Ffroala\u002Fdesign-blocks\u002Fblob\u002Fmaster\u002FLICENSE).\n\nGraphics license:\n  - shapes: free to use by [Creative Tim](https:\u002F\u002Fwww.creative-tim.com\u002F)\n  - photos: free under the creative license from [Pexels](https:\u002F\u002Fwww.pexels.com\u002Fphoto-license\u002F)\n  - illustrations: free under the creative license from [Undraw](https:\u002F\u002Fundraw.co\u002Flicense)\n  - icons: free under MIT license [FeatherIcons](https:\u002F\u002Ffeathericons.com\u002F)\n","Froala Design Blocks 是一套基于Bootstrap的170多个设计模块，用于快速构建现代化网站。该项目的核心功能包括响应式设计、易于集成和丰富的模板选择，涵盖了从导航栏到页脚的各种组件，支持HTML5和Material Design风格。所有设计块都遵循现代网页设计理念，并且与Bootstrap 4兼容，使得开发者可以轻松地将这些预设模块整合进自己的项目中，从而加速开发流程。适用于需要快速搭建美观且功能齐全网站的各种场景，无论是个人博客还是企业官网都能找到合适的解决方案。","2026-06-11 03:34:51","high_star"]