Profile Card Component

A profile card is visually small, but it still represents structured content: a person, an avatar, a name, a location, social links, and sometimes profile statistics. A common beginner mistake is building the entire component with anonymous <div> elements. The design may look correct, but the markup becomes harder to read, less meaningful for assistive technologies, and more difficult to reuse in a portfolio, team page, or user directory.

Semantic structure is especially important for simple components because there is no complex JavaScript to hide behind. The quality of the project is visible in the HTML and CSS. A clean profile card should make it obvious what the component represents and which parts of the content are headings, links, images, and grouped statistics.

Problematic approach:

          <div class="card">
            <div class="image">
              <img src="/avatar.jpg" />
            </div>

            <div class="name">Victor Crest</div>
            <div class="place">London</div>

            <div class="numbers">
              <div>80K Followers</div>
              <div>803K Likes</div>
              <div>1.4K Photos</div>
            </div>
          </div>

This markup is visually usable, but it does not communicate structure well. The image has no alternative text, the name is not a heading, and the statistics are not grouped in a meaningful way.

Better approach:

          <article class="profile-card" aria-labelledby="profile-name">
            <img
              class="profile-card__avatar"
              src="/avatar.jpg"
              alt="Victor Crest"
            />

            <div class="profile-card__body">
              <h2 id="profile-name" class="profile-card__name">
                Victor Crest
                <span class="profile-card__age">26</span>
              </h2>

              <p class="profile-card__location">London</p>
            </div>

            <ul class="profile-card__stats" aria-label="Profile statistics">
              <li>
                <strong>80K</strong>
                <span>Followers</span>
              </li>
              <li>
                <strong>803K</strong>
                <span>Likes</span>
              </li>
              <li>
                <strong>1.4K</strong>
                <span>Photos</span>
              </li>
            </ul>
          </article>

Pay attention to: Use semantic HTML even for small components. A profile card can be an article, the person’s name should be a heading, the avatar needs useful alt text, and statistics should be grouped in a predictable structure.

Many profile cards place the avatar between a decorative header area and the card body. Beginners often position the avatar with random margins such as margin-top: -47px or fixed pixel values that only work for one exact design size. The card may look correct on desktop but break on mobile, high-density screens, or when the avatar size changes.

Instead of guessing numbers, define the avatar size as a CSS custom property and calculate the overlap from that value. This makes the design easier to adjust later. If the avatar changes from 96px to 112px, the layout should still work without rewriting multiple unrelated CSS rules.

Problematic CSS:

          .profile-card img {
            width: 96px;
            height: 96px;
            border-radius: 50%;
            margin-top: -48px;
            margin-left: 102px;
          }

This depends on fixed spacing. If the card width changes, the avatar may no longer stay centered. If the image size changes, the negative margin becomes wrong.

Better CSS:

          .profile-card {
            --avatar-size: 96px;
            --avatar-border: 5px;

            width: min(100%, 350px);
            border-radius: 18px;
            overflow: hidden;
            background: #ffffff;
            text-align: center;
          }

          .profile-card__cover {
            min-height: 140px;
            background-image: url("./images/bg-pattern-card.svg");
            background-size: cover;
            background-position: center;
          }

          .profile-card__avatar {
            width: var(--avatar-size);
            height: var(--avatar-size);
            border-radius: 50%;
            border: var(--avatar-border) solid #ffffff;
            display: block;
            margin: calc((var(--avatar-size) / -2) - var(--avatar-border)) auto 0;
            object-fit: cover;
          }

HTML structure:

          <article class="profile-card">
            <div class="profile-card__cover" aria-hidden="true"></div>

            <img
              class="profile-card__avatar"
              src="/./images/avatar-victor.jpg"
              alt="Victor Crest"
            />

            <div class="profile-card__body">
              ...
            </div>
          </article>

Pay attention to: Avoid fragile layout numbers. Use custom properties, centered block layout, and calculated spacing so the avatar placement remains stable across screen sizes.

Profile card components often look simple in a desktop screenshot, but the real challenge is making the card feel balanced on narrow screens. A common mistake is setting a fixed width, fixed background positions, and large spacing that works only for the design preview. On mobile, the card may touch the screen edges, the background patterns may sit in the wrong place, or the stats row may feel too cramped.

A good profile card should be built with a mobile-first layout. Start with a card that fits comfortably inside a small viewport, then add desktop refinements only when needed. This approach is especially useful for Frontend Mentor-style components, where the design often includes both mobile and desktop screenshots.

Problematic CSS:

          body {
            width: 1440px;
            height: 100vh;
          }

          .profile-card {
            width: 350px;
            margin: 170px auto;
          }

          .profile-card__stats {
            display: flex;
          }

This locks the page to a desktop design width. It may create horizontal scrolling or awkward positioning on phones.

