Mini Project – UI Components

Build professional buttons, cards, forms, and navigation components using advanced CSS techniques and modern design patterns.

UI components are the building blocks of modern websites — think buttons that change color when you hover, cards that lift up with shadows, and forms that guide users smoothly. The WanderLust team wants to create a professional component library that can be reused across all their pages.

Project Overview

A component library is like a toolbox of pre-built website pieces. Instead of writing the same button styles over and over, you create one perfect button component and use it everywhere. Companies like Airbnb and Stripe have entire design systems built this way.

Primary Components
Buttons, navigation, hero sections

Layout Components
Cards, grids, containers, modals

Form Components
Input fields, dropdowns, validation

Interactive Components
Tooltips, accordions, tabs, sliders

Component 1: Button System

Buttons need different styles for different purposes — primary actions, secondary choices, and danger operations. Each button should feel clickable with hover effects and proper sizing.

/* WanderLust button system — consistent across all pages */
.btn-primary {
  background: linear-gradient(135deg, #0ea5e9, #0284c7); /* sky blue gradient */
  color: white; /* white text on blue background */
  border: none; /* removes default browser border */
  padding: 14px 28px; /* comfortable click area */
  border-radius: 8px; /* modern rounded corners */
  font-size: 16px; /* readable text size */
  font-weight: 600; /* semi-bold for importance */
  cursor: pointer; /* shows it's clickable */
  transition: all 0.3s ease; /* smooth hover animation */
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3); /* subtle depth */
}

.btn-primary:hover {
  transform: translateY(-2px); /* lifts up on hover */
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4); /* stronger shadow */
}

What just happened?

The gradient creates depth, transform: translateY() lifts the button on hover, and the box-shadow grows stronger for a premium feel. Try this: add active styles that push the button down when clicked.

Button Variations

Professional websites need multiple button styles for different contexts. A primary button for main actions, secondary buttons for alternative choices, and danger buttons for destructive actions.

/* Complete WanderLust button system */
.btn-secondary {
  background: transparent; /* no background fill */
  color: #0ea5e9; /* blue text matches primary */
  border: 2px solid #0ea5e9; /* outline style */
  padding: 12px 26px; /* slightly less padding for outline */
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: #0ea5e9; /* fills in on hover */
  color: white; /* inverts text color */
}

.btn-danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c); /* red gradient */
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

Component 2: Card System

Cards contain related information in a clean, organized way. Think product cards on Amazon or property cards on Airbnb. Each card needs hover effects, proper spacing, and visual hierarchy to guide the user's eye.

/* WanderLust destination cards — showcases travel packages */
.destination-card {
  background: white; /* clean white background */
  border-radius: 16px; /* modern rounded corners */
  overflow: hidden; /* keeps content inside rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* subtle depth */
  transition: all 0.3s ease; /* smooth hover animation */
  cursor: pointer; /* shows it's interactive */
}

.destination-card:hover {
  transform: translateY(-8px); /* lifts up more than buttons */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); /* stronger shadow */
}

.card-image {
  width: 100%; /* full width of card */
  height: 200px; /* fixed height for consistency */
  background: linear-gradient(45deg, #0ea5e9, #06b6d4); /* placeholder gradient */
  display: flex; /* centers the placeholder text */
  align-items: center; /* vertical centering */
  justify-content: center; /* horizontal centering */
  color: white; /* white text on gradient */
  font-weight: 600; /* semi-bold placeholder */
}

.card-content {
  padding: 24px; /* comfortable inner spacing */
}

What just happened?

The card lifts 8px on hover (more than buttons for stronger effect), overflow: hidden keeps the image inside rounded corners, and the gradient placeholder simulates a photo. Try this: add a scale(1.05) transform to grow the image on hover.

Component 3: Form Elements

Forms are where users interact most with your website — booking trips, creating accounts, leaving reviews. Each input needs clear labels, proper spacing, and visual feedback when focused or filled.

/* WanderLust form system — booking and contact forms */
.form-group {
  margin-bottom: 24px; /* space between form fields */
  position: relative; /* allows absolute positioning of labels */
}

.form-input {
  width: 100%; /* full width of container */
  padding: 16px 20px; /* comfortable input area */
  border: 2px solid #e2e8f0; /* light gray border */
  border-radius: 8px; /* rounded corners */
  font-size: 16px; /* prevents zoom on mobile */
  font-family: inherit; /* matches website font */
  transition: all 0.3s ease; /* smooth focus animation */
  background: white; /* white background */
  box-sizing: border-box; /* includes padding in width */
}

.form-input:focus {
  outline: none; /* removes browser default outline */
  border-color: #0ea5e9; /* blue border when focused */
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); /* subtle glow */
  transform: translateY(-2px); /* slight lift on focus */
}

