25+ Stunning CSS Infographics (Free Code + Examples)
Enjoy this 100% free and open source HTML and Pure CSS infographic code examples. CSS Infographics are a great way to go.
1. Responsive Infographic/ CSS Variables, Grid Layout
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: November 15, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-variables, css-grid, sass, jade, clip-path
2. Responsive Infographic/ CSS Variables, Grid
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: November 12, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-variables, jade, css-grid, mask, sass
3. Responsive CSS Infographic With CSS Variables, Calc() And Flexbox (no Edge Support)
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: November 24, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: sass, css-variables, jade, calc, flexbox
4. Responsive Infographic/ CSS Variables, Grid Layout (no Edge Support)
No Edge support due to CSS variable + calc() bugs. Original design idea from Shutterstock: Background photo: Kreator at Rockharz 2018 by Kommodore Johnsen - Rock in Raw
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: November 16, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-grid, css-variables, jade, sass
5. Responsive Infographic/ CSS Variables, Grid, Clipping And Masking
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: November 13, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-variables, css-grid, clip-path, mask, jade
6. Responsive CSS Infographic/ CSS Variables, Grid Layout
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: November 14, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-variables, css-grid, sass, jade, calc
7. Responsive Infographic With CSS Variables, Flexbox And Clip-path
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: November 16, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-variables, clip-path, flexbox
8. Responsive Infographic/ CSS Variables, Calc(), Grid Layout (no Edge Support)
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: November 11, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-variables, css-grid, calc, sass, jade
9. Responsive Infographic/ CSS Variables, Grid Layout
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: November 14, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-variables, css-grid, jade, sass, calc
10. Infographic With CSS Grid And Variables
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: August 14, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-variables, css-grid, jade, calc, sass
11. Responsive Infographic With CSS Variables And Flexbox Tricks
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo, Youtube Tutorial
Created on: June 20, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: flexbox, css-variables, sass, jade
12. Responsive Infographic With CSS Variables
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: June 20, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css-variables, jade, sass, calc
13. Pure CSS Responsive Infographics
Author: Prasad D. (prasad-d)
Links: Source Code / Demo
Created on: May 26, 2019
Made with: HTML, SCSS
Tags: infographic, css, ui, graphics, responsive
14. CSS-infographics
Author: Pasi Lampinen (palampinen)
Links: Source Code / Demo
Created on: December 16, 2016
Made with: HTML, SCSS
15. IPhone Price Comparison Chart
Watch interactive video on Scrimba: https://scrimba.com/p/pEgDAM/cRB22cV
Author: Comehope (comehope)
Links: Source Code / Demo
Made with: HTML, CSS
16. Types Of Coffee | Pure CSS
Coffee Infographic on the types of coffee - all done in pure CSS! What is your favorite type of coffee? Mine is Americano and Cappuccino :)
Author: Julie Park (juliepark)
Links: Source Code / Demo
Created on: May 24, 2018
Made with: HTML, SCSS
Tags: coffee, pure-css, drawing, infographic, css
17. Infographic Smooth Cards View
Author: Sergiu Mocian (serjuiced)
Links: Source Code / Demo
Created on: February 13, 2016
Made with: HTML, CSS
18. Colorful Responsive Card
Colorful Responsive Card
Author: Ceren Kurucu (Cerennkurucuu)
Links: Source Code / Demo
Created on: May 25, 2020
Made with: HTML, CSS
Tags: responsive, card, colorful, infographic, responsive card
19. İnfographic HTML-CSS
Author: Ceren Kurucu (Cerennkurucuu)
Links: Source Code / Demo
Created on: May 22, 2020
Made with: HTML, CSS
Tags: infographic, html, css, banner
20. DF Blog: Responsive Infographic
Author: miranda (mirandalwashburn)
Links: Source Code / Demo
Created on: March 9, 2020
Made with: HTML, CSS
Tags: infographic, blog, article, data, charts
21. 100 Days CSS -- No 005 - Infographic
Simple coffee infographic made with pure CSS.
Author: Gina Corsiglia (gcorsiglia)
Links: Source Code / Demo
Created on: January 31, 2019
Made with: HTML, SCSS, JS
Tags: css, 100 days of css, infographic
22. Analytics Sample
Another try on animations and no-mockups-prior exercise.
Author: Meg Wehrlen (heymalice)
Links: Source Code / Demo
Created on: May 23, 2017
Made with: HTML, CSS
Tags: analytics, infographic, css
23. Interactive Infographic | SVG & Vue.js | Medium Article
Interactive infographic for this tutorial: https://medium.com/coding-artist/interactive-infographic-using-svg-vue-js-357a3fb69079#.nq7n5quep
Author: Mike Mangialardi (mikemang)
Links: Source Code / Demo
Created on: March 8, 2017
Made with: HTML, SCSS, JS
Tags: infographic, svg, poster, blog
24. Way Of The Order
Way Of The Order for Flexoprint.com.ua
Author: Alex (strange76)
Links: Source Code / Demo
Created on: October 25, 2017
Made with: HTML, CSS
Tags: webstudio, astralink, infographic, flexoprint, web studio astra-link
More Awesome Lists:
Share: