بلوک‌های بخشبندی

بخش‌ها بلوک‌های پایه‌ای برای ساختار هر وب‌سایت هستند. بخش‌های Vulk بسیار انعطاف‌پذیر و به‌راحتی قابل تنظیم هستند. بخش‌های Vulk را بررسی کنید.

بخشبندی

طرح‌بندی پایه برای بخشبندی

من یک بخش هستم

می‌توانم هر نوع محتوایی داشته باشم


<template>
  <Section>
    <Container>
      <!--Your content goes here-->
    </Container>
  </Section>
</template>

رنگبندی بخش

رنگبندی‌های در دسترس برای بخش

من یک بخش هستم

می‌توانم هر نوع محتوایی داشته باشم

من یک بخش هستم

می‌توانم هر نوع محتوایی داشته باشم


<template>
  <Section color="grey">
    <Container>
      <!--Your content goes here-->
    </Container>
  </Section>
</template>

بخش‌های حاشیه‌دار

پیکربندی حاشیه‌ها برای بخش‌ها

من یک بخش هستم

می‌توانم هر نوع محتوایی داشته باشم


<template>
  <Section bordered-top bordered-bottom>
    <Container>
      <!--Your content goes here-->
    </Container>
  </Section>
</template>

بخش‌بندی موج‌دار

شمایل مواج برای بخش‌ها

من یک بخش هستم

می‌توانم هر نوع محتوایی داشته باشم

من یک بخش هستم

می‌توانم هر نوع محتوایی داشته باشم

من یک بخش هستم

می‌توانم هر نوع محتوایی داشته باشم

من یک بخش هستم

می‌توانم هر نوع محتوایی داشته باشم


<template>
  <!--Wave 1-->
  <Section wave="wave-1" shape-color="grey">
    <Container>
      <div class="content py-6">
        <Title tag="h3" :size="4" weight="semi" narrow>
          <span>من یک بخش هستم</span>
        </Title>
        <p class="paragraph">می‌توانم هر نوع محتوایی داشته باشم</p>
      </div>
    </Container>
  </Section>
  <Section color="grey">
    <Container>
      <div class="content py-6">
        <Title tag="h3" :size="4" weight="semi" narrow>
          <span>من یک بخش هستم</span>
        </Title>
        <p class="paragraph">می‌توانم هر نوع محتوایی داشته باشم</p>
      </div>
    </Container>
  </Section>

  <!--Wave 2-->
  <Section wave="wave-2" shape-color="darker">
    <Container>
      <div class="content py-6">
        <Title tag="h3" :size="4" weight="semi" narrow inverted>
          <span>من یک بخش هستم</span>
        </Title>
        <p class="paragraph">می‌توانم هر نوع محتوایی داشته باشم</p>
      </div>
    </Container>
  </Section>
  <Section color="darker">
    <Container>
      <div class="content py-6">
        <Title tag="h3" :size="4" weight="semi" narrow inverted>
          <span>من یک بخش هستم</span>
        </Title>
        <p class="paragraph">می‌توانم هر نوع محتوایی داشته باشم</p>
      </div>
    </Container>
  </Section>
</template>

بخشبندی طرح‌دار

بخشبندی با طرح زبانه‌های آتش

من یک بخش هستم

می‌توانم هر نوع محتوایی داشته باشم

من یک بخش هستم

می‌توانم هر نوع محتوایی داشته باشم


<template>
<!--Tongue 1-->
  <Section tongue="tongue-1" shape-color="grey">
    <Container>
      <div class="content py-6">
        <Title tag="h3" :size="4" weight="semi" narrow>
          <span>من یک بخش هستم</span>
        </Title>
        <p class="paragraph">می‌توانم هر نوع محتوایی داشته باشم</p>
      </div>
    </Container>
  </Section>

  <!--Tongue 2-->
  <Section tongue="tongue-2" shape-color="grey">
    <Container>
      <div class="content py-6">
        <Title tag="h3" :size="4" weight="semi" narrow>
          <span>من یک بخش هستم</span>
        </Title>
        <p class="paragraph">می‌توانم هر نوع محتوایی داشته باشم</p>
      </div>
    </Container>
  </Section>
</template>

پس‌زمینه

تصویر پس‌زمینه برای بخش

من یک بخش هستم

می‌توانم هر نوع محتوایی داشته باشم


<template>
  <Section
    v-background="{
      src: '/assets/demo/img/bg/3.jpeg',
      placeholder: 'https://dummyimage.com/1920x1080/',
    }"
    overlay
  >
    <Container>
      <div class="has-text-centered content py-6">
        <Title tag="h3" :size="4" weight="semi" narrow inverted>
          <span>من یک بخش هستم</span>
        </Title>
        <p class="paragraph is-inverted-light">
          می‌توانم هر نوع محتوایی داشته باشم
        </p>
      </div>
    </Container>
  </Section>
</template>