.form-label {
  display: block; /* takes full width */
  margin-bottom: 8px; /* space above input */
  font-weight: 600; /* semi-bold for importance */
  color: #374151; /* dark gray text */
}

Component 4: Navigation Menu

Navigation needs to be instantly recognizable and work perfectly on all devices. Users expect hover effects that show what's clickable, clear visual hierarchy, and responsive behavior on mobile.

/* WanderLust navigation — works on desktop and mobile */
.main-nav {
  background: white; /* clean white background */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* subtle bottom shadow */
  padding: 0 24px; /* horizontal padding */
  position: sticky; /* stays at top when scrolling */
  top: 0; /* sticks to very top */
  z-index: 100; /* appears above other content */
}

.nav-container {
  display: flex; /* horizontal layout */
  justify-content: space-between; /* logo left, menu right */
  align-items: center; /* vertical centering */
  max-width: 1200px; /* limits width on large screens */
  margin: 0 auto; /* centers container */
  height: 70px; /* fixed height for consistency */
}

.nav-logo {
  font-size: 24px; /* large brand text */
  font-weight: 800; /* extra bold */
  color: #0ea5e9; /* brand blue */
  text-decoration: none; /* removes underline */
}

.nav-menu {
  display: flex; /* horizontal menu items */
  list-style: none; /* removes bullet points */
  margin: 0; /* removes default margin */
  padding: 0; /* removes default padding */
  gap: 32px; /* space between menu items */
}

.nav-link {
  color: #64748b; /* gray text */
  text-decoration: none; /* removes underline */
  font-weight: 500; /* medium weight */
  transition: color 0.3s ease; /* smooth color change */
  padding: 8px 0; /* vertical padding for click area */
}

.nav-link:hover {
  color: #0ea5e9; /* blue on hover */
}

What just happened?

The position: sticky makes the nav follow when scrolling, justify-content: space-between pushes logo and menu to opposite sides, and hover effects guide users. Try this: add an active state with border-bottom to show current page.

Component Best Practices

Professional components follow consistent patterns that users recognize from other websites. Airbnb's cards all have the same hover effect, Stripe's buttons use the same padding system, and GitHub's forms provide clear feedback.

Component Type	Key Properties	User Experience Goal
Buttons	padding, hover effects, focus states	Clear clickable areas, instant feedback
Cards	shadows, rounded corners, hover lift	Organized information, interactive preview
Forms	focus states, validation, spacing	Easy data entry, clear requirements
Navigation	sticky position, hover states, hierarchy	Always accessible, shows location

Component Organization Tip

Keep all component styles in a separate CSS file like components.css. This makes them reusable across different pages and easier to maintain. Professional teams use tools like Storybook to catalog all their components.

Component libraries save massive amounts of development time. Instead of redesigning buttons for every page, you build them once and reuse everywhere. The WanderLust team can now create consistent experiences across their booking forms, destination pages, and contact sections.

Quiz

Up Next: CSS Interview Questions

Master the most common CSS questions asked in developer interviews, from specificity to flexbox gotchas.

← Previous Course Index Next →