Section Blocks

Sections are the base layout building block for any website. Vulk sections are very versatile and easily customizable. Explore Vulk sections.

Section

Section base layout

Iam a Section

I can hold any type of content


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

Section Color

Available section colors

Iam a Section

I can hold any type of content

Iam a Section

I can hold any type of content


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

Section Borders

Section borders setup

Iam a Section

I can hold any type of content


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

Section Wave

Section wave shape

Iam a Section

I can hold any type of content

Iam a Section

I can hold any type of content

Iam a Section

I can hold any type of content

Iam a Section

I can hold any type of content


<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>Iam a Section</span>
        </Title>
        <p class="paragraph">I can hold any type of content</p>
      </div>
    </Container>
  </Section>
  <Section color="grey">
    <Container>
      <div class="content py-6">
        <Title tag="h3" :size="4" weight="semi" narrow>
          <span>Iam a Section</span>
        </Title>
        <p class="paragraph">I can hold any type of content</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>Iam a Section</span>
        </Title>
        <p class="paragraph">I can hold any type of content</p>
      </div>
    </Container>
  </Section>
  <Section color="darker">
    <Container>
      <div class="content py-6">
        <Title tag="h3" :size="4" weight="semi" narrow inverted>
          <span>Iam a Section</span>
        </Title>
        <p class="paragraph">I can hold any type of content</p>
      </div>
    </Container>
  </Section>
</template>

Section Wave

Section wave shape

Iam a Section

I can hold any type of content

Iam a Section

I can hold any type of content


<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>Iam a Section</span>
        </Title>
        <p class="paragraph">I can hold any type of content</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>Iam a Section</span>
        </Title>
        <p class="paragraph">I can hold any type of content</p>
      </div>
    </Container>
  </Section>
</template>

Background

Section background image

Iam a Section

I can hold any type of content


<template>
  <Section
    v-background="{
      src: 'data:image/gif;base64,replace_with_your_image',
      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>Iam a Section</span>
        </Title>
        <p class="paragraph is-inverted-light">
          I can hold any type of content
        </p>
      </div>
    </Container>
  </Section>
</template>