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

Demo image: Infographic

Author

  • Ashton

Made with

  • HTML / CSS

About a code

Infographic

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: CSS Coffee Infographic

Author

  • crystal

Made with

  • HTML / CSS

About a code

CSS Coffee Infographic

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Responsive Sections Layout

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

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: -

Demo image: Pure CSS Circles Infographic

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Circles Infographic

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

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: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

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: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

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: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

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: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

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: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

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: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

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: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

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: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive Infographic

Responsive infographic with CSS variables, grid.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Infographic Banners with CSS Variables

Author

  • Ana Tudor

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: -

Demo image: Infographic in HTML and CSS

Author

  • Ana Tudor

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: -

Demo image: Vertical Items Infographic with CSS vars, Clipping and Masking

Author

  • Ana Tudor

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: -

Demo image: Responsive Infographic with CSS Variables

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Responsive Infographic with CSS Variables

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Infographic

Author

  • Ana Tudor

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: -