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

Demo image: Infographic

Creator

  • Ashton

Programming language

  • HTML / CSS

Information a code

Infographic

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: CSS Coffee Infographic

Creator

  • crystal

Programming language

  • HTML / CSS

Information a code

CSS Coffee Infographic

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information a code

Responsive Sections Layout

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: Responsive Infographic

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information a code

Responsive Infographic

Responsive infographic with clean markup, CSS grid & variables.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: Pure CSS Circles Infographic

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information a code

Pure CSS Circles Infographic

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: Responsive Infographic

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Responsive Infographic

Responsive infographic with CSS variables, calc() and flexbox.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Infographic

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Responsive Infographic

Responsive infographic with CSS variables, grid layout. Nosupport due to CSS variable + calc() bugs.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Infographic

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Responsive Infographic

Responsive infographic with CSS variables, flexbox and clip-path.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Infographic

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Responsive Infographic

Responsive infographic with CSS variables, grid layout.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Infographic

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Responsive Infographic

Responsive infographic with CSS variables, grid layout.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Infographic

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Responsive Infographic

Responsive infographic with CSS variables and grid layout.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Infographic

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Responsive Infographic

Responsive infographic with CSS variables, grid, clipping and masking.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Infographic

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Responsive Infographic

Responsive infographic with CSS variables, calc(), grid layout.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Infographic

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Responsive Infographic

Responsive infographic with CSS variables, grid.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Infographic Banners with CSS Variables

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information a code

Responsive Infographic Banners with CSS Variables

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: Infographic in HTML and CSS

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Infographic in HTML and CSS

Infographic with CSS grid and variables.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information a code

Vertical Items Infographic with CSS vars, Clipping and Masking

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: Responsive Infographic with CSS Variables

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Responsive Infographic with CSS Variables

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Infographic

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Responsive Infographic

Responsive infographic with CSS variables and flexbox tricks.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies: