Skip to main content

Critical P0 Templates - Production Specifications

Essential page layouts for enterprise applications

T7: Settings Page Template​

Purpose: User and organization settings management

Test Criteria:

composition:
  - sidebar_nav: vertical tabs
  - main_content: form sections
  - sticky_footer: save/cancel
  
layout:
  - sidebar: 240px fixed width
  - content: flexible remaining space
  - max_width: 1200px total
  
accessibility:
  - breadcrumb: navigation context
  - form_sections: fieldset grouping
  - save_state: unsaved changes warning

Layout Structure:

<div class="settings-layout">
  <!-- Header -->
  <header class="navbar" role="banner">
    <div class="navbar__content">
      <div class="navbar__left">
        <img src="/logo.svg" alt="CODITECT" class="navbar__logo" />
        <nav class="navbar__nav">
          <a href="/dashboard" class="navbar__link">Dashboard</a>
          <a href="/projects" class="navbar__link">Projects</a>
          <a href="/settings" class="navbar__link navbar__link--active">Settings</a>
        </nav>
      </div>
      <div class="navbar__right">
        <button class="button button--ghost">
          <img src="/user.jpg" alt="" class="avatar avatar--sm" />
        </button>
      </div>
    </div>
  </header>
  
  <!-- Main container -->
  <div class="settings-container">
    <!-- Sidebar Navigation -->
    <aside class="settings-sidebar" role="navigation" aria-label="Settings navigation">
      <nav class="settings-nav">
        <h2 class="settings-nav__title">Settings</h2>
        
        <div class="settings-nav__section">
          <div class="settings-nav__section-title">Personal</div>
          <a href="#profile" class="settings-nav__link settings-nav__link--active">
            <svg class="settings-nav__icon" width="16" height="16">
              <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="currentColor"/>
            </svg>
            Profile
          </a>
          <a href="#account" class="settings-nav__link">
            <svg class="settings-nav__icon" width="16" height="16">
              <path d="M12 15v2m-6 4h12" stroke="currentColor"/>
            </svg>
            Account
          </a>
          <a href="#security" class="settings-nav__link">
            <svg class="settings-nav__icon" width="16" height="16">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor"/>
            </svg>
            Security
          </a>
        </div>
        
        <div class="settings-nav__section">
          <div class="settings-nav__section-title">Organization</div>
          <a href="#team" class="settings-nav__link">
            <svg class="settings-nav__icon" width="16" height="16">
              <path d="M17 21v-2a4 4 0 00-4-4H5" stroke="currentColor"/>
            </svg>
            Team
          </a>
          <a href="#billing" class="settings-nav__link">
            <svg class="settings-nav__icon" width="16" height="16">
              <rect x="1" y="4" width="22" height="16" rx="2" stroke="currentColor"/>
            </svg>
            Billing
          </a>
          <a href="#integrations" class="settings-nav__link">
            <svg class="settings-nav__icon" width="16" height="16">
              <path d="M17 2l4 4-4 4M7 2L3 6l4 4" stroke="currentColor"/>
            </svg>
            Integrations
          </a>
        </div>
      </nav>
    </aside>
    
    <!-- Main Content -->
    <main class="settings-main">
      <!-- Page Header -->
      <div class="settings-header">
        <div class="settings-header__content">
          <h1 class="settings-header__title">Profile Settings</h1>
          <p class="settings-header__description">
            Manage your personal information and how others see you
          </p>
        </div>
      </div>
      
      <!-- Form Content -->
      <form class="settings-form">
        <!-- Photo Section -->
        <section class="settings-section">
          <div class="settings-section__header">
            <h2 class="settings-section__title">Profile Photo</h2>
            <p class="settings-section__description">
              This will be displayed on your profile
            </p>
          </div>
          <div class="settings-section__content">
            <div class="profile-photo">
              <img src="/user.jpg" alt="Profile" class="avatar avatar--lg" />
              <div class="profile-photo__actions">
                <button type="button" class="button button--secondary">
                  Change Photo
                </button>
                <button type="button" class="button button--ghost">
                  Remove
                </button>
              </div>
            </div>
          </div>
        </section>
        
        <!-- Personal Info Section -->
        <section class="settings-section">
          <div class="settings-section__header">
            <h2 class="settings-section__title">Personal Information</h2>
            <p class="settings-section__description">
              Update your basic information
            </p>
          </div>
          <div class="settings-section__content">
            <div class="form-grid">
              <div class="form-field">
                <label for="first-name" class="label">
                  First Name
                  <span class="label__required">*</span>
                </label>
                <input 
                  type="text" 
                  id="first-name" 
                  class="input"
                  value="Alice"
                  required 
                />
              </div>
              
              <div class="form-field">
                <label for="last-name" class="label">
                  Last Name
                  <span class="label__required">*</span>
                </label>
                <input 
                  type="text" 
                  id="last-name" 
                  class="input"
                  value="Johnson"
                  required 
                />
              </div>
            </div>
            
            <div class="form-field">
              <label for="email" class="label">
                Email Address
                <span class="label__required">*</span>
              </label>
              <input 
                type="email" 
                id="email" 
                class="input"
                value="alice@example.com"
                required 
              />
              <span class="form-field__help">
                We'll use this for account notifications
              </span>
            </div>
            
            <div class="form-field">
              <label for="bio" class="label">Bio</label>
              <textarea 
                id="bio" 
                class="input" 
                rows="4"
                placeholder="Tell us about yourself..."
              ></textarea>
            </div>
          </div>
        </section>
        
        <!-- Preferences Section -->
        <section class="settings-section">
          <div class="settings-section__header">
            <h2 class="settings-section__title">Preferences</h2>
          </div>
          <div class="settings-section__content">
            <div class="form-field">
              <label for="timezone" class="label">Timezone</label>
              <div class="select">
                <button class="select__trigger">
                  <span class="select__value">America/New_York (EST)</span>
                  <svg class="select__chevron" width="16" height="16">
                    <path d="M4 6l4 4 4-4" stroke="currentColor"/>
                  </svg>
                </button>
              </div>
            </div>
            
            <div class="form-field">
              <label for="language" class="label">Language</label>
              <div class="select">
                <button class="select__trigger">
                  <span class="select__value">English</span>
                  <svg class="select__chevron" width="16" height="16">
                    <path d="M4 6l4 4 4-4" stroke="currentColor"/>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </section>
        
        <!-- Sticky Footer -->
        <div class="settings-footer">
          <div class="alert alert--warning" role="alert">
            <svg class="alert__icon" width="16" height="16">
              <path d="M10 2L2 18h16L10 2z" stroke="currentColor" fill="none"/>
            </svg>
            <span>You have unsaved changes</span>
          </div>
          <div class="settings-footer__actions">
            <button type="button" class="button button--secondary">
              Cancel
            </button>
            <button type="submit" class="button button--primary">
              Save Changes
            </button>
          </div>
        </div>
      </form>
    </main>
  </div>
</div>

CSS:

.settings-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
}

.settings-container {
  display: flex;
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Sidebar */
.settings-sidebar {
  width: 240px;
  padding: 24px 16px;
  background: var(--white);
  border-right: 1px solid var(--gray-200);
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.settings-nav__title {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
}

.settings-nav__section {
  margin-bottom: 24px;
}

.settings-nav__section-title {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--gray-700);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
  margin-bottom: 2px;
}

.settings-nav__link:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.settings-nav__link--active {
  background: var(--blue-50);
  color: var(--blue-700);
  font-weight: 500;
}

.settings-nav__icon {
  flex-shrink: 0;
}

/* Main Content */
.settings-main {
  flex: 1;
  padding: 24px;
  max-width: 800px;
}

.settings-header {
  margin-bottom: 32px;
}

.settings-header__title {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
  color: var(--gray-900);
}

.settings-header__description {
  margin: 0;
  font-size: 14px;
  color: var(--gray-600);
}

/* Form Sections */
.settings-section {
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  padding: 24px;
  margin-bottom: 24px;
}

.settings-section__header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-200);
}

.settings-section__title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.settings-section__description {
  margin: 0;
  font-size: 13px;
  color: var(--gray-600);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.profile-photo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-photo__actions {
  display: flex;
  gap: 8px;
}

/* Sticky Footer */
.settings-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  border-radius: 8px;
  margin: 0 -24px -24px -24px;
}

.settings-footer__actions {
  display: flex;
  gap: 12px;
}

.settings-footer .alert {
  margin: 0;
  padding: 8px 12px;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
  .settings-container {
    flex-direction: column;
  }
  
  .settings-sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
  }
  
  .settings-main {
    max-width: 100%;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
}

T8: Login / Auth Templates​

Purpose: Authentication flows (login, signup, password reset)

Test Criteria:

composition:
  - form: centered authentication form
  - branding: logo and messaging
  - social_auth: optional OAuth buttons
  
layout:
  - centered: vertical and horizontal
  - max_width: 400px
  - responsive: mobile-friendly
  
accessibility:
  - form_validation: inline errors
  - password_visibility: toggle show/hide
  - enter_submit: keyboard submission

Login Page​

<div class="auth-layout">
  <div class="auth-container">
    <!-- Branding -->
    <div class="auth-header">
      <img src="/logo.svg" alt="CODITECT" class="auth-logo" />
      <h1 class="auth-title">Welcome back</h1>
      <p class="auth-description">Sign in to your account to continue</p>
    </div>
    
    <!-- Social Login (Optional) -->
    <div class="auth-social">
      <button class="button button--secondary button--full">
        <svg width="20" height="20" class="button__icon">
          <!-- Google icon -->
        </svg>
        Continue with Google
      </button>
      <button class="button button--secondary button--full">
        <svg width="20" height="20" class="button__icon">
          <!-- GitHub icon -->
        </svg>
        Continue with GitHub
      </button>
    </div>
    
    <!-- Divider -->
    <div class="divider divider--text">
      <span class="divider__text">or</span>
    </div>
    
    <!-- Login Form -->
    <form class="auth-form" action="/login" method="POST">
      <div class="form-field">
        <label for="email" class="label">
          Email Address
          <span class="label__required">*</span>
        </label>
        <input 
          type="email" 
          id="email" 
          name="email"
          class="input"
          placeholder="you@example.com"
          required 
          autofocus
        />
      </div>
      
      <div class="form-field">
        <div class="form-field__label-row">
          <label for="password" class="label">
            Password
            <span class="label__required">*</span>
          </label>
          <a href="/forgot-password" class="form-field__link">
            Forgot password?
          </a>
        </div>
        <div class="password-input">
          <input 
            type="password" 
            id="password" 
            name="password"
            class="input"
            placeholder="Enter your password"
            required 
          />
          <button 
            type="button" 
            class="password-input__toggle"
            aria-label="Toggle password visibility"
          >
            <svg width="20" height="20">
              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" fill="none"/>
              <circle cx="12" cy="12" r="3" stroke="currentColor" fill="none"/>
            </svg>
          </button>
        </div>
      </div>
      
      <div class="form-field">
        <label class="checkbox">
          <input type="checkbox" name="remember" class="checkbox__input" />
          <span class="checkbox__box"></span>
          <span class="checkbox__label">Remember me for 30 days</span>
        </label>
      </div>
      
      <button type="submit" class="button button--primary button--full button--lg">
        Sign In
      </button>
    </form>
    
    <!-- Footer Links -->
    <div class="auth-footer">
      <p class="auth-footer__text">
        Don't have an account?
        <a href="/signup" class="auth-footer__link">Sign up</a>
      </p>
    </div>
  </div>
</div>

Signup Page​

<div class="auth-layout">
  <div class="auth-container">
    <div class="auth-header">
      <img src="/logo.svg" alt="CODITECT" class="auth-logo" />
      <h1 class="auth-title">Create your account</h1>
      <p class="auth-description">Start automating your workflow today</p>
    </div>
    
    <!-- Social Signup -->
    <div class="auth-social">
      <button class="button button--secondary button--full">
        <svg width="20" height="20" class="button__icon">
          <!-- Google icon -->
        </svg>
        Sign up with Google
      </button>
    </div>
    
    <div class="divider divider--text">
      <span class="divider__text">or</span>
    </div>
    
    <!-- Signup Form -->
    <form class="auth-form" action="/signup" method="POST">
      <div class="form-grid">
        <div class="form-field">
          <label for="first-name" class="label">
            First Name
            <span class="label__required">*</span>
          </label>
          <input 
            type="text" 
            id="first-name" 
            name="firstName"
            class="input"
            placeholder="John"
            required 
          />
        </div>
        
        <div class="form-field">
          <label for="last-name" class="label">
            Last Name
            <span class="label__required">*</span>
          </label>
          <input 
            type="text" 
            id="last-name" 
            name="lastName"
            class="input"
            placeholder="Doe"
            required 
          />
        </div>
      </div>
      
      <div class="form-field">
        <label for="email" class="label">
          Work Email
          <span class="label__required">*</span>
        </label>
        <input 
          type="email" 
          id="email" 
          name="email"
          class="input"
          placeholder="you@company.com"
          required 
        />
      </div>
      
      <div class="form-field">
        <label for="password" class="label">
          Password
          <span class="label__required">*</span>
        </label>
        <div class="password-input">
          <input 
            type="password" 
            id="password" 
            name="password"
            class="input"
            placeholder="Create a strong password"
            required 
            minlength="8"
          />
          <button 
            type="button" 
            class="password-input__toggle"
            aria-label="Toggle password visibility"
          >
            <svg width="20" height="20">...</svg>
          </button>
        </div>
        <div class="password-strength">
          <div class="password-strength__bar">
            <div class="password-strength__fill password-strength__fill--medium" style="width: 60%"></div>
          </div>
          <span class="password-strength__label">Medium strength</span>
        </div>
        <span class="form-field__help">
          Must be at least 8 characters
        </span>
      </div>
      
      <div class="form-field">
        <label class="checkbox">
          <input type="checkbox" name="terms" class="checkbox__input" required />
          <span class="checkbox__box"></span>
          <span class="checkbox__label">
            I agree to the <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy Policy</a>
          </span>
        </label>
      </div>
      
      <button type="submit" class="button button--primary button--full button--lg">
        Create Account
      </button>
    </form>
    
    <div class="auth-footer">
      <p class="auth-footer__text">
        Already have an account?
        <a href="/login" class="auth-footer__link">Sign in</a>
      </p>
    </div>
  </div>
</div>

Forgot Password Page​

<div class="auth-layout">
  <div class="auth-container auth-container--sm">
    <div class="auth-header">
      <div class="auth-icon">
        <svg width="48" height="48">
          <circle cx="24" cy="24" r="22" stroke="currentColor" fill="none" stroke-width="2"/>
          <path d="M16 24l4 4 8-8" stroke="currentColor" stroke-width="2" fill="none"/>
        </svg>
      </div>
      <h1 class="auth-title">Reset your password</h1>
      <p class="auth-description">
        Enter your email and we'll send you a link to reset your password
      </p>
    </div>
    
    <form class="auth-form" action="/forgot-password" method="POST">
      <div class="form-field">
        <label for="email" class="label">
          Email Address
          <span class="label__required">*</span>
        </label>
        <input 
          type="email" 
          id="email" 
          name="email"
          class="input"
          placeholder="you@example.com"
          required 
          autofocus
        />
      </div>
      
      <button type="submit" class="button button--primary button--full button--lg">
        Send Reset Link
      </button>
    </form>
    
    <div class="auth-footer">
      <a href="/login" class="auth-footer__back">
        <svg width="16" height="16">
          <path d="M10 4L6 8l4 4" stroke="currentColor" stroke-width="2"/>
        </svg>
        Back to login
      </a>
    </div>
  </div>
</div>

CSS:

.auth-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--white) 100%);
}

.auth-container {
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 40px;
}

.auth-container--sm {
  max-width: 400px;
}

.auth-logo {
  height: 40px;
  margin-bottom: 24px;
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: var(--blue-50);
  border-radius: 50%;
  color: var(--blue-600);
}

.auth-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--gray-900);
}

.auth-description {
  margin: 0;
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.5;
}

.auth-social {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.auth-form {
  margin-bottom: 24px;
}

.form-field__label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.form-field__link {
  font-size: 13px;
  color: var(--blue-600);
  text-decoration: none;
  font-weight: 500;
}

.form-field__link:hover {
  text-decoration: underline;
}

.password-input {
  position: relative;
}

.password-input__toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--gray-500);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.password-input__toggle:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.password-strength {
  margin-top: 8px;
}

.password-strength__bar {
  height: 4px;
  background: var(--gray-200);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.password-strength__fill {
  height: 100%;
  transition: width 0.3s, background-color 0.3s;
}

.password-strength__fill--weak {
  width: 33%;
  background: var(--red-500);
}

.password-strength__fill--medium {
  width: 66%;
  background: var(--yellow-500);
}

.password-strength__fill--strong {
  width: 100%;
  background: var(--green-500);
}

.password-strength__label {
  font-size: 12px;
  color: var(--gray-600);
}

.auth-footer {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
}

.auth-footer__text {
  margin: 0;
  font-size: 14px;
  color: var(--gray-600);
}

.auth-footer__link {
  color: var(--blue-600);
  text-decoration: none;
  font-weight: 500;
}

.auth-footer__link:hover {
  text-decoration: underline;
}

.auth-footer__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-700);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.auth-footer__back:hover {
  color: var(--gray-900);
}

/* Responsive */
@media (max-width: 480px) {
  .auth-container {
    padding: 32px 24px;
  }
  
  .auth-logo {
    height: 32px;
  }
  
  .auth-title {
    font-size: 20px;
  }
}

T9: Profile Page Template​

Purpose: User profile view and edit

<div class="profile-layout">
  <header class="navbar" role="banner">
    <!-- Navbar -->
  </header>
  
  <main class="profile-main">
    <!-- Cover Photo -->
    <div class="profile-cover">
      <img src="/cover.jpg" alt="" class="profile-cover__image" />
      <button class="profile-cover__edit button button--secondary">
        <svg width="16" height="16">
          <path d="M11 4H4a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V8l-5-4z" stroke="currentColor"/>
        </svg>
        Change Cover
      </button>
    </div>
    
    <!-- Profile Header -->
    <div class="profile-header">
      <div class="profile-header__avatar">
        <img src="/user.jpg" alt="Alice Johnson" class="avatar avatar--xl" />
        <button class="profile-header__avatar-edit" aria-label="Change profile photo">
          <svg width="16" height="16">
            <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z" stroke="currentColor"/>
          </svg>
        </button>
      </div>
      
      <div class="profile-header__info">
        <h1 class="profile-header__name">Alice Johnson</h1>
        <p class="profile-header__role">Senior Product Designer</p>
        <div class="profile-header__meta">
          <span class="profile-header__meta-item">
            <svg width="16" height="16">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" stroke="currentColor"/>
            </svg>
            San Francisco, CA
          </span>
          <span class="profile-header__meta-item">
            <svg width="16" height="16">
              <path d="M8 2h8l4 4v14" stroke="currentColor"/>
            </svg>
            Joined January 2024
          </span>
        </div>
      </div>
      
      <div class="profile-header__actions">
        <button class="button button--secondary">
          <svg width="16" height="16">
            <path d="M16 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="currentColor"/>
          </svg>
          Message
        </button>
        <button class="button button--primary">Edit Profile</button>
      </div>
    </div>
    
    <!-- Tabs -->
    <div class="tabs">
      <div class="tabs__list" role="tablist">
        <button class="tabs__tab tabs__tab--active" role="tab">Overview</button>
        <button class="tabs__tab" role="tab">Activity</button>
        <button class="tabs__tab" role="tab">Projects</button>
      </div>
    </div>
    
    <!-- Content -->
    <div class="profile-content">
      <div class="profile-main-col">
        <!-- Bio Card -->
        <div class="card">
          <div class="card__header">
            <h2 class="card__title">About</h2>
          </div>
          <div class="card__content">
            <p>Product designer with 8+ years of experience creating user-centered digital experiences...</p>
          </div>
        </div>
        
        <!-- Activity Feed -->
        <div class="card">
          <div class="card__header">
            <h2 class="card__title">Recent Activity</h2>
          </div>
          <div class="card__content">
            <div class="activity-list">
              <!-- Activity items -->
            </div>
          </div>
        </div>
      </div>
      
      <aside class="profile-sidebar">
        <!-- Stats Card -->
        <div class="card">
          <div class="card__content">
            <div class="stat-list">
              <div class="stat-list__item">
                <div class="stat-list__value">24</div>
                <div class="stat-list__label">Projects</div>
              </div>
              <div class="stat-list__item">
                <div class="stat-list__value">148</div>
                <div class="stat-list__label">Tasks</div>
              </div>
              <div class="stat-list__item">
                <div class="stat-list__value">98%</div>
                <div class="stat-list__label">On Time</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Skills Card -->
        <div class="card">
          <div class="card__header">
            <h3 class="card__title">Skills</h3>
          </div>
          <div class="card__content">
            <div class="tag-list">
              <span class="tag">UI Design</span>
              <span class="tag">Figma</span>
              <span class="tag">User Research</span>
            </div>
          </div>
        </div>
      </aside>
    </div>
  </main>
</div>

These H.P.008-TEMPLATES provide complete, production-ready page layouts for essential enterprise features.