Containers

Container components for scaffolding basic structure of the page:

<b-container>: wrapper container. When nested with a <b-header> or <b-footer>, all its child elements will be vertically arranged. Otherwise horizontally.

<b-header>: container for headers.

<b-aside>: container for side sections (usually a side nav).

<b-main>: container for main sections.

<b-footer>: container for footers.

<b-spacer>: spacer.

<b-divider>: section divider horizontal or vertical.

TIP

These components use flex for layout, so please make sure your browser supports it. Besides, <b-container>'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a <b-container>.

Common layouts

Header

Main

---

<template>
  <b-container class="h-240px">
    <b-header class="bg-[var(--b-color-neutral-3)]">
      <div class="w-full h-full flex items-center justify-center">Header</div>
    </b-header>
    <b-main>
      <div class="w-full h-full flex items-center justify-center">Main</div>
    </b-main>
  </b-container>
</template>

Header

Main

Footer

---

<template>
  <b-container class="h-240px">
    <b-header class="bg-[var(--b-color-neutral-3)]">
      <div class="w-full h-full flex items-center justify-center">Header</div>
    </b-header>
    <b-main>
      <div class="w-full h-full flex items-center justify-center">Main</div>
    </b-main>
    <b-footer class="bg-[var(--b-color-neutral-3)]">
      <div class="w-full h-full flex items-center justify-center">Footer</div>
    </b-footer>
  </b-container>
</template>

Aside

Main

---

<template>
  <b-container class="h-240px">
    <b-aside width="192px">
      <div class="w-full h-full flex items-center justify-center">Aside</div>
    </b-aside>
    <b-main>
      <div class="w-full h-full flex items-center justify-center">Main</div>
    </b-main>
  </b-container>
</template>

Header

Aside

Main

---

<template>
  <b-container class="h-240px">
    <b-header class="bg-[var(--b-color-neutral-3)]">
      <div class="w-full h-full flex items-center justify-center">Header</div>
    </b-header>
    <b-container>
      <b-aside width="192px">
        <div class="w-full h-full flex items-center justify-center">Aside</div>
      </b-aside>
      <b-main>
        <div class="w-full h-full flex items-center justify-center">Main</div>
      </b-main>
    </b-container>
  </b-container>
</template>

Header

Aside

Main

Footer

---

<template>
  <b-container class="h-240px">
    <b-header class="bg-[var(--b-color-neutral-3)]">
      <div class="w-full h-full flex items-center justify-center">Header</div>
    </b-header>
    <b-container>
      <b-aside width="192px">
        <div class="w-full h-full flex items-center justify-center">Aside</div>
      </b-aside>
      <b-container>
        <b-main>
          <div class="w-full h-full flex items-center justify-center">Main</div>
        </b-main>
        <b-footer class="bg-[var(--b-color-neutral-3)]">
          <div class="w-full h-full flex items-center justify-center">
            Footer
          </div>
        </b-footer>
      </b-container>
    </b-container>
  </b-container>
</template>

Aside

Header

Main

---

<template>
  <b-container class="h-240px">
    <b-aside width="192px">
      <div class="w-full h-full flex items-center justify-center">Aside</div>
    </b-aside>
    <b-container>
      <b-header class="bg-[var(--b-color-neutral-3)]">
        <div class="w-full h-full flex items-center justify-center">Header</div>
      </b-header>
      <b-main>
        <div class="w-full h-full flex items-center justify-center">Main</div>
      </b-main>
    </b-container>
  </b-container>
</template>

Aside

Header

Main

Footer

---

<template>
  <b-container class="h-240px">
    <b-aside width="192px">
      <div class="w-full h-full flex items-center justify-center">Aside</div>
    </b-aside>
    <b-container>
      <b-header class="bg-[var(--b-color-neutral-3)]">
        <div class="w-full h-full flex items-center justify-center">Header</div>
      </b-header>
      <b-main>
        <div class="w-full h-full flex items-center justify-center">Main</div>
      </b-main>
      <b-footer class="bg-[var(--b-color-neutral-3)]">
        <div class="w-full h-full flex items-center justify-center">Footer</div>
      </b-footer>
    </b-container>
  </b-container>
</template>

Divider

Horizontal

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum harum ratione nulla animi quod modi saepe inventore? Ea voluptas sapiente ad perferendis quia. Repellat, natus ducimus. Officia voluptate quod ex?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum harum ratione nulla animi quod modi saepe inventore? Ea voluptas sapiente ad perferendis quia. Repellat, natus ducimus. Officia voluptate quod ex?

Vertical

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum harum ratione nulla animi quod modi saepe inventore? Ea voluptas sapiente ad perferendis quia. Repellat, natus ducimus. Officia voluptate quod ex?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum harum ratione nulla animi quod modi saepe inventore? Ea voluptas sapiente ad perferendis quia. Repellat, natus ducimus. Officia voluptate quod ex?

With content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum harum ratione nulla animi quod modi saepe inventore? Ea voluptas sapiente ad perferendis quia. Repellat, natus ducimus. Officia voluptate quod ex?

content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum harum ratione nulla animi quod modi saepe inventore? Ea voluptas sapiente ad perferendis quia. Repellat, natus ducimus. Officia voluptate quod ex?

---

<template>
  <div>
    <h3>Horizontal</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum harum ratione
      nulla animi quod modi saepe inventore? Ea voluptas sapiente ad perferendis
      quia. Repellat, natus ducimus. Officia voluptate quod ex?
    </p>
    <b-divider />
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum harum ratione
      nulla animi quod modi saepe inventore? Ea voluptas sapiente ad perferendis
      quia. Repellat, natus ducimus. Officia voluptate quod ex?
    </p>
    <h3 class="mt-4">Vertical</h3>
    <div class="flex">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum harum
        ratione nulla animi quod modi saepe inventore? Ea voluptas sapiente ad
        perferendis quia. Repellat, natus ducimus. Officia voluptate quod ex?
      </p>
      <b-divider vertical />
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum harum
        ratione nulla animi quod modi saepe inventore? Ea voluptas sapiente ad
        perferendis quia. Repellat, natus ducimus. Officia voluptate quod ex?
      </p>
    </div>
    <h3 class="mt-4">With content</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum harum ratione
      nulla animi quod modi saepe inventore? Ea voluptas sapiente ad perferendis
      quia. Repellat, natus ducimus. Officia voluptate quod ex?
    </p>
    <b-divider>
      <span>content</span>
    </b-divider>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum harum ratione
      nulla animi quod modi saepe inventore? Ea voluptas sapiente ad perferendis
      quia. Repellat, natus ducimus. Officia voluptate quod ex?
    </p>
  </div>
</template>

Spacer

Horizontal

One

Two

Three

Vertical

One

Two

Three

---

<template>
  <div>
    <div class="flex">
      <strong>Horizontal</strong>
      <b-spacer :width="24" />
      <span>One</span>
      <b-spacer :width="24" />
      <span>Two</span>
      <b-spacer :width="24" />
      <span>Three</span>
    </div>
    <div class="flex flex-col mt-6">
      <strong>Vertical</strong>
      <b-spacer :height="24" />
      <span>One</span>
      <b-spacer :height="24" />
      <span>Two</span>
      <b-spacer :height="24" />
      <span>Three</span>
    </div>
  </div>
</template>

Container Attributes

Attribute	Description	Type	Accepted Values	Default
direction	layout direction for child elements	string	horizontal / vertical	vertical when nested with b-header or b-footer; horizontal otherwise
header-height	set header height	string / number	—	—
aside-width	set aside width	string /number	—	—
off-canvas	set offcanvas state	boolean	—	false

Container Slots

Name	Description	Subtags
—	customize default content	Container / Header / Aside / Main / Footer

Header Attributes

Attribute	Description	Type	Accepted Values	Default
height	height of the header	string	—	60px
fixed	fixed position	boolean	—	false
shadow	add shadow	boolean	—	false
border	add border bottom	boolean	—	false

Header Slots

Name	Description
—	customize default content

Aside Attributes

Attribute	Description	Type	Accepted Values	Default
width	width of the side section	string	—	300px

Aside Slots

Name	Description
—	customize default content

Main Attributes

Attribute	Description	Type	Accepted Values	Default
fluid	fluid width	boolean	—	false

Main Slots

Name	Description
—	customize default content

Footer Attributes

Attribute	Description	Type	Accepted Values	Default
height	height of the footer	string	—	60px

Footer Slots

Name	Description
—	customize default content

Divider Attributes

Attribute	Description	Type	Accepted Values	Default
vertical	vertical direction	boolean	—	false
content-position	position of inner content	string	center / left / right	center
no-spacing	no spacing	boolean	—	false

Divider Slots

Name	Description
—	customize default content

Spacer Attributes

Attribute	Description	Type	Accepted Values	Default
width	horizontal spacing	string / number	—	0
height	vertical spacing	string / number	—	0