Profile Card Neo Brutalism Design Using HTML and CSS

on
Profile Card Neo Brutalism Design Using HTML and CSS

Profile Card Neo Brutalism Design Using HTML and CSS

Create a modern, responsive profile card design in the neo-brutalist style using HTML and CSS, featuring bold colors, thick borders, and heavy shadows for a raw, unpolished aesthetic. This implementation focuses on striking visuals, accessible design, and maintainable code, ideal for showcasing user profiles in web interfaces.

Profile image of Alaina Wick

Alaina Wick

Front-end Developer

Sodales accumsan ligula. Aenean sed diam tristique, fermentum mi nec, ornare arcu.

View Profile
Profile image of Jordan Lee

Jordan Lee

UI/UX Designer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

View Profile

Prerequisites

  • Basic HTML and CSS knowledge
  • A code editor (e.g., VS Code)

Part 1: Profile Card Neo Brutalism Design

Step 1: HTML Structure (index.html)

Create a semantic HTML structure for the neo-brutalist profile cards with a container, header with avatar, and content with name, title, description, and button.

<div class="neo-profile-container" role="region" aria-label="Neo-brutalist profile cards">
    <div class="neo-profile-card" id="profile-card-primary">
        <div class="neo-profile-header">
            <div class="neo-profile-avatar">
                <img src="https://api.dicebear.com/7.x/thumbs/svg?seed=Alaina" alt="Profile image of Alaina Wick" />
            </div>
        </div>
        <div class="neo-profile-content">
            <h2 class="neo-profile-name">Alaina Wick</h2>
            <h3 class="neo-profile-title">Front-end Developer</h3>
            <p class="neo-profile-description">Sodales accumsan ligula. Aenean sed diam tristique, fermentum mi nec, ornare arcu.</p>
            <a href="#" class="neo-profile-button" aria-label="View Alaina Wick's profile">View Profile</a>
        </div>
    </div>
    <div class="neo-profile-card secondary" id="profile-card-secondary">
        <div class="neo-profile-header secondary">
            <div class="neo-profile-avatar">
                <img src="https://api.dicebear.com/7.x/thumbs/svg?seed=Jordan" alt="Profile image of Jordan Lee" />
            </div>
        </div>
        <div class="neo-profile-content">
            <h2 class="neo-profile-name">Jordan Lee</h2>
            <h3 class="neo-profile-title">UI/UX Designer</h3>
            <p class="neo-profile-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
            <a href="#" class="neo-profile-button" aria-label="View Jordan Lee's profile">View Profile</a>
        </div>
    </div>
</div>

Step 2: Core CSS Implementation (styles.css)

Style the profile cards and their elements with neo-brutalist aesthetics: bold colors, thick borders, heavy shadows, and a monospace font. Include Google Fonts for consistent typography.

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

:root {
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --white: #ffffff;
    --primary-600: #2563eb;
    --primary-500: #3b82f6;
    --accent-500: #f59e0b;
    --highlight-500: #ff006e;
    --highlight-200: #ffe600;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --transition: 0.2s ease;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-neo: 8px 8px 0 var(--gray-900);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Space Mono', monospace;
}

.neo-profile-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
    max-width: 400px;
}

.neo-profile-card {
    width: 320px;
    background: var(--white);
    border: 4px solid var(--gray-900);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-neo);
    position: relative;
    overflow: hidden;
}

.neo-profile-card.secondary {
    border-color: var(--accent-500);
}

.neo-profile-header {
    height: 140px;
    background: var(--highlight-200);
    border-bottom: 4px solid var(--gray-900);
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.neo-profile-header.secondary {
    background: var(--primary-500);
}

.neo-profile-avatar {
    width: 100px;
    height: 100px;
    background: var(--white);
    border: 4px solid var(--gray-900);
    border-radius: 50%;
    transform: translateY(50%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.neo-profile-card.secondary .neo-profile-avatar {
    border-color: var(--accent-500);
}

.neo-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid var(--gray-900);
    border-radius: 50%;
}

.neo-profile-content {
    padding: 60px var(--spacing-md) var(--spacing-lg);
    text-align: center;
}

.neo-profile-name {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.neo-profile-title {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--gray-700);
    margin: var(--spacing-xs) 0 var(--spacing-md);
    font-weight: 400;
}

.neo-profile-description {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--gray-900);
    border: 2px dashed var(--gray-900);
    padding: var(--spacing-sm);
    background: var(--gray-200);
    margin-bottom: var(--spacing-md);
}

.neo-profile-card.secondary .neo-profile-description {
    border-color: var(--accent-500);
}

.neo-profile-button {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--highlight-500);
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    border: 3px solid var(--gray-900);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-neo);
    transition: all var(--transition);
}

