Foundation

<!-- تحميل Foundation 6 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>

<!-- XY Grid -->
<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell small-12 medium-6 large-4">
      <div class="callout">
        <h4>عنوان</h4>
        <p>محتوى</p>
      </div>
    </div>
    <div class="cell small-12 medium-6 large-4">
      <div class="callout">
        <h4>عنوان</h4>
        <p>محتوى</p>
      </div>
    </div>
    <div class="cell small-12 medium-6 large-4">
      <div class="callout">
        <h4>عنوان</h4>
        <p>محتوى</p>
      </div>
    </div>
  </div>
</div>

<!-- Buttons -->
<button class="button">زر عادي</button>
<button class="button primary">زر أساسي</button>
<button class="button secondary">زر ثانوي</button>
<button class="button success">زر نجاح</button>
<button class="button alert">زر خطر</button>
<button class="button warning">زر تحذير</button>

<button class="button large expanded">زر كبير ممتد</button>
<button class="button hollow">مخطط</button>
<button class="button disabled">معطل</button>

<!-- Card -->
<div class="card">
  <div class="card-image">
    <img src="image.jpg" alt="">
  </div>
  <div class="card-section">
    <h4>عنوان البطاقة</h4>
    <p>محتوى البطاقة</p>
    <button class="button">زر</button>
  </div>
</div>

<!-- Reveal (Modal) -->
<button class="button" data-open="exampleModal">فتح النافذة</button>

<div class="reveal" id="exampleModal" data-reveal>
  <h2>عنوان</h2>
  <p>محتوى النافذة</p>
  <button class="close-button" data-close aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<!-- Orbit (Slider) -->
<div class="orbit" role="region" aria-label="Slider" data-orbit>
  <ul class="orbit-container">
    <li class="is-active orbit-slide">
      <img src="slide1.jpg" alt="">
    </li>
    <li class="orbit-slide">
      <img src="slide2.jpg" alt="">
    </li>
  </ul>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"></button>
    <button data-slide="1"></button>
  </nav>
</div>

<!-- Initialize Foundation JS -->
<script>
$(document).foundation();
// أو بدون jQuery:
// document.addEventListener('DOMContentLoaded', () => {
//   Foundation.initialize();
// });
</script>