Common UI Elements

These are the building blocks of modern web interfaces. You've already seen many of these in the HTML reference, but here are some more complex UI patterns you'll encounter:

Accordion

Like a filing cabinet for your content—keeps things neat and organized.

<details>
  <summary>What is an accordion?</summary>
  <p>An accordion is a vertically stacked set of interactive headings.</p>
</details>

Dropdown (Popover)

A menu that appears on demand—great for compact navigation.

<div class="dropdown-container">
  <button class="dropdown-trigger" onclick="toggleDropdown(this)">Menu ▼</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

Carousel

A horizontal slideshow for displaying multiple pieces of content in the same space.

<div class="carousel-container">
  <div class="carousel-track">
    <div class="carousel-slide">Slide 1</div>
    <div class="carousel-slide">Slide 2</div>
    <div class="carousel-slide">Slide 3</div>
  </div>
  <div class="carousel-nav">
    <button class="carousel-button prev" onclick="prevSlide()">←</button>
    <button class="carousel-button next" onclick="nextSlide()">→</button>
  </div>
</div>

Modal

A popup dialog used to capture user attention or input.

<button class="modal-trigger" onclick="d.showModal()">Open Modal</button>
<dialog id="d" class="modal">
  <div class="modal-content">
    <h3>Modal Title</h3>
    <p>This is a modal dialog.</p>
    <button onclick="d.close()">Close</button>
  </div>
</dialog>

Tabs

Organize content into different views within the same space.

<div class="tabs">
  <div class="tab-buttons">
    <button onclick="switchTab(0)" class="tab-button active">Tab 1</button>
    <button onclick="switchTab(1)" class="tab-button">Tab 2</button>
    <button onclick="switchTab(2)" class="tab-button">Tab 3</button>
  </div>
  <div class="tab-content">
    <div class="tab-pane active">Content for Tab 1</div>
    <div class="tab-pane">Content for Tab 2</div>
    <div class="tab-pane">Content for Tab 3</div>
  </div>
</div>

UX Principles

Consistency

• Same button styles for similar actions
• Predictable placement of navigation
• Consistent use of colors and spacing

Feedback

• Loading indicators for async actions
• Clear error/success messages
• Subtle hover or press effects

Accessibility

• Keyboard navigation
• Alt text on images
• Readable contrast ratios

Mobile First

• Touch-friendly sizes
• Responsive grids
• Content prioritization