Collection of free HTML and CSS profile card code examples.

  1. CSS Cards
  2. Bootstrap Profiles

Creator

  • FrankieDoodie

Programming language

  • HTML / CSS

Information the code

Profile Card UI Design

Profile card UI design with cool hover effect.

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

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css

Demo image: Awesome Profile Card

Creator

  • Advanced Develope

Programming language

  • HTML / CSS

Information the code

Awesome Profile Card

Simple & awesome profile card in HTML and CSS. Included: name, verification status, online status, avatar, role and action buttons.

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

Responsive: yes

Dependencies: bootstrap.css

Creator

  • Jove Angelevski

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

Profile Card

Profile card with animation in HTML, CSS and JS.

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

Responsive: yes

Dependencies: font-awesome.css

Creator

  • neil pearce

Programming language

  • HTML / CSS (SCSS)

Information the code

UI Profile Cards

UI profile cards with CSS transition effects on hover.

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

Responsive: no

Dependencies: font-awesome.css

Demo image: CSS Profile Card

Creator

  • Byurhan Beyzat

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Profile Card

CSS profile card UI with light and dark themes.

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

Responsive: no

Dependencies: font-awesome.css

Creator

  • Genaro Colusso

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Profile Card UI

HTML and CSS animated profile card UI.

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

Responsive: no

Dependencies: devicons.css

Demo image: Profile Card

Creator

  • Matthias Martin

Programming language

  • HTML / CSS (SCSS)

Information the code

Profile Card

Simple profile card in HTML and CSS.

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

Responsive: no

Dependencies:

Creator

  • Emil Devantie Brockdorff

Programming language

  • HTML / CSS

Information the code

Material Design: Profile Card

Pure CSS Material Design profile card.

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

Responsive: yes

Dependencies: font-awesome.css

Demo image: 90's Profile Card

Creator

  • Ondřej Bárta

Programming language

  • HTML / CSS

Information the code

90’s Profile Card

90’s profile card in HTML and CSS.

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

Responsive: no

Dependencies: