Collection of hand-picked free HTML and CSS infographic code examples. Update of December 2018. 7 new items.

Links
Made with
- HTML / CSS
About a code
Infographic
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS
About a code
CSS Coffee Infographic
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Responsive Sections Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Responsive Infographic
Responsive infographic with clean markup, CSS grid & variables.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Pure CSS Circles Infographic
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Responsive Infographic
Responsive infographic with CSS variables, calc()
and flexbox
.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Responsive Infographic
Responsive infographic with CSS variables, grid layout. Nosupport due to CSS variable + calc()
bugs.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Responsive Infographic
Responsive infographic with CSS variables, flexbox
and clip-path
.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Responsive Infographic
Responsive infographic with CSS variables, grid layout.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Responsive Infographic
Responsive infographic with CSS variables, grid layout.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Responsive Infographic
Responsive infographic with CSS variables and grid layout.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Responsive Infographic
Responsive infographic with CSS variables, grid
, clipping and masking.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Responsive Infographic
Responsive infographic with CSS variables, calc()
, grid layout.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Responsive Infographic
Responsive infographic with CSS variables, grid
.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Responsive Infographic Banners with CSS Variables
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Infographic in HTML and CSS
Infographic with CSS grid
and variables.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Vertical Items Infographic with CSS vars, Clipping and Masking
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Responsive Infographic with CSS Variables
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Made with
- HTML (Pug) / CSS (SCSS)
About the code
Responsive Infographic
Responsive infographic with CSS variables and flexbox
tricks.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -