بلاک های پاورقی

بیش از ۴ بلوک قابل تنظیم فوتر در انتظار شما هستند تا بتوانید طرح‌بندی‌ها، صفحات و محتواهای خود را بسازید.

اجزاء باز کردن اسناد
فوتر Aفوتر Bفوتر Cفوتر D

فوتر A

فوتر طرح A سبک 1

مشاهده پراپ‌ها

فوتر A

فوتر طرح A سبک 2

مشاهده پراپ‌ها

فوتر A

فوتر طرح A سبک 3

مشاهده پراپ‌ها

فوتر A

فوتر طرح A سبک 4

مشاهده پراپ‌ها

پراپ‌ها

پراپ‌های در دسترس برای فوتر A


<template>
  <FooterA color="dark" :social-links="socialLinks">
    <template #left-links>
      <RouterLink :to="{ name: 'index' }" class="level-item footer-link">محصول</RouterLink>
      <RouterLink :to="{ name: 'index' }" class="level-item footer-link">ویژگی‌ها</RouterLink>
      <RouterLink :to="{ name: 'index' }" class="level-item footer-link">مستندات</RouterLink>
    </template>
    <template #right-links>
      <RouterLink :to="{ name: 'index' }" class="level-item footer-link">شرکت</RouterLink>
      <RouterLink :to="{ name: 'index' }" class="level-item footer-link">در مورد</RouterLink>
      <RouterLink :to="{ name: 'index' }" class="level-item footer-link">پشتیبانی</RouterLink>
    </template>
  </FooterA>
</template>

فوتر B

فوتر طرح B سبک 1

مشاهده پراپ‌ها

فوتر B

فوتر طرح B سبک 2

مشاهده پراپ‌ها

فوتر B

فوتر طرح B سبک 3

مشاهده پراپ‌ها

فوتر B

فوتر طرح B سبک 4

مشاهده پراپ‌ها

پراپ‌ها

پراپ‌های در دسترس برای فوتر B


<template>
  <FooterB color="dark">
    <template #links>
      <li class="inline-block px-2">
        <RouterLink :to="{ name: 'index' }" class="footer-link">Demos</RouterLink>
      </li>
      <li class="inline-block px-2">
        <RouterLink :to="{ name: 'index' }" class="footer-link">کامپوننت‌ها</RouterLink>
      </li>
      <li class="inline-block px-2">
        <RouterLink :to="{ name: 'index' }" class="footer-link">مستندات</RouterLink>
      </li>
      <li class="inline-block px-2">
        <RouterLink :to="{ name: 'index' }" class="footer-link">پشتیبانی</RouterLink>
      </li>
    </template>
  </FooterB>
</template>

فوتر C

فوتر طرح C سبک 1

مشاهده پراپ‌ها

فوتر C

فوتر طرح C سبک 2

مشاهده پراپ‌ها

فوتر C

فوتر طرح C سبک 3

مشاهده پراپ‌ها

فوتر C

فوتر طرح C سبک 4

مشاهده پراپ‌ها

پراپ‌ها

پراپ‌های در دسترس برای فوتر C


<template>
  <FooterC text="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است."
    color="dark"
    :social-links="socialLinks"
    image="/@src/assets/illustrations/footer/footer-cityscape.png"
  >
    <template #column-1>
      <Title tag="h3" :size="6" weight="thin" inverted>
        <span>Discover</span>
      </Title>
      <ul>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">شروع کنید</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">محصول</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">ویژگی‌ها</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">ثبت نام</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">ورود</RouterLink>
        </li>
      </ul>
    </template>
    <template #column-2>
      <Title tag="h3" :size="6" weight="thin" inverted>
        <span>شرکت</span>
      </Title>
      <ul>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">شرکت</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">در مورد</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">آموزش</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">سوالات پر تکرار</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">تماس</RouterLink>
        </li>
      </ul>
    </template>
    <template #column-3>
      <Title tag="h3" :size="6" weight="thin" inverted>
        <span>پشتیبانی</span>
      </Title>
      <ul>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">مرکز راهنمایی</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">راهنماها</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">مستند رابط برنامه نویسی کاربردی</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">Terms</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">حریم خصوصی</RouterLink>
        </li>
      </ul>
    </template>
  </FooterC>
</template>

بلوک طرح D

بلوک طرح D سبک 1

مشاهده پراپ‌ها

بلوک طرح D

بلوک طرح D سبک 2

مشاهده پراپ‌ها

بلوک طرح D

بلوک طرح D سبک 3

مشاهده پراپ‌ها

بلوک طرح D

بلوک طرح D سبک 4

مشاهده پراپ‌ها

پراپ‌ها

پراپ‌های در دسترس برای فوتر D


<template>
  <FooterD text="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است."
    color="light"
    :social-links="socialLinks"
    bubbles
  >
    <template #column-1>
      <Title tag="h3" :size="6" weight="thin" inverted>
        <span>كشف كردن</span>
      </Title>
      <ul>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">شروع کنید</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">محصول</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">ویژگی‌ها</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">ثبت نام</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">ورود</RouterLink>
        </li>
      </ul>
    </template>
    <template #column-2>
      <Title tag="h3" :size="6" weight="thin" inverted>
        <span>شرکت</span>
      </Title>
      <ul>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">شرکت</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">در مورد</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">آموزش</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">سوالات پر تکرار</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">تماس</RouterLink>
        </li>
      </ul>
    </template>
    <template #column-3>
      <Title tag="h3" :size="6" weight="thin" inverted>
        <span>پشتیبانی</span>
      </Title>
      <ul>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">مرکز راهنمایی</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">راهنماها</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">مستند رابط برنامه نویسی کاربردی</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">Terms</RouterLink>
        </li>
        <li>
          <RouterLink :to="{ name: 'index' }" class="level-item footer-link">حریم خصوصی</RouterLink>
        </li>
      </ul>
    </template>
  </FooterD>
</template>