Ui Design Patterns

# UI Design Patterns - Implementation Examples

Detailed implementation examples for common UI design patterns with HTML, CSS, and JavaScript code samples.

## Table of Contents

1. [Navigation Patterns](#navigation-patterns)
2. [Form Patterns](#form-patterns)
3. [Data Display Patterns](#data-display-patterns)
4. [Feedback Patterns](#feedback-patterns)
5. [Interaction Patterns](#interaction-patterns)
6. [Accessibility Examples](#accessibility-examples)
7. [Responsive Patterns](#responsive-patterns)

## Navigation Patterns

### Example 1: Accessible Tab Component

A fully accessible tab component with keyboard navigation and ARIA attributes.

**HTML Structure**:
```html
<div class="tabs-container">
  <div role="tablist" aria-label="Account settings">
    <button
      role="tab"
      aria-selected="true"
      aria-controls="profile-panel"
      id="profile-tab"
      tabindex="0"
    >
      <svg aria-hidden="true"><!-- Profile icon --></svg>
      Profile
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="security-panel"
      id="security-tab"
      tabindex="-1"
    >
      <svg aria-hidden="true"><!-- Lock icon --></svg>
      Security
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="notifications-panel"
      id="notifications-tab"
      tabindex="-1"
    >
      <svg aria-hidden="true"><!-- Bell icon --></svg>
      Notifications
    </button>
  </div>

  <div
    role="tabpanel"
    id="profile-panel"
    aria-labelledby="profile-tab"
    tabindex="0"
  >
    <h2>Profile Settings</h2>
    <p>Manage your profile information and preferences.</p>
    <!-- Profile form content -->
  </div>

  <div
    role="tabpanel"
    id="security-panel"
    aria-labelledby="security-tab"
    hidden
    tabindex="0"
  >
    <h2>Security Settings</h2>
    <p>Update your password and security preferences.</p>
    <!-- Security form content -->
  </div>

  <div
    role="tabpanel"
    id="notifications-panel"
    aria-labelledby="notifications-tab"
    hidden
    tabindex="0"
  >
    <h2>Notification Preferences</h2>
    <p>Choose how and when you want to be notified.</p>
    <!-- Notification settings -->
  </div>
</div>
```

**CSS Styling**:
```css
.tabs-container {
  max-width: 800px;
  margin: 2rem auto;
}

[role="tablist"] {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 1.5rem;
}

[role="tab"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

[role="tab"]:hover {
  color: #374151;
  background-color: #f9fafb;
}

[role="tab"][aria-selected="true"] {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

[role="tab"]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}

[role="tab"] svg {
  width: 1.25rem;
  height: 1.25rem;
}

[role="tabpanel"] {
  padding: 1.5rem;
  animation: fadeIn 0.3s ease-in;
}

[role="tabpanel"]:focus {
  outline: 2px solid #2563eb;
  outline-offset: 4px;
  border-radius: 4px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
```

**JavaScript Implementation**:
```javascript
class TabComponent {
  constructor(container) {
    this.container = container;
    this.tablist = container.querySelector('[role="tablist"]');
    this.tabs = Array.from(this.tablist.querySelectorAll('[role="tab"]'));
    this.panels = Array.from(container.querySelectorAll('[role="tabpanel"]'));

    this.initTabs();
  }

  initTabs() {
    this.tabs.forEach((tab, index) => {
      tab.addEventListener('click', () => this.selectTab(index));
      tab.addEventListener('keydown', (e) => this.handleKeyboard(e, index));
    });
  }

  selectTab(index) {