Container

Centred max-width box

Caps the width of a page's content and centres it, so lines stay readable on wide screens. One per page region; it doesn't lay anything out inside.

Basic

size sm

size md

size lg

<script setup lang="ts">
import { BlessContainer } from "blessing-ui";
</script>

<template>
  <div class="col" style="max-width: none">
    <BlessContainer
      v-for="s in ['sm', 'md', 'lg'] as const"
      :key="s"
      :size="s"
      style="background: var(--bless-color-surface); padding-block: 8px"
    >
      <small>size {{ s }}</small>
    </BlessContainer>
  </div>
</template>

• size: sm, md, lg (default) or full. padded (default) keeps side gutters, including the safe area on notched phones.
• as sets the element (main, section…).

Usage

import { BlessContainer } from "blessing-ui";

API

Props

Name	Type	Default	Description
as	string	"div"
size	"md" | "sm" | "lg" | "full"	"lg"
padded	boolean	true

Slots

Name	Scope	Description
default	—