.neo-profile-card.secondary .neo-profile-button {
    background: var(--accent-500);
    border-color: var(--accent-500);
}

.neo-profile-button:hover,
.neo-profile-button:focus {
    background: var(--white);
    color: var(--highlight-500);
    border-color: var(--highlight-500);
    box-shadow: none;
    transform: translate(2px, 2px);
}

.neo-profile-card.secondary .neo-profile-button:hover,
.neo-profile-card.secondary .neo-profile-button:focus {
    color: var(--accent-500);
    border-color: var(--accent-500);
    background: var(--white);
}

.neo-profile-button:focus {
    outline: none;
    box-shadow: 2px 2px 0 var(--accent-500), 0 0 0 3px var(--primary-600);
}

@media (max-width: 640px) {
    .neo-profile-container {
        gap: var(--spacing-sm);
    }

    .neo-profile-card {
        width: 100%;
        max-width: 280px;
    }

    .neo-profile-header {
        height: 120px;
    }

    .neo-profile-avatar {
        width: 80px;
        height: 80px;
        border-width: 3px;
    }

    .neo-profile-content {
        padding: 50px var(--spacing-sm) var(--spacing-md);
    }

    .neo-profile-name {
        font-size: 1.125rem;
    }

    .neo-profile-title,
    .neo-profile-description,
    .neo-profile-button {
        font-size: 0.75rem;
    }
}

Explanation

  • Layout: Profile cards are housed in a flexbox container (.neo-profile-container) with a maximum width, stacking vertically. Each card (.neo-profile-card) includes a header with an avatar (.neo-profile-header, .neo-profile-avatar) and content with name, title, description, and button (.neo-profile-content). The avatar overlaps the header and content for a layered effect.
  • Styling: Cards use a white background with thick black (4px) or orange (--accent-500 for secondary) borders, heavy shadows (--shadow-neo), and a monospace font (Space Mono) for text elements. Headers use yellow (--highlight-200) or blue (--primary-500) backgrounds. The avatar is circular with a white background and black/orange borders. Buttons use pink (--highlight-500) or orange, with a dashed border for descriptions.
  • Interactivity: The button (.neo-profile-button) has hover and focus states that invert colors (white background, pink/orange text and border) and remove the shadow, with a slight transform for tactility. No JavaScript is needed for this static design.
  • Visual Feedback: Hovering or focusing the button shifts it (translate(2px, 2px)) with no shadow and a color swap. Focus adds a dual shadow (accent and primary) for accessibility. The avatar’s overlap and dashed description border enhance the neo-brutalist aesthetic.
  • Responsiveness: A media query (@media (max-width: 640px)) adjusts card width to 100% (max 280px), reduces header height, avatar size, padding, and font sizes for mobile usability, maintaining the neo-brutalist aesthetic.
  • Accessibility: role="region" and aria-label on the container provide context for screen readers. Images have descriptive alt texts, and buttons have aria-label for clarity. High contrast ratios (4.5:1 minimum) and bold typography ensure readability. The button is keyboard-focusable with clear focus styles.
UX Tip: Neo-brutalist profile cards should feel bold and tactile with heavy shadows, stark contrasts, and layered elements. Ensure accessibility with ARIA attributes, descriptive alt texts, and keyboard support. In production, add dynamic data, interactive elements (e.g., click handlers), or social links and test across devices.

Accessibility Features

  • Use role="region" and aria-label for semantic structure
  • Include descriptive alt texts for images
  • Provide aria-label on buttons for screen readers
  • Ensure high contrast ratios for text, borders, and backgrounds (4.5:1 minimum)
  • Use bold, readable typography (monospace for neo-brutalism)

Golden Rules

  • Use CSS variables for consistent theming
  • Implement bold borders and heavy shadows for neo-brutalist style
  • Ensure accessibility with ARIA and descriptive attributes
  • Optimize for mobile with responsive design

Conclusion

A professional neo-brutalist profile card should embrace raw, bold aesthetics, provide clear visual hierarchy, remain responsive, and follow accessibility guidelines. This solution uses HTML and CSS for striking profile cards with primary and secondary variants, featuring heavy shadows, thick borders, a monospace font, and vibrant colors. Experiment with colors, shadow offsets, or add features like dynamic data or social media links. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!

Location: Pune, Maharashtra, India

Comments

Post a Comment