PenTool UIتصفّح المكتبة

الواجهات الكاملة · متجر أثاث

واجهة متجر

رأس ومرشّحات وشبكة منتجات وسلّة — صفحة تصفّح كاملة تعمل بالاتّجاهين

افتحها في لسان جديد ↗
<div class="iface ifs">
  <header class="if-top">
    <span class="brand" data-ar="دار" data-en="Dar">دار</span>
    <nav>
      <a href="#" aria-current="page"><span data-ar="الكلّ" data-en="All">الكلّ</span></a>
      <a href="#"><span data-ar="غرف المعيشة" data-en="Living">غرف المعيشة</span></a>
      <a href="#"><span data-ar="المكاتب" data-en="Office">المكاتب</span></a>
      <a href="#"><span data-ar="الإضاءة" data-en="Lighting">الإضاءة</span></a>
    </nav>
    <span class="grow"></span>
    <button class="if-btn ghost ifs-cart">
      <span data-ar="السلّة" data-en="Cart">السلّة</span><b class="num">3</b></button>
  </header>

  <div class="if-body">
    <div class="if-h">
      <h1 data-ar="غرف المعيشة" data-en="Living rooms">غرف المعيشة</h1>
      <p><span class="num">48</span> <span data-ar="قطعة" data-en="items">قطعة</span></p>
    </div>

    <div class="ifs-filters">
      <button class="chip on" data-ar="الكلّ" data-en="All">الكلّ</button>
      <button class="chip" data-ar="كنب" data-en="Sofas">كنب</button>
      <button class="chip" data-ar="طاولات" data-en="Tables">طاولات</button>
      <button class="chip" data-ar="سجّاد" data-en="Rugs">سجّاد</button>
      <span class="grow"></span>
      <select class="ifs-sort" aria-label="الترتيب">
        <option data-ar="الأحدث" data-en="Newest">الأحدث</option>
        <option data-ar="الأقلّ سعرًا" data-en="Price: low to high">الأقلّ سعرًا</option>
      </select>
    </div>

    <ul class="ifs-grid">
      <li class="if-card"><div class="ph a"></div>
        <h3 data-ar="كنبة ثلاثية · كتّان" data-en="Three-seater · linen">كنبة ثلاثية · كتّان</h3>
        <div class="row"><b class="num">$740</b>
          <span class="stock" data-ar="متوفّر" data-en="In stock">متوفّر</span></div></li>
      <li class="if-card"><div class="ph b"></div>
        <h3 data-ar="طاولة وسط · بلوط" data-en="Coffee table · oak">طاولة وسط · بلوط</h3>
        <div class="row"><b class="num">$210</b>
          <span class="stock" data-ar="متوفّر" data-en="In stock">متوفّر</span></div></li>
      <li class="if-card"><div class="ph c"></div>
        <h3 data-ar="سجّادة يدوية 2×3" data-en="Handmade rug 2×3">سجّادة يدوية 2×3</h3>
        <div class="row"><b class="num">$390</b>
          <span class="stock low" data-ar="قطعتان" data-en="2 left">قطعتان</span></div></li>
      <li class="if-card"><div class="ph d"></div>
        <h3 data-ar="مكتبة جدارية" data-en="Wall shelving">مكتبة جدارية</h3>
        <div class="row"><b class="num">$520</b>
          <span class="stock" data-ar="متوفّر" data-en="In stock">متوفّر</span></div></li>
      <li class="if-card"><div class="ph b"></div>
        <h3 data-ar="كرسي مفرد · مخمل" data-en="Armchair · velvet">كرسي مفرد · مخمل</h3>
        <div class="row"><b class="num">$285</b>
          <span class="stock" data-ar="متوفّر" data-en="In stock">متوفّر</span></div></li>
      <li class="if-card"><div class="ph a"></div>
        <h3 data-ar="طاولة جانبية · رخام" data-en="Side table · marble">طاولة جانبية · رخام</h3>
        <div class="row"><b class="num">$165</b>
          <span class="stock low" data-ar="قطعة واحدة" data-en="1 left">قطعة واحدة</span></div></li>
    </ul>
  </div>
</div>
← الملفّ والإعداداتلوحة تحليلات →