Better mobile-first CSS:

          body {
            min-height: 100vh;
            margin: 0;
            display: grid;
            place-items: center;
            padding: 24px;
            background-color: hsl(185, 75%, 39%);
            font-family: "Kumbh Sans", sans-serif;
          }

          .profile-card {
            width: min(100%, 350px);
            border-radius: 18px;
            overflow: hidden;
            background-color: #ffffff;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
          }

          .profile-card__stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border-top: 1px solid hsl(227, 10%, 88%);
          }

          @media (min-width: 768px) {
            body {
              padding: 48px;
            }

            .profile-card {
              transform: translateY(-8px);
            }
          }

Responsive stat spacing:

          .profile-card__stats li {
            padding: 24px 12px;
            text-align: center;
          }

          .profile-card__stats strong {
            display: block;
            font-size: 1.125rem;
          }

          .profile-card__stats span {
            display: block;
            margin-top: 6px;
            font-size: 0.7rem;
            letter-spacing: 0.1em;
          }

Pay attention to: Do not build the desktop screenshot first and patch mobile later. Use flexible width, viewport-safe padding, and mobile-first spacing so the card looks intentional on every screen.

Some profile card versions include social media links, contact buttons, or follower statistics. A frequent mistake is making these items look clickable while using plain text or icons without accessible labels. This creates a confusing experience: mouse users may understand the hover effect, but keyboard users and screen-reader users may not know what the link does.

If an item leads somewhere, it should be an anchor. If it performs an action, it should be a button. If it is only a statistic, it should be text. This distinction matters because good UI is not only about visuals; it is also about predictable interaction.

Problematic approach:

          <div class="socials">
            <span class="icon twitter"></span>
            <span class="icon github"></span>
            <span class="icon linkedin"></span>
          </div>

These icons may look like links, but they are not keyboard-focusable and do not communicate their purpose.

Better approach:

          <nav class="profile-card__socials" aria-label="Social links">
            <a
              href="https://github.com/username"
              target="_blank"
              rel="noreferrer"
              aria-label="GitHub profile"
            >
              <img src="/./icons/github.svg" alt="" aria-hidden="true" />
            </a>

            <a
              href="https://www.linkedin.com/in/username"
              target="_blank"
              rel="noreferrer"
              aria-label="LinkedIn profile"
            >
              <img src="/./icons/linkedin.svg" alt="" aria-hidden="true" />
            </a>
          </nav>

Accessible hover and focus styles:

          .profile-card__socials a {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            transition: transform 180ms ease, background-color 180ms ease;
          }

          .profile-card__socials a:hover,
          .profile-card__socials a:focus-visible {
            transform: translateY(-2px);
            background-color: hsl(185, 75%, 94%);
            outline: 2px solid hsl(185, 75%, 39%);
            outline-offset: 3px;
          }

Pay attention to: Hover effects are not enough. Make social links real anchors, add readable focus states, and provide accessible labels for icon-only links.

A profile card is a great place to practice clean CSS architecture because the component has a small but complete design system: background color, card color, muted text, title text, border color, font family, radius, and spacing. Beginners often write these values directly inside each selector. The card works, but customizing it later becomes harder because the same colors and sizes are repeated in many places.

A cleaner approach is to define CSS custom properties or SCSS variables at the top of the stylesheet. This makes the component easier to theme and easier to compare with a design guide. It also helps when building more than one profile card style, such as a compact version, a team-card version, or a dark-mode version.

Problematic CSS:

          .profile-card {
            background: white;
            border-radius: 18px;
          }

          .profile-card h2 {
            color: hsl(229, 23%, 23%);
            font-size: 18px;
          }

          .profile-card p {
            color: hsl(227, 10%, 46%);
            font-size: 14px;
          }

          .profile-card span {
            color: hsl(227, 10%, 46%);
          }

These values are repeated and not named. If the design changes, you need to hunt through the whole stylesheet.

Better CSS custom properties:

          :root {
            --color-primary: hsl(185, 75%, 39%);
            --color-text-strong: hsl(229, 23%, 23%);
            --color-text-muted: hsl(227, 10%, 46%);
            --color-border: hsl(227, 10%, 88%);
            --color-surface: #ffffff;

            --font-main: "Kumbh Sans", sans-serif;

            --radius-card: 18px;
            --space-card: 24px;
          }

          .profile-card {
            background: var(--color-surface);
            border-radius: var(--radius-card);
            font-family: var(--font-main);
          }

          .profile-card__name {
            color: var(--color-text-strong);
          }

          .profile-card__age,
          .profile-card__location,
          .profile-card__stats span {
            color: var(--color-text-muted);
          }

          .profile-card__stats {
            border-top: 1px solid var(--color-border);
          }

SCSS-style alternative:

          $color-primary: hsl(185, 75%, 39%);
          $color-text-strong: hsl(229, 23%, 23%);
          $color-text-muted: hsl(227, 10%, 46%);
          $color-border: hsl(227, 10%, 88%);
          $radius-card: 18px;

          .profile-card {
            border-radius: $radius-card;

            &__name {
              color: $color-text-strong;
            }

            &__location {
              color: $color-text-muted;
            }
          }

Pay attention to: Keep design values centralized. CSS custom properties or SCSS variables make the component easier to maintain, customize, and reuse.