→ Aiden Mercer
→ Food Delivery Order Card Component

Food Delivery Order Card Component

A customizable food order card for restaurant websites or food delivery apps that displays dish details, price, and ordering options.

This Example is contributed by Aiden Mercer, on 23-Apr-2025. It is responsive.

E-commerce Food Card

Author Aiden Mercer

Fork Fullscreen

<div class="food-card">
  <div class="food-card-image">
    <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c" alt="Vegetable Salad Bowl">
    <span class="food-card-tag">Popular</span>
  </div>
  <div class="food-card-content">
    <h3 class="food-card-title">Vegetable Salad Bowl</h3>
    <p class="food-card-description">Fresh mixed vegetables with house dressing, nuts and seeds topping.</p>
    <div class="food-card-meta">
      <div class="food-card-rating">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
        <span>4.5</span>
        <span class="food-card-reviews">(128)</span>
      </div>
      <div class="food-card-prep-time">
        <i class="far fa-clock"></i>
        <span>15-20 min</span>
      </div>
    </div>
    <div class="food-card-options">
      <div class="food-card-size">
        <span>Size:</span>
        <div class="size-options">
          <button class="size-btn active">S</button>
          <button class="size-btn">M</button>
          <button class="size-btn">L</button>
        </div>
      </div>
    </div>
    <div class="food-card-footer">
      <div class="food-card-price">
        <span class="currency">$</span>
        <span class="amount">8.99</span>
      </div>
      <div class="food-card-actions">
        <div class="quantity-selector">
          <button class="quantity-btn minus">-</button>
          <input type="text" class="quantity-input" value="1" readonly>
          <button class="quantity-btn plus">+</button>
        </div>
        <button class="add-to-cart-btn">
          <i class="fas fa-shopping-cart"></i>
          Add to Cart
        </button>
      </div>
    </div>
  </div>
</div>

Related Examples

Customer Product Review Card with Rating System
A customizable product review card displaying customer feedback, star ratings, and user information to build trust with potential buyers.

Author:
Marcus Thornton

1 month ago
Product Showcase Card

Author:
Jordan McKenzie

1 month ago
Product Card with Hover Effects
Premium product display component with elegant typography, animated details, and seamless add-to-cart functionality.

Author:
Prajwal Hallale

2 months ago
Shopping Cart
A fully functional shopping cart that updates totals in real-time as users modify quantities or remove items.

Author:
Aiden Mercer

1 month ago
Responsive Shopping Cart Template

Author:
Anonymous

3 weeks ago
Responsive Product Card Grid with Image and Pricing Details
A responsive product card grid layout showcasing product images with detailed pricing information, perfect for e-commerce websites and online stores.

Author:
Julian Parker

1 month ago
Card Skeleton Loader
A skeleton loader mimicking the appearance of a card, ideal for enhancing perceived performance during data loading.

Author:
Alisha Patel

2 months ago
Professional Customer Testimonial Card with User Image
A responsive customer testimonial card featuring a user image, quote, and rating that adapts beautifully to any screen size.

Author:
Jordan McKenzie

2 months ago
Product Card with 3D Transform Hover Effect

Author:
Anonymous

4 weeks ago
CTA Card
Stunning gradient service cards with smooth hover animations and interactive elements, perfect for showcasing features or services.

Author:
Prajwal Hallale

2 months ago
Animated Profile Card with Hover Effects and Social Links

Author:
Priya Sharma

2 months ago
User Avatar Card
A responsive user avatar card featuring online status indicator, follow button, and dark mode support with smooth transitions for modern web applications.

Author:
Alexandra Sinclair

1 month ago

Explore components by Tags

Didn't find component you were looking for?

Search from 500